在 ASP.Net Core Razor 页面中添加 Toast答案

【问题标题】：Adding Toast in the ASP.Net Core Razor page在 ASP.Net Core Razor 页面中添加 Toast
【发布时间】：2021-11-23 03:51:45
【问题描述】：

我目前正在构建我的第一个带有 Razor 页面的 ASP.Net 核心应用程序，我正在尝试在项目成功添加到购物车时将 toast 添加到屏幕上，这是Add to Cart 链接上的点击事件。我添加了逻辑，但没有按预期工作。我关注了link，下面是我试图展示 toast 的 Index.cshtml

<div class="toast">
   <div class="toast-body">
    Successfully added item to the cart
   </div>
</div>
 .............
 <td>
  .....
   <a href="#" id="buyNow" data-id="@item.InventoryId">Add to Cart</a>
  ......
 </td>
 .........
  <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "#buyNow", (function (e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                 var id=$(this).data("id");
                onBuyNow(id);
            }));

            function onBuyNow(id) {
               .........
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("OrderItem", "Inventories")',
                    data: data,
                    dataType: "json",
                    success: function (result) {
                        if (result !== "")
                        {
                            //showing validation errors
                            .........
                        }
                        else {
                           // Navigates to the same page back and thats where I am trying to show toast
                            var url = '@Url.Action("Index", "Inventories")';
                            window.location.href = `${url}?id=${customerId}&rmID=${@HttpContextAccessor.HttpContext.Request.Query["rmID"]}`;
                            // trying to show toast on success
                            $('.toast').toast('show');
                        }
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
                };
            });
    </script>

当商品成功添加到购物车时，没有 toast 显示。我已经在 _Layout.cshtml 中引用了引导程序

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>App Name</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
</head>

非常感谢任何帮助

**** 编辑***

在 _Layout.cshtml 中添加新引用之前，它会显示导航和所有

添加建议的新引用后，如

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>App Name</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
    <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>
</head>

问题是它从索引页面中删除了分页，它看起来像下面的表格和页脚

【问题讨论】：

能否请您看一下答案，以便为您指出问题所在。您的代码没问题，但 script references 不正确。 Toast 需要script 建议的w3schools
还有什么我可以帮忙的吗？
谢谢我这几天有点病，没办法看这个
哦，我明白了，快点好起来，祝你一切顺利。

标签： c# asp.net-core razor bootstrap-4 asp.net-core-mvc

【解决方案1】：

我已经检查了您的代码。您的script library 似乎有问题参考。这是不正确的。你所关注的链接他们分享了您还没有使用的链接。所以我们的收获是，因为 toast 它需要特定的库，这就是你没有得到的原因它。

Your Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
</head>
<body>
    <div class="toast">
        <div class="toast-body">
            Successfully added item to the cart
        </div>
    </div>

    <td>

        <a href="#" class="btn btn-primary" id="buyNow" data-id="5">Add to Cart</a>

    </td>
    <script>
        $(document).ready(function () {
            $("#buyNow").click(function (e) {
         
                var id = 5;
                onBuyNow(id);
            });
            function onBuyNow(id) {
                alert("Your Product Id is : " +id);
                $('.toast').toast('show');
            }
        });
    </script>

</body>
</html>

Output:

注意：记得添加所需的脚本链接。此外，对于内部链接，请确保您在本地拥有这些脚本库。其他比toast 不起作用。你可以看看official document here

Self-define toast without any script:

<div id="toast" class="toast" style="position: fixed; margin-left:250px; bottom: 800px;font-weight: 400;line-height: 1.5; color: !important #212529; width: 100%; max-width: 300px;border: 1px solid rgba(0,0,0,.1);box-shadow: 0 0.5rem 1rem;    border-radius: 0.25rem; background-color: rgba(255,255,255,.85); color: #6c757d; font-size: 16px; padding: 10px; user-select: none;">
    <div class="toast-header">
        Toast Header
    </div>
    <div class="toast-body">
        Successfully added item to the cart
    </div>
</div>

<td>

    <a href="#" class="btn btn-primary" id="buyNow" data-id="5">Add to Cart</a>

</td>

Self define script:

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#toast").hide();
            $("#buyNow").click(function (e) {

                var id = 5;
                onBuyNow(id);
            });
            function onBuyNow(id) {
                $("#toast").show();
                $("#toast").show().delay(2000).fadeOut();
            }
        });
    </script>
}

Output:

备注：如果你想对齐toast-box position，请根据你的修改margin-left:250px; bottom: 800px这些属性需要。希望它能指导您解决问题并节省很多时间。

【讨论】：

我尝试添加建议的引用，因为它删除了我已实现的分页。如果问题，我已经更新了问题
是的，我也遇到了这个问题。 Bootstrap 覆盖剃刀项目脚本的脚本。虽然要摆脱这个问题需要修复很多脚本。但我更喜欢我自己的吐司self-definecss 和JavaScript，这样会更简单也更省时。