How to use bootstrap js in a razor page-CodePudding

I want to make a bootstrap carousel in my Index.razor because in the documentation it says: Don't place a tag in a Razor component file (.razor) because the tag can't be updated dynamically by Blazor. But I need the bootstrap js to get my carousel working. How can I use the bootstrap js the cdn or save it in a file?

I also saw this post but it do not help me because they use the <script> tag.

CodePudding user response：

You shared post does not use <script> tag in .razor file. And I think you do not read the document entirely, pls read carefully for the following doc.

Assume that you use ASP.NET 6 Blazor Server app, you could follow the steps:

1.Add js file in _Layout.cshtml:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorApp1.styles.css" rel="stylesheet" />

    <!--startCarousel-->
    <script type="text/javascript">
        function startCarousel(carouselId) {
            var myCarousel = document.getElementById(carouselId);
            var carousel = new bootstrap.Carousel(myCarousel);
            carousel.cycle(); 
        }
    </script>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" >Reload</a>
        <a >