Adding Toast in the ASP.Net Core Razor page
I am currently building my first ASP.Net core application with Razor pages, where I am trying to add the toast to screen on when an item is successfully added to cart which is a click event on the Add to Cart link. I added the logic but is not working as expected. I followed link and below is the Index.cshtml where I am trying to show 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>
No toast shows up when the item got added to cart successfully. I already have references to the bootstrap in the _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/[email protected]/font/bootstrap-icons.css">
</head>
Any help is greatly appreciated
**** EDIT***
Before adding the new references in the _Layout.cshtml, it shows the navigation and all
After adding the suggested new refreneces like
<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/[email protected]/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>
The issue is it takes off the pagination from the index page and it appears like below table and the footer
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.