Asynchronous update of page immediately after load to improve response time
Response time is one of major factor in deciding the performance of web application. Many time we come across pages where content of page can be updated asynchronously immediatly after the page rendering in responce to page request.
We can achive this using ajax call to server immediatly after the page load. In this article we will update the grid after the page load using ajax.
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<h3>Name</h3>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="name" runat="server" Text='<%# Eval("name") %>' class="name"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<h3>Address</h3>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="address" runat="server" Text="" class="address"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<script type="text/javascript">
$(function () {
$(".name").each(function () {
var lblNameObj = this
$.ajax({
url: "UpdateTableWithAjax.aspx/GetAddress",
type: "POST",
contentType: "application/json",
dataType: "json",
data: "{name : '" + this.innerHTML + "'}",
success: function (msg) {//On Successfull service call
$("#" + lblNameObj.id).parent().next().children().html(msg.d)
},
error: function (xhr, msg) {
alert(msg);
}
});
});
});
</script>
</form>
protected void Page_Load(object sender, EventArgs e)
{
List<ClsEmployee> lstEmp = new List<ClsEmployee>();
ClsEmployee emp1 = new ClsEmployee();
emp1.name="Emp1";
lstEmp.Add(emp1);
ClsEmployee emp2 = new ClsEmployee();
emp2.name="Emp2";
lstEmp.Add(emp2);
ClsEmployee emp3 = new ClsEmployee();
emp3.name="Emp3";
lstEmp.Add(emp3);
gvEmployee.DataSource = lstEmp;
gvEmployee.DataBind();
}
[WebMethod]
public static string GetAddress(string name)
{
string adr="";
//Loop has been added for the delay
for (int i = 0; i < 10000; i++)
{
for (int j = 0; j < 5000; j++)
{
adr = "Address of " + name;
}
}
return adr;
}
public class ClsEmployee
{
public string name { get; set; }
public string address { get; set; }
}
Revision number 1, Monday, March 14, 2011 6:18:42 PM by kaushalendrarai
You must Login to comment.
|
Wed, Mar 16, 2011 9:22 AM
by small peter
|
I am sorry but I didn't get it. Will it actually improve the response time? The ajax code will only be executed when this page is rendered. But at time, the grid is already rendered, isn't it?
|