Update WebGrid on Clients Without Postback using SignalR

• Download source code (RAR) - 2.9 KB
• Download EasySolution (RAR) - 3 MB
• Download EasySolution (ZIP) - 3.1 MB

Introduction

Till now, everyone has used a gridview to bind data on postbacks. Here, we make it dynamic using SignalR to update columns on each client where the gridview is displayed without postback or any server side operation.

Background

SiganlR and JQuery will make this possible. Before proceeding to the next step, I would suggest you refer to the scenario which was explained in the previous article.

Step 1: User clicks on Buy Now button to purchase a particular item:

Step 2: After payment, user is again redirected back to this view with success message and Confirm Purchase button is visible.

Step 3: After click of button Confirm Purchase, all the connected Clients are updated with the new quantity without reloading page or a postback.

Using the Code

Following is the code for webgrid, here user clicks on Buy Now button to purchase a particular item, after payment, user is again redirected back to this view with Success message and then the quantity is reflected in the grid. Now this quantity which is to be updated is called by function from a hub class named ProjectHub. This function hits each client wherever the grid has the item, which is purchased. Hence, without refreshing or posting back to server, all the clients are updated.

// code for webgrid   

@grid.GetHtml(

      columns:

            grid.Columns(

            grid.Column("Preview", format: @<img src="@Url.Content
            (@System.Configuration.ConfigurationManager.AppSettings["ImagePath"] + @item.Preview)" />),
            grid.Column("ID","ID", format: @<label>@item.ProjID</label>),
            grid.Column("ProjectName", "ProjectName", 
            format: @<label id="lblProjName">@item.ProjectName</label>),
            grid.Column("Cost", "Cost", format: @<label>@item.Cost</label>),
            grid.Column("DOD", "DOD", format: @<label>@item.DOD</label>),
            grid.Column("Quantity", "Quantity", 
            format: @<label id="@item.ProjID" >@item.Quantity</label>),
            grid.Column(format:@<input type="button" 
            value="Buy Now" onclick="location.href='@Url.Action
            ("BuyNow", "Home", new { ProjID= @item.ProjID })'" />
             ))

View Onload Script

This script is responsible for connection with Hub Class and client function to update gridview column value.

@section scripts {
    <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
    <script>
        $(function () 
         {
            var control = document.getElementById('btnSuccess');
            control.style.visibility = "hidden";
            var someSession = '@ViewBag.message';
            if (someSession == "success")
            {
                var control = document.getElementById('btnSuccess');
                control.style.visibility = "visible";
            }
            var conn_hub = $.connection.projectsHub;
            conn_hub.client.UpdateGrid= function (ID, quant) 
            {
                var labelText = $('#' + ID + '').text().trim();
                var id = "#" + ID;
                $(id).text(quant);
             };
        });
}

Call to Hub Class Function

This code is useful to send data from a view to the Hub which will be responsible to update the clients connected to it.

@section scripts {
 $.connection.hub.start().done(function () 
{
            $('#btnSuccess').click(function () 
            {
                var control = document.getElementById('btnSuccess');
                control.style.visibility = "hidden";
                var ID='@ViewBag.ID';
                var conn_hub = $.connection.projectsHub;
                conn_hub.server.send(ID);
             });
});
}

Project Controller

Controller is responsible for authenticating the page and displaying the products list.

public ActionResult Projects(string ID)
{
            if (User.Identity.IsAuthenticated)
            {
                EasySolutionEntities db = new EasySolutionEntities();
                if (Session["result"] == "success")
                {
                    var context = GlobalHost.ConnectionManager.GetHubContext<ProjectsHub>();
                    ViewBag.message = "success";
                    ViewBag.ID = ID;
                    ID = ID.Substring(0, 2);
                }
                Session["result"] = "";
                return View(db.fetch_projects(ID).ToList());
            }
            else
            {
                return Content("<script language='javascript' 
                type='text/javascript'>alert('Please Login for access');</script>");             
            }
}

Hub Class Code

Code for the Hub class which would update the clients connected with the new quantity count of products.

public void Send(string ID)
{
EasySolutionEntities db = new EasySolutionEntities();

ObjectParameter quantity = new ObjectParameter("Quantity", typeof(int));

db.update_Quantity(ID,quantity);

string quant = quantity.Value.ToString();
Clients.All.UpdateGrid(ID, quant);
}

Download the code here.

Points of Interest

In this tip, we cover the following points:

• Connection to Hub class
• Updation of webgrid without postback

History

Refer to the following link to understand the scenario better:

• http://www.codeproject.com/Tips/1002798/Demonstration-Application-using-MVC-SignalR-and-En?msg=5084299#xx5084299xx