In previous ASP.NET MVC post we saw How to display HTML content from Controller on Razor Views. In this post we will see How we can Show notifications in ASP.NET MVC forms using JQuery. We will use Notify.js javascript to display it. It is an open-sourced JQuery plugin licensed under MIT license. It is pretty simple to integrate it with MVC forms and use it. For this example, we will create a simple MVC view ,make an Ajax call to the Controller to calculate numbers and show result has a notification to the user. You can visit this post for a detailed explanation on How to use Notify.js jquery plugin.
How to show Notifications in ASP.NET MVC:
Create a new model class with name Numbers.cs and edit as below:
Numbers.cs:
namespace AngularJSApp.Models
{
public class Numbers
{
public int a { get; set; }
public int b { get; set; }
}
}
Create a MVC controller with name NotificationsController.cs and edit it as below:
NotificationsController.cs:
using AngularJSApp.Models;
using System;
using System.Web.Mvc;
namespace AngularJSApp.Controllers
{
public class NotificationsController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Calculate(Numbers numbers)
{
try
{
int o = numbers.a + numbers.b;
return Json(new { data = o.ToString() }, JsonRequestBehavior.AllowGet);
}
catch(Exception ex)
{
return Json(new { data = "Error:"+ex.Message.ToString() }, JsonRequestBehavior.AllowGet);
}
}
}
}
The Calculate method will be called via Ajax call from the View and its result will be displayed as Notifications to the users.
Create View for the Index method and edit it as below:
Index.cshtml:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="~/Scripts/notify.min.js"></script>
<title>ASP.NET MVC Notifications</title>
<style>
body {
padding: 10px !important;
margin: 10px !important;
}
</style>
</head>
<body>
<div class="row">
<input type="text" class="form-control" id="NumA" placeholder="Enter a Number" />
<br /><br />
<input type="text" class="form-control" id="NumB" placeholder="Enter a Number" />
<br /><br />
<input type="button" class="btn btn-primary" value="Add Up"
id="btnAdd" />
<br /><br />
</div>
<script>
$('#btnAdd').click(function () {
$.ajax({
type: "POST",
url: "http://localhost:32413/Notifications/Calculate",
data: {
a: $('#NumA').val(),
b: $('#NumB').val()
},
success: function (data) {
$('#btnAdd').notify(JSON.parse(JSON.stringify(data)).data, {
globalPosition: 'left center',
autoHide: false,
className: 'success'
})
}
});
});
</script>
</body>
</html>
The Notification will be shown on the Add Button. Upon clicking it, an ajax call is made to the controller for getting the result and the notification will be shown. You can change the position, design, timeout, turn-off auto-hide by changing its properties when it is made. This post explains customization of this Notifications. You can download both the source code for your usage.
ASP.NET MVC Show Notifications using JQuery – Notify.js
HTML Show Notifications using JQuery – Notify.js