在 ASP.Net Core Razor 頁面中添加 Toast

Question

我目前正在使用 Razor 頁面構建我的第一個 ASP.Net 核心應用程序，我試圖將 toast 添加到屏幕上，當項目成功添加到購物車時，這是Add to Cart鏈接上的點擊事件。 我添加了邏輯，但沒有按預期工作。 我點擊了鏈接，下面是我試圖展示 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>

商品成功添加到購物車后，不會出現吐司。 我已經在 _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>

任何幫助是極大的贊賞

Answer 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以外的東西都行不通。 你可以在這里查看官方文檔

在 ASP.Net Core Razor 頁面中添加 Toast

問題描述

1 個解決方案

解決方案1
0 2021-11-23 06:26:34

在 ASP.Net Core Razor 頁面中添加 Toast

問題描述

1 個解決方案

解決方案1 0 2021-11-23 06:26:34

解決方案1
0 2021-11-23 06:26:34