如何在Blazor Web App模板中正确使用Bootstrap 5.3.x Toast组件？

问题原因分析 #

你的问题出在两个核心点：

1. 缺少Bootstrap JavaScript文件引入：Bootstrap的交互组件（如Toast）依赖其JS文件实现动态功能，你仅在App.razor中引入了CSS样式，未添加必要的JS支持。
2. Blazor组件内直接写<script>标签的局限性：Blazor的组件渲染机制会导致嵌入组件内的脚本无法正确绑定事件——要么脚本执行时DOM元素还未渲染完成，要么事件绑定会被Blazor的更新机制覆盖。

解决方案步骤 #

1. 引入Bootstrap JavaScript文件 #

Bootstrap 5依赖Popper.js，而bootstrap.bundle.min.js已内置Popper，直接引入该文件即可。修改App.razor的<body>部分，在Blazor核心脚本前添加：

<body>
    <Routes />
    <script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>

2. 改用Blazor规范的交互方式实现Toast #

避免在组件内直接写<script>，通过JS互操作调用Bootstrap的Toast方法：

步骤2.1：创建全局JS工具文件

在wwwroot目录下新建scripts.js文件，写入Toast调用逻辑：

function showToast() {
    const toastElement = document.getElementById('liveToast');
    if (toastElement) {
        const toastInstance = bootstrap.Toast.getOrCreateInstance(toastElement);
        toastInstance.show();
    }
}

步骤2.2：引入全局JS文件

在App.razor的<body>中，Bootstrap JS之后添加该文件的引入：

<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="scripts.js"></script>
<script src="_framework/blazor.web.js"></script>

步骤2.3：修改Blazor组件代码

将原Toast代码替换为Blazor风格写法，用@onclick绑定事件，通过JS互操作触发Toast：

<button type="button" class="btn btn-primary" @onclick="TriggerToast">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="Toast Icon">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

@code {
    [Inject]
    private IJSRuntime JsRuntime { get; set; }

    private async Task TriggerToast()
    {
        await JsRuntime.InvokeVoidAsync("showToast");
    }
}

3. 验证效果 #

重启项目后，点击按钮即可正常弹出Toast。

内容的提问来源于stack exchange，提问作者DevQt