UpdatePanel可以用來建立豐富的局部更新Web應用程式,它是ASP.NET 2.0 AJAX Extensions中很重要的一個控制項,其強大之處在於不用編寫任何用戶端指令碼,只要在一個頁面上添加幾個UpdatePanel控制項和一個ScriptManager控制項就可以自動實現局部更新。通過本文來學習一下UpdatePanel其他的一些使用方法(第二篇)。
一.用編程的方法控制UpdatePanel的更新
對於UpdatePanel,我們也可以使用編程的方法來控制它的更新,可以通過ScriptManager的RegisterAsyncPostBackControl()方法註冊一個非同步提交的控制項,並且調用UpdatePanel的Update()方法來讓它更新。再次用我在前面的文章中用到的一個無聊的時間更新例子來看一下,有時候我覺得例子過於複雜更加不好說明白所要講的內容,如下代碼所示,注意Button1並不包含在UpdatePanel中:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<script runat="server">
void Button1_Click(object sender, EventArgs e)
{
this.Label2.Text = DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Refreshing an UpdatePanel Programmatically</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="更新時間:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick = "Button1_Click"/>
</div>
</form>
</body>
</html>
這時候不用多說,肯定是整頁提交了,運行如下圖所示:
再次修改上面的例子,使用ScriptManager的RegisterAsyncPostBackControl()註冊Button1為一個非同步提交控制項,並且調用UpdatePanel的Update()方法:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button1);
}
void Button1_Click(object sender, EventArgs e)
{
this.Label2.Text = DateTime.Now.ToString();
this.UpdatePanel1.Update();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Refreshing an UpdatePanel Programmatically</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="更新時間:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick = "Button1_Click"/>
</div>
</form>
</body>
</html>
這時候可以看到,已經是非同步提交了: