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.

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

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

  1. $(document).ready(function () {
  2. setInterval(function () {
  3. UpdateNotifications();
  4. }, 3000);
  5. });
  7. function UpdateNotifications() {
  8. $.ajax({
  9. type: "GET",
  10. url: "/Home/GetNotifications",
  11. data: '{}',
  12. contentType: "application/json; charset=utf-8",
  13. dataType: "json",
  14. success: function (response) {
  15. console.log(response);
  16. if (response != null) {
  18. var j = ""; var p = 0; var Q = "";
  19. $.each(response, function (k, v) {
  20. p++;
  21. if (p < 6) {
  22. 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>";
  23. }
  24. 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>";
  25. });
  26. $('#myNotifyList').html("");
  27. j += "<li><a data-toggle='modal' data-target='#myModal'><div style='text-align:center'><strong> Show more </strong></div></li>";
  28. $('#myNotifyList').append(j);
  29. $('#countNotify').html("<span>" + p + "</span>");
  30. $('#myAllNotifications').html("");
  31. $('#myAllNotifications').append(Q);
  32. }
  33. },
  34. failure: function (response) {
  35. alert(response.d);
  36. }
  37. });
  38. }

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

  1. <nav class="navbar navbar-inverse">
  2. <div class="container-fluid">
  3. <div class="navbar-header">
  4. <a class="navbar-brand" href="#">Test Web Site</a>
  5. </div>
  6. <ul class="nav navbar-nav">
  7. <li class="active"><a href="LiveNotification.aspx">Dashboard</a></li>
  8. <li><a >User Profile</a></li>
  9. </ul>
  10. <ul class="nav navbar-nav navbar-right">
  11. <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"> Notifiction (<span id="countNotify">0</span>) <span class="caret"></span></a>
  12. <ul class="dropdown-menu" id="myNotifyList">
  13. </ul>
  14. </li>
  15. <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
  16. <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  17. </ul>
  18. </div>
  19. </nav>
  21. <!-- Modal -->
  22. <div class="modal fade" id="myModal" role="dialog">
  23. <div class="modal-dialog">
  24. <!-- Modal content-->
  25. <div class="modal-content">
  26. <div class="modal-header">
  27. <button type="button" class="close" data-dismiss="modal">
  28. ×</button>
  29. <h4 class="modal-title">
  30. <img src="assets/img/nty.png" style="height: 50px; width: 50px">
  31. Notifications</h4>
  32. </div>
  33. <div class="modal-body" id="myAllNotifications">
  34. </div>
  35. <div class="modal-footer">
  36. <button type="button" class="btn btn-default" data-dismiss="modal">
  37. Close</button>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
An MVC Controller that returns the Notifications list.
  1. [HttpGet]
  2. public JsonResult GetNotifications()
  3. {
  4. List<DataSubmit> lstDataSubmit = new List<DataSubmit>();
  6. /// Should update from DB
  7. ///
  8. ///e.g. Generating Notification manually
  9. var No = 10;
  10. while (No != 0)
  11. {
  12. lstDataSubmit.Add(new DataSubmit() { Notification = "This is dynamic notification..." + No, LastUpdated = DateTime.Now.ToString("ss") + " seconds ago..." });
  13. No--;
  14. }
  15. return Json(lstDataSubmit, JsonRequestBehavior.AllowGet);
  16. }
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.