asp.net ajax

Asp.Net Ajax - UpdatePanel模式

现在考虑一个最简单的范例，页面上放置一个Label控件、一个Button控件，当我们点击Button控件的时候，将Label控件的文本更新为当前时间，这里的关键是更新时间的代码位于服务端，而非使用Javascript在客户端来完成。尽管这里服务端的代码仅仅是更新一下时间，但在实际中却可以执行任何的服务端操作。

UpdatePanel是是大家熟悉的一种方式了，即是在页面拖放一个UpdatePanel，将需要用Ajax方式进行更新的控件放在UpdatePanel之内，在本例中是Label控件。可以将Button控件也放置在UpdatePanel之内，也可以不放置。如果UpdatePanel内不放置Button控件，则需要设置UpdatePanel的Triggers节点，其中包括一个ControlID属性和EventName属性，用于指定哪个控件的哪个事件可以触发了一个PostBack。本例中ControlID自然是Button的ID，而EventName则为Click。也就是说当Button的Click事件触发时，进行PostBack操作。下面是aspx页面的主要代码：

<asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>

 当前时间：
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>
         <asp:Label ID="Label1" runat="server" Text="[未设置]"></asp:Label>
     </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
     </Triggers>
 </asp:UpdatePanel>
 <br />
 <asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="更新时间" />

而在后置代码中，我们只需要像平常的Asp.Net开发一样，编写Button控件的Click事件处理程序就可以了：

protected void Button1_Click(object sender, EventArgs e) {
     Label1.Text = DateTime.Now.ToLongTimeString();
 }

OK，现在一切都已经就绪了，如果你运行这个页面，并且点击Button，会看到Label的值变为了最新的时间，而且没有因为PostBack所产生的页面闪动，即是人们常说的无刷新更新页面。这可能是实现一个Asp.Net Ajax的最简单范例了。但是它的问题是什么呢？当我们点击Button的时候，在服务端执行了一个完整的Asp.Net 页面生命周期，和你不使用UpdatePanel更新页面没有任何的区别。可以做一个测试，在页面在拖放一个Label，ID为Label2，然后在Page_Load中写入下面代码：

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        Label2.Text = DateTime.Now.ToLongTimeString();
    } else {
        Label2.Text = DateTime.Now.ToLongTimeString();
    }
}

然后在Page_Load一行设置断点，接下来运行调试，会发现每次你点击Button按钮的时候，都会运行else{...}中的语句，说明每次页面都会执行Page_Load方法。这说明使用这种方式时，服务器端的开销是比较大的。这里还可以发现一个有趣的现象，尽管服务器执行了为Label2.Text赋值的语句，但是页面上Label2却并没有更新。如果想要更新它，那么需要将它也放置到UpdatePanel中，这里我们可以在页面上重新拖放一个UpdatePanel，然后把Label2放置进去。然后我们再点击Button，会发现Label1和Label2都进行了更新。这里又引出了一个有趣的问题：回想一下前面，我们只为第一个UpdatePanel设置了Triggers节点，而并没有为后来新添的UpdatePanel设置Triggers节点，但是对一个UpdatePanel的更新也会影响到另一个。有的时候这种情况是我们所需要的，但更多时候不是，我们可能希望对于Label2的更新由其他控件的其他事件触发。此时，可以将第二个UpdatePanel的UpdateMode属性设为“Conditional”，就避免了受到其他UpdatePanel提交的影响，这个值默认为“Always”。

下面是此时Aspx页面的代码：

<!-- 上面相同 -->
<hr /><br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
     <asp:Label ID="Label2" runat="server" Text="[未设置]"></asp:Label>
 </ContentTemplate>
</asp:UpdatePanel>

以上这些就是一种最常见的Asp.Net Ajax开发模式了，我们看到它如何实现，也看到了它的缺陷：每次客户端的操作，都会在服务端执行一次完整的页面生命周期，加重了服务器的负担，同时客户端和服务端的通信过程中也会传递完整的http协议内容，增大了网络流量。我们也应该看到它的优点：实现起来非常的简单，操作上基本等同于通常的Asp.Net开发，所使用的控件也为Asp.Net服务器控件（Server Control，这里相对于HTML控件而言）。