Introduction
In this blog, I will demonstrate the Live Notification (refreshing in every 3 seconds) in MVC.
What is Live Notification?
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.
Code
We can update the notification by calling the setInterval() function in jQuery.
- setInterval(function () {
-
-
-
- }, 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>
-
- <!-- Modal -->
- <div class="modal fade" id="myModal" role="dialog">
- <div class="modal-dialog">
- <!-- Modal content-->
- <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>();
-
-
-
-
- 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.