在 ASP.Net Core Razor 页面中添加 Toast
Adding Toast in the ASP.Net Core Razor page
我目前正在使用 Razor 页面构建我的第一个 ASP.Net 核心应用程序，我试图在项目成功添加到购物车时将 toast 添加到屏幕，这是 Add to Cart link。我添加了逻辑但没有按预期工作。我关注了 link，下面是 Index.cshtml，我正在尝试展示 toast
<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
中引用了 bootstrap
<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>
问题是它取消了索引页的分页，它看起来像下面 table 和页脚
I have checked your code. Seems problem on your script library
references. It’s not correct. The link you have followed they shared
the link as well which you haven't used. So the take away is, for
toast it requires particular library that's why you are not getting
it.
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:
Note: Remember to add required script link. Additionally, for internal link make sure you have those script library locally. Other
than toast will not work. You can have a look 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:
Remarks: if you want to align the toast-box position please modify margin-left:250px; bottom: 800px these property as per your
needs. Hope it would guide you to resolve the issue and save much
time.
我目前正在使用 Razor 页面构建我的第一个 ASP.Net 核心应用程序，我试图在项目成功添加到购物车时将 toast 添加到屏幕，这是 Add to Cart link。我添加了逻辑但没有按预期工作。我关注了 link，下面是 Index.cshtml，我正在尝试展示 toast
<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
中引用了 bootstrap<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>
问题是它取消了索引页的分页，它看起来像下面 table 和页脚
I have checked your code. Seems problem on your
script libraryreferences. It’s not correct. The link you have followed they shared the link as well which you haven't used. So the take away is, fortoastit requires particular library that's why you are not getting it.
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:
Note: Remember to add required script link. Additionally, for internal link make sure you have those script library locally. Other than
toastwill not work. You can have a look 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:
Remarks: if you want to align the
toast-box positionplease modifymargin-left:250px; bottom: 800pxthese property as per your needs. Hope it would guide you to resolve the issue and save much time.