Live Notifications In MVC

Live notifications are just like alerts when we are accessing any web application.

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 () {

//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>

<!-- 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>();

      /// 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.