Live Notifications In MVC

Introduction

In this blog, I will demonstrate the Live Notification (refreshing in every 3 seconds) in MVC.

What is Live Notification?

MVC

Live notification is just like an alert when accessing a web application. If the notification is not updating or updating only when a page is refreshed, to update the client or users to indicate the changes on the web application.

Here, I have created a simple demo that shows the notification on the right top corner and updates every three seconds. It updates the notification number and notification dropdown.

You can see five notifications at a time and can show all notifications by clicking on "Show more" links, as given below.

MVC

Code

We can update the notification by calling the setInterval() function in jQuery.

setInterval(function () {
//Function to be called in every 3(3000 Milisecond/1000) seconds
}, 3000);

Below is the jQuery code that helps you to update notification and showing them in Notification Area.

$(document).ready(function () {
setInterval(function () {
UpdateNotifications();
}, 3000);
});
function UpdateNotifications() {
$.ajax({
type: "GET",
url: "/Home/GetNotifications",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
console.log(response);
if (response != null) {
var j = ""; var p = 0; var Q = "";
$.each(response, function (k, v) {
p++;
if (p < 6) {
j += "<li><a><img src='assets/img/nty.png' style='height:20px;width:20px'/> <strong> " + v.Notification.toString() + " </strong> <br /> <div style='text-align:right;font-size:smaller;font-style:italic'> <i style='font-size:smaller'> updated : " + v.LastUpdated.toString() + "</i></div></a></li>";
}
Q += "<a><img src='assets/img/nty.png' style='height:20px;width:20px'/> <strong> " + v.Notification.toString() + " </strong> <br /> <div style='text-align:right;font-size:smaller;font-style:italic'> <i style='font-size:smaller'> updated : " + v.LastUpdated.toString() + "</i></div></a>";
});
$('#myNotifyList').html("");
j += "<li><a data-toggle='modal' data-target='#myModal'><div style='text-align:center'><strong> Show more </strong></div></li>";
$('#myNotifyList').append(j);
$('#countNotify').html("<span>" + p + "</span>");
$('#myAllNotifications').html("");
$('#myAllNotifications').append(Q);
}
},
failure: function (response) {
alert(response.d);
}
});
}

Below is the HTML content Modal and navbar where the notification will update.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Test Web Site</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="LiveNotification.aspx">Dashboard</a></li>
<li><a >User Profile</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"> Notifiction (<span id="countNotify">0</span>) <span class="caret"></span></a>
<ul class="dropdown-menu" id="myNotifyList">
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
<img src="assets/img/nty.png" style="height: 50px; width: 50px">
Notifications</h4>
</div>
<div class="modal-body" id="myAllNotifications">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>

An MVC Controller that returns the Notifications list.

[HttpGet]
public JsonResult GetNotifications()
{
List<DataSubmit> lstDataSubmit = new List<DataSubmit>();
/// Should update from DB
///
///e.g. Generating Notification manually
var No = 10;
while (No != 0)
{
lstDataSubmit.Add(new DataSubmit() { Notification = "This is dynamic notification..." + No, LastUpdated = DateTime.Now.ToString("ss") + " seconds ago..." });
No--;
}
return Json(lstDataSubmit, JsonRequestBehavior.AllowGet);
}

Summary

In this article, I discussed how we can create simple live notifications. I have attached the full project for demo. You can download it and implement in your application.

If you like my article, please comment.

13 Comments

Join the conversation! Your thoughts help the community grow.

William Oniszko4y ago
Would this still apply to MVC5 in ASP.NET Core 6?
Sabari M6y ago
Nice blog...
- Mohammad Shahid Solanki6y ago
  Thank you, follow me for new blogs
Sridhar Yelagandhula7y ago
How to Apply same Notifications in web Api ?
- Mohammad Shahid Solanki6y ago
  We can use api to fetch notifications that's it
Gaurav Raj8y ago
Hi Mohammad Shahid Solanki , Is it better than signalr code?
- Mohammad Shahid Solanki6y ago
  Cannot say, But yes signarR is far better than this
Ivin Raj S8y ago
On page load we are done manually to display notification count. We are having notification message whenever we insert new record in the database. Only unread message should be displayed read message should be disappear. any idea?
- Mohammad Shahid Solanki6y ago
  Yes, We can create simple column in database that isRead, Update it on each notification view and whenver call for the next notification, Ignore the isRead one.
Sachin Hinge8y ago
Why you are not using SingalR ?
- Mohammad Shahid Solanki8y ago
  As i am not familiar with SingarR framework so i use this. This is also traditional way to achieve.
Laxmidhar Sahoo8y ago
A asynchomonos call and dynamic format is good idia
- Mohammad Shahid Solanki8y ago
  I had a requirement to do the same in quite light weight with asynchronous call therefore i looking towards this...