Search code examples
twitter-bootstrapasp.net-corerazorblazorblazor-server-side

How to use bootstrap js in a razor page

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.

Solution

  • 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="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js"></script>

    <!--add js file-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>       

</body>
</html>

    2.Modify your Index.razor:

    @page "/"
@inject IJSRuntime JSRuntime

<h3>Carousel</h3>
<!-- NOTE: the data-bs- attributes added as per the Bootstrap v5.1 instructions -->
<div id="@carouselName" class="carousel slide" data-bs-ride="carousel" data-bs-wrap="true" data-bs-interval="2000" data-bs-pause="false">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/id/196/1920/1080" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/id/1057/1920/1080" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/id/1067/1920/1080" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

@code {
    const string carouselName = "carouselExampleIndicators"; // NOTE: the ID of the carousel

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        object[] args = { carouselName };
        await JSRuntime.InvokeVoidAsync("startCarousel", args); // NOTE: call JavaScript function with the ID of the carousel
    }
}

    Update:

    After checking your repo, your _Host.cshtml is not correct, it should be:

    @page "/"
@namespace RecommendationAlgorithmSample.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />