在 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-define
css
和JavaScript
,这样会更简单也更省时。以上是关于在 ASP.Net Core Razor 页面中添加 Toast的主要内容,如果未能解决你的问题,请参考以下文章
Asp.net core razor pages 加载部分页面