加载后立即异步更新页面以提高响应时间
0/5 (0投票)
响应时间是决定Web应用程序性能的主要因素之一。很多时候，我们会遇到页面内容可以
响应时间是决定Web应用程序性能的主要因素之一。很多时候，我们会遇到页面内容可以在页面渲染后立即异步更新，以响应页面请求。
我们可以在页面加载后立即通过AJAX调用服务器来实现这一点。在这篇文章中，我们将使用AJAX在页面加载后更新网格。
<form id="form1" runat="server"><div>
<asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<h3>姓名</h3>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="name" runat="server" Text='<%# Eval("name") %>' class="name"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<h3>地址</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; }
}