ASP.Net Core Razor页面添加Bootstrap Toast提示不生效问题

问题原因与修复方案 #

1. Toast未触发的根因 #

你当前的代码在ajax请求成功后先执行了window.location.href页面跳转逻辑，跳转后当前页面的JS上下文直接销毁，后续$('.toast').toast('show')代码根本不会执行，自然不会弹出Toast。

2. 样式异常（分页消失）的根因 #

你重复引入了不同版本的Bootstrap资源：项目本地默认自带了Bootstrap CSS，你后续新增的CDN版Bootstrap 4资源和本地版本冲突，导致原有样式被覆盖、分页组件失效。 #

具体修复步骤 #

第一步：修复资源冲突 #

删除_Layout.cshtml中额外新增的4行CDN资源：

<!-- 删掉以下4行代码 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

保留本地默认的Bootstrap资源即可，ASP.NET Core默认模板自带的Bootstrap 5已经包含Toast组件所需的所有样式和JS依赖。

第二步：调整Toast触发逻辑，两种方案可选 #

方案A：不跳转页面（推荐，体验更流畅）

无需刷新页面，加购成功后直接弹出Toast，修改ajax的success逻辑即可：

success: function (result) {
    if (result !== "")
    {
        // 原有验证错误逻辑不变
    }
    else {
        // 删掉window.location.href跳转代码
        // 直接弹出Toast，Bootstrap 5的调用方式如下
        const toastEl = document.querySelector('.toast');
        const toast = new bootstrap.Toast(toastEl, {delay: 3000}); // 3秒后自动关闭
        toast.show();
    }
}

同时补充Toast容器的必要属性，调整定位避免被其他元素遮挡：

<div class="toast position-fixed bottom-0 end-0 m-3" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-body">
    Successfully added item to the cart
   </div>
</div>

方案B：必须跳转页面的场景

如果业务需要刷新页面，跳转时携带Toast触发参数，页面加载时判断参数弹出Toast：

1. 调整跳转逻辑，新增toast=success参数：

else {
    var url = '@Url.Action("Index", "Inventories")';
    window.location.href = `${url}?id=${customerId}&rmID=${@HttpContextAccessor.HttpContext.Request.Query["rmID"]}&toast=success`;
}

2. 页面加载时判断参数，触发Toast：

$(document).ready(function () {
    // 原有其他逻辑不变
    const urlParams = new URLSearchParams(window.location.search);
    if(urlParams.get('toast') === 'success'){
        const toastEl = document.querySelector('.toast');
        const toast = new bootstrap.Toast(toastEl, {delay: 3000});
        toast.show();
    }
})

附加优化项 #

你当前循环渲染的Add to Cart按钮用了固定id="buyNow"，同一个页面中id不能重复，会导致只有第一个商品的加购按钮生效，建议修改为class绑定：

<!-- 把id改成class -->
<a href="#" class="buyNow" data-id="@item.InventoryId">Add to Cart</a>

对应事件绑定也调整为：

$(document).on("click", ".buyNow", (function (e) {
    // 原有逻辑不变
}));

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