在UpdatePanle使用的时候,它每次的更新都是将整个页面回送的,而且也会加上一些他更新的标记,所以往往它传递的数据量比传统的PostBack都要多,这其实是违背AJAX减少数据量传输的特点的
在使用UpdatePanel的时候,要只传输必要的内容,使用相对小而细的UpdatePanel,而不是使用大而全的UpdatePanel,在每次PostBack后只需要更新必要的UpdatePanel(将UpdatePanel的UpdateMode设置为Conditional,在需要更新的UpdatePanel的时候,调用Update方法),或者使用Incrementtal Content Pattern,这个我在前面一篇专讲UpdatePanel的一篇中写过,然后在获取数据的时候,只获取必要的数据
创建一个aspx页面
前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanel.aspx.cs" Inherits="Demo30_UpdatePanel" EnableViewState="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<%= DateTime.Now-this.m_start %>
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<%# Container.DataItem %>
</ItemTemplate>
<SeparatorTemplate>
<br />
</SeparatorTemplate>
<FooterTemplate>
<hr />
</FooterTemplate>
</asp:Repeater>
<asp:Button ID="Button1" runat="server" Text="Refresh"
onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<%# Container.DataItem %>
</ItemTemplate>
<SeparatorTemplate>
<br />
</SeparatorTemplate>
<FooterTemplate>
<hr />
</FooterTemplate>
</asp:Repeater>
<asp:Button ID="Button2" runat="server" Text="Refresh"
onclick="Button2_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
public partial class Demo14_UpdatePanel : System.Web.UI.Page
{
protected DateTime m_start;
private Random m_random = new Random(DateTime.Now.Millisecond);
protected void Page_Load(object sender, EventArgs e)
{
this.m_start = DateTime.Now;
if (!IsPostBack)
{
this.Repeater1.DataSource = this.GetData();
this.Repeater1.DataBind();
this.Repeater2.DataSource = this.GetData();
this.Repeater2.DataBind();
}
}
private IEnumerable<int> GetData()
{
Thread.Sleep(1000);
for (int i = 0; i < 5; i++)
{
yield return this.m_random.Next(100);
}
}
protected void Button1_Click(object sender, EventArgs e)
{
this.Repeater1.DataSource = this.GetData();
this.Repeater1.DataBind();
}
protected void Button2_Click(object sender, EventArgs e)
{
this.Repeater2.DataSource = this.GetData();
this.Repeater2.DataBind();
}
}
我们打开网页,会发现页面第一次加载,使用了两秒多的事件,因为他调用了两次的GetData方法,我们设置了页面的UpdatePanel的UpdateMode为Conditional,所以,在我们每次点击按钮的时候,只会更新包含它的Update,这样我们点击按钮,就只会调用一次GetData方法,而且我们把UpdateMode设置为Always(默认),从每次发回给客户端的数据量来看,也会大了很多
几乎所有能够提高Web应用程序性能的做法都可以提高AJAX应用程序性能