The ASP.NET Core toast alert is a small, easy-to-use, extendable, nonblocking alert notification pop-up. In this blog, you will learn about a simple notification popup message that can improve the user experience by using ASP.NET Core C# MVC Razor. Its specific target disappears automatically after a few seconds (time-out) with different animation effects by CSS and HTML only.
As you can see there are many blogs of sweet alert popup notification messages but all are with HTML pages, none of them with MVC or ASP.NET. I had written a simple blog on this to understand easily and use toast notifications in your Projects without any plugins using only CSS and a small javascript function.
I will build a small toast message application whose only purpose is to invoke these toast alerts. I will be using the CSS and simple javascript function to call toast notification messages in our master page (Layout.cshtml). When I will call the function from a javascript and my javascript function will execute my user message on any layout page.
A toast message in ASP.NET Core is a small pop-up notification that appears on the screen to inform the user of a specific event or action.
It can be used to display success or error messages, confirmations, or other types of notifications.
To implement a toast message in an ASP.NET Core application, you can use JavaScript and CSS to create the message and display it on the page. You can also use a library such as Toastr to simplify the process.
ASP.NET Core MVC Toast Notification
Step 1.
Create New Application in visual studio 2019
- Open your visual studio 2019 or greater than 2019
- Click on Create a New Project
- Select ASP.NET Core Web Application and then Next
- Provide a Project name and confirm or change the Location. Select Create
- Select the latest version of ASP.NET Core in the drop-down (.NET Core 5.0)and then select Web Application
- Under Authentication, select Change and set the authentication to Individual User Accounts and then click on Create button
Step 2.
Go to your HomeController.cs(as we have been using a basic template, not an empty MVC project), and create a new action method.
public IActionResult Create()
{
return View();
}
And also put this code in your HomeController.cs file
public IActionResult DemoToastMessage()
{
return Json("Demo Toast Message for Users");
}
Step 3.
Right-Click inside above created ActionMethod and Click on "Add View"
When you click on Razor View-Empty you will see like as given below
Step 4.
Place this code in your created view page (Create.cshtml) like as given below.
@{
ViewBag.Title = "Create";
}
<div class="container">
<div class="text-center">
<h1 class="display-4">Welcome To Toast Notification Example</h1>
<button class="btn btn-primary" onclick="toastMessage();">Click here</button>
</div>
</div>
@section scripts{
<script type="text/javascript">
var toastMessage = function () {
event.preventDefault();
$.ajax({
type: "POST",
url: "/Home/DemoToastMessage",
contentType: "application/json",
dataType: "json",
success: function (response) {
tostlMessage(response);
}
});
};
</script>
}
tostlMessage(response); : Add this function in our Layout.cshtml master page
Step 5.
Place this code in your created view page Layout.cshtml like as given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Toast Message In Dot NetCore</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<style>
/*This is CSS which is use in our Toast Message UI*/ #toast {
display: none;
border-radius: 62px;
display: none;
pointer-events: auto;
min-width: 300px;
font-weight: 600;
background-color: #0c0c0c8a;
padding: 12px 25px;
font-size: 16px;
-webkit-box-shaadow: 0 1px 1px rgba(0,0,0,.25), 0 0 1px rgba(0,0,0,.35);
box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 0 1px rgba(0,0,0,.35);
-webkit-border-radius: 0 0 4px 4px;
border-radius: 35 20 29px 25px;
position: fixed;
z-index: 999;
color: #f9f7f7f7;
border-radius: 10px;
margin-top: 5px;
}
#toast.show {
display: block;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
</style>
</head>
<body>
<div id="toast"></div> @*User Message append on this div section*@
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ToastMessageInDotNetCore</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - ToastMessageInDotNetCore - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
<script> /*This is JavaScript function which is call in our Create.cshtml page*/
function tostlMessage(message) {
$('#toast').text(message);
var x = document.getElementById("toast");
x.className = "show";
setTimeout(function () { x.className = x.className.replace("show", ""); }, 7000);
};
</script>
</body>
</html>
Comments