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

Posted

技术标签:

【中文标题】在 ASP.Net Core Razor 页面中添加 Toast【英文标题】:Adding Toast in the ASP.Net Core Razor page 【发布时间】: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 还有什么我可以帮忙的吗? 谢谢我这几天有点病,没办法看这个 哦,我明白了,快点好起来,祝你一切顺利。 【参考方案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-definecssJavaScript,这样会更简单也更省时。

以上是关于在 ASP.Net Core Razor 页面中添加 Toast的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ASP.Net Core Razor 页面上重定向

ASP .NET Core Razor 页面中的授权

Asp.net core razor pages 加载部分页面

Asp.Net Core Razor 页面中的远程验证

ASP.NET Core Razor 页面与完整 MVC Core [关闭]

Asp .NET Core 2.2 Razor 页面布局和局部