如何在剃须刀页面中使用bootstrap js

发布于 2025-02-12 17:31:38 字数 494 浏览 1 评论 0 原文

我想在我的 index.razor 中做一个bootstrap旋转木马，因为在文档它说：不在剃须刀组件文件（.RAZOR）中放置标签，因为Blazor无法动态更新标签。，但我需要<< Strong> Bootstrap JS 使我的轮播工作。如何使用Bootstrap JS cdn或将其保存在文件中？

我还看到了这个 post post ＆lt; script＆gt; 标签。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

西瑶 2025-02-19 17:31:38

您共享的帖子不使用.razor文件中的＆lt; script＆gt; 标记。而且我认为您没有完全阅读该文档，请仔细阅读以下doc 。

假设您使用ASP.NET 6 Blazor Server应用程序，可以按照以下步骤操作：

1.ADD JS文件 _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">

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" />

回复收藏 0 原文

~没有更多了~