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.
@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>
-->
<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:
