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; }
}
