ScriptManager和UpdatePanel控件聯(lián)合使用可以實(shí)現頁(yè)面異步局部更新的效果。其中的UpdatePanel就是設置頁(yè)面中異步局部更新區域，它必須依賴(lài)于ScriptManager存在，因為ScriptManger控件提供了客戶(hù)端腳本生成與管理UpdatePanel的功能。
幾個(gè)重要的屬性：
ScriptManager控件的EnablePartialRendering屬性：true-實(shí)現頁(yè)面的異步局部更新;false-實(shí)現全頁(yè)面的刷新。
UpdatePanel控件的RenderMode屬性：InLine-UpdatePanel控件被解析成HTML的<span>標記;Block-UpdatePanel控件被解析成HTML控件的<DIV>。
UpdatePanel控件的UpdateMode屬性：Always-UpdatePanel頁(yè)面上任何一處發(fā)生的回發(fā)操作都會(huì )產(chǎn)生頁(yè)局部更新;Conditional-只在特定的情況下才產(chǎn)頁(yè)面的回發(fā)，如執行UpdatePanel控件的update()方法或在指定的觸發(fā)器的操作下。
UpdatePanel控件的ChildAsTrigger屬性：指示UpdatePanel內部控件引起的回發(fā)是否產(chǎn)生當前UpdatePanel控件的局部更新。如果UpdateMode設為Always的話(huà)，那ChildAsTrigger局性必須設為T(mén)rue，否則運行出錯。
一、UpdatePanel內部的控件引起的回發(fā)，來(lái)更新當前UpdatePanel內部的控件內容：
1.向頁(yè)面中加入ScriptManager、UpdatePanel控件和一個(gè)Label控件(Label2)。
2.在UpdatePanel中加入一個(gè)Button、一個(gè)Label(Label1)。
3.雙擊Button在事件處理程序中寫(xiě)入下列代碼：Label1.Text = DateTime.Now.ToString();
4.在Page_Load事件中寫(xiě)入下列代碼：Label2.Text = DateTime.Now.ToString();
5.運行頁(yè)面，發(fā)現每次點(diǎn)擊按鈕都會(huì )產(chǎn)生異步局步刷新，只有Label1的內容發(fā)生更改，頁(yè)面上的Label2時(shí)間沒(méi)有發(fā)生更改。
代碼如下：
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" On
</ContentTemplate>
</asp:UpdatePanel>
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString(); ;
}
protected void Page_Load(object sender, EventArgs e)
{
Label2.Text = DateTime.Now.ToString();
}
注意：此時(shí)的ScriptManager的EnablePartialRendering屬性應設為true。UpdatePanel的UpdateMode屬性應設為Always。ChildAsTrigger屬性應設為true。
二、UpdatePanel控件外部的控件引起的回發(fā)，來(lái)異步更新UpdatePanel內部的內容：
雖然上面的方式能夠很簡(jiǎn)單地實(shí)現異步局部更新的功能，但就性能方面考慮，我們應當只將數據確實(shí)會(huì )發(fā)生變化的控件擺放在UpdatePanel中，這就可能會(huì )出現引起回發(fā)的控件不在UpdatePanel內的情況。
有兩種方式實(shí)現這種效果：
a.在Page_Load方法中用ScriptManager1.RegisterAsyncPostBackControl()來(lái)注冊一下要實(shí)現異步更新的控件。
b.用觸發(fā)器來(lái)實(shí)現。
1、ScriptManager1.RegisterAsyncPostBackControl()注冊的控件可以實(shí)現對所有的UpdatePanel控件的異步更新。
如：ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實(shí)現對Button2的注冊，那此時(shí)Button2的回發(fā)就變成一個(gè)異步回發(fā)（頁(yè)面不會(huì )刷新），它會(huì )導致頁(yè)面上所有的UpdatePanel的內容的更新。
注意：此時(shí)的ScriptManager的EnablePartialRendering屬性應設為true。UpdatePanel的UpdateMode屬性應設為Always。
2、ScriptManager1.RegisterAsyncPostBackControl()注冊的控件可以實(shí)現針對特定UpdatePanel控件的異步更新。
a.把頁(yè)面上所有的UpdatePanel控件的UpdateMode設為Conditional。
b.ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實(shí)現對Button2的注冊。
c.在Button2控件的Click事件中后面加入后面的代碼：UpdatePanel1.Update();
這樣Button2按鈕只對UpdatePanel1控件實(shí)現的異步的局部刷新。
注意：這里的UpdatePanel的屬性要設為Conditional，如果還是Always的話(huà)，會(huì )出現所有的UpdatePanel都刷新的效果。
3、觸發(fā)器
如果頁(yè)面上有多個(gè)UpdatePanel控件，如果要實(shí)現外部的控件的回發(fā)引發(fā)指定UpdatePanel的更新的話(huà)，那應當為要實(shí)現刷新的UpdatePanel控件建立一個(gè)觸發(fā)器。
a.選中要進(jìn)行局部更新的UpdatePanel控件。
b.在其屬性頁(yè)中點(diǎn)擊Triggers集合屬性右邊的小按鈕。
c.在彈出的對話(huà)框中，的成員列表中添加一個(gè)AsyncPostBackTriggers成員。
d.指定AsyncPostBackTriggers成員的ControlID和EventName，即引發(fā)異步回送的控件的ID和該控件的事件。
完成以上步驟后，切換到HTML頁(yè)面就會(huì )出現下列代碼:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" On
這里需要大家注意的是：
把所有的UpdatePanel控件的UpdateMode設為"Conditional"，這樣才能夠針對建有相關(guān)觸發(fā)器的UpdatePanel更新。
一個(gè)UpdatePanel上可以建有多個(gè)觸發(fā)器，實(shí)現在不同的情況下對該UpdatePanel控件內容的更新。
三、兩個(gè)UpdatePanel控件，其中一個(gè)UpdatePanel內的控件引發(fā)兩個(gè)UpdatePanel控件的同時(shí)刷新。
a.在頁(yè)面上放入兩個(gè)UpdatePanel和一個(gè)ScriptManager控件。
b.在UpdatePanel1中加入一個(gè)標簽Label1、一個(gè)按鈕Button1 ，在UpdatePanel2中加入一個(gè)標簽Label2。
c.將UpdatePanel1和UpdatePanel2兩個(gè)控件的的UpdateMode屬性設為"Always"
c.在Button1的Click事件中加入下面的代碼：
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
Label2.Text = DateTime.Now.ToString();
}
四、兩個(gè)UpdatePanel控件，其中一個(gè)UpdatePanel內的控件引發(fā)當前的UpdatePanel控件的刷新，而另一個(gè)不刷新。
a.步驟和上面的（三）一樣
b.要把UpdatePanel1和UpdatePanel2兩個(gè)控件的UpdateMode屬性設為Conditional
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" On
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
五、兩個(gè)UpdatePanel控件，其中一個(gè)UpdatePanel內的控件引發(fā)另一個(gè)UpdatePanel控件的刷新，而本身不刷新。
a.步驟和上面的（四）一樣
b.把UpdatePanel1和UpdatePanel2的ChildrenAsTriggers屬性設為false
c.在UpdatePanel2控件中加入一個(gè)觸發(fā)器，觸發(fā)源設到UpdatePanel1控件內的Button1的Click事件上。
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" On
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
在開(kāi)發(fā)過(guò)程中難免會(huì )用到UpdatePanel控件的一些復雜的使用。如：UpdatePanel控件的嵌套、在母版頁(yè)中使用UpdatePanel、在用戶(hù)控件中使用UpdatePanel以及在GridView中使用UpdatePanel等。
其實(shí)這些操作也免不了對UpdatePanel控件的UpdateMode屬性、ChildrenAsTrigger屬性以及觸發(fā)器的使用，下面是系統地說(shuō)明。
一、兩個(gè)嵌套的UpdatePanel控件，外部的UpdatePanel內的控件回發(fā)引發(fā)二者同時(shí)更新
在頁(yè)面上放一個(gè)ScriptManager和UpdatePanel控件（UpdatePanel1），在UpdatePanel1中放入一個(gè)標簽控件（lblOut）、一個(gè)按鈕（Button1）和另一個(gè)UpdatePanel控件（UpdatePanel2），在UpdatePanel2控件中放一個(gè)標簽控件lblIn。
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblOut" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" On
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblIn" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
在Button1控件中的Click事件中加入下面的代碼：
protected void Button1_Click2(object sender, EventArgs e)
{
lblIn.Text = DateTime.Now.ToString();
lblOut.Text = DateTime.Now.ToString();
}
要實(shí)現外部UpdatePanel內控件的回發(fā)引起內部和外部?jì)蓚€(gè)UpdatePanel控件的同時(shí)刷新的話(huà)，需要把兩個(gè)UpdatePanel控件的UpdateMode都設為Conditional，這樣外部UpdatePanel內的控件回發(fā)會(huì )自動(dòng)引起內部UpdatePanel控件的刷新。
注意：
外部UpdatePanel控件的ChildrenAsTrigger屬性要設為T(mén)rue，兩個(gè)UpdatePanel控件的UpdateMode要都設為Conditional，如果UpdateMode設為Always的話(huà)也會(huì )出現兩個(gè)UpdatePanel同時(shí)刷新的效果，但樣這會(huì )導致頁(yè)面上其它的UpdatePanel控件也發(fā)生刷新。
二、兩個(gè)嵌套的UpdatePanel控件，內部的UpdatePanel內的控件回發(fā)引發(fā)二者同時(shí)更新
在頁(yè)面上放一個(gè)ScriptManager和UpdatePanel控件（UpdatePanel1），在UpdatePanel1中放入一個(gè)標簽控件（lblOut）和另一個(gè)UpdatePanel控件（UpdatePanel2），在UpdatePanel2控件中放一個(gè)標簽控件lblIn和一個(gè)按鈕（Button1）。
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblOut" runat="server" Width="158px"></asp:Label>
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblIn" runat="server" Width="148px"></asp:Label>
<asp:Button ID="Button1" runat="server" On
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
在按鈕的Click事件中和（一）中的一樣。
注意：
把兩個(gè)UpdatePanel控件的UpdateMode屬性設為Conditional，要把內部控件ChildrenAsTrigger設為T(mén)rue。但這樣內部UpdatePanel內的控件只引發(fā)自身的刷新，不會(huì )引發(fā)外部的UpdatePanel控件的刷新，不會(huì )刷新外部的UpdatePanel控件，因此我們還需要為外部UpdatePanel控件加入一個(gè)觸發(fā)器，觸發(fā)源指定為Button1控件的Click事件上。
三、兩個(gè)嵌套的UpdatePanel控件，外部的UpdatePanel內的控件回發(fā)只引發(fā)內部控件的更新
在頁(yè)面上放一個(gè)ScriptManager和UpdatePanel控件（UpdatePanel1），在UpdatePanel1中放入一個(gè)標簽控件（lblOut）、一個(gè)按鈕（Button1）和另一個(gè)UpdatePanel控件（UpdatePanel2），在UpdatePanel2控件中放一個(gè)標簽控件lblIn。
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Label ID="lblOut" runat="server" Width="158px"></asp:Label>
<asp:Button ID="Button1" runat="server" On
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblIn" runat="server" Width="148px"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
在按鈕的Click事件中和（一）中的一樣。
注意：
要把兩個(gè)UpdatePanel控件的UpdateMode設為Conditional，把外部UpdatePanel控件的ChildrenAsTrigger設為false。這樣兩個(gè)UpdatePanel控件都不會(huì )刷新，所以還要為內部的UpdatePanel控件建立觸發(fā)器，觸發(fā)源指向外部UpdatePanel中的的Button1的Click事件上。
四、母版頁(yè)中使用UpdatePanel控件
如果將ScriptManager控件添加在母版頁(yè)上的話(huà)，那么各內容頁(yè)面就沒(méi)必要再添加ScriptManager控件了，只需添加UpdatePanel控件就可以了，因為母版頁(yè)和內容頁(yè)面將來(lái)生成的是一個(gè)頁(yè)面的實(shí)例，而在一個(gè)頁(yè)面上是不允許同時(shí)存在兩個(gè)ScriptManager控件的。
如果ScriptManager控件沒(méi)有添加在母版頁(yè)上的話(huà)，那只能把ScriptManager控件添加在其中一個(gè)內容頁(yè)面里。不要向每一個(gè)內容頁(yè)面中添加ScriptManager控件。
1、內容頁(yè)面中的UpdatePanel內的控件引起回發(fā)，只更新當前內容頁(yè)面的內容。
此時(shí)按鈕分別在各自的UpdatePanel控件內。
將兩個(gè)內容頁(yè)面內的兩個(gè)UpdatePanel控件的UpdateMode設為Conditional，ChildrenAsTrigger設為T(mén)rue。
在按鈕的Click事件中和（一）中的一樣。
這樣就出現各內容頁(yè)的UpdatePanel內的按鈕只對當前內容頁(yè)起作用。
2、在母版頁(yè)中的按鈕引起回發(fā)，更新指定內容頁(yè)的信息。
此時(shí)有兩個(gè)按鈕：ButtonOuter在母版頁(yè)中，ButtonInner在內容頁(yè)面1中。
當點(diǎn)擊ButtonOuter時(shí)，異步更新兩個(gè)內容頁(yè)面的信息。當點(diǎn)擊ButtonInner時(shí)，異步更新母版面中的UpdatePanel1中的信息。
母版頁(yè)HTML代碼如下：
<div>
母版頁(yè)3<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lbl" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:Button ID="Button1" runat="server" On
#####################################################################
<table width=90%>
<tr>
<td bgcolor=blue>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
<td bgcolor=maroon>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
<br />
</div>
內容頁(yè)面的HTML代碼如下：
<%@ Page Language="C#" MasterPageFile="~/MasterPage3.master" AutoEventWireup="true" CodeFile="Child3.aspx.cs" Inherits="Child3" Title="Untitled Page" %>
<%@ MasterType VirtualPath="~/MasterPage3.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" On
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder2">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
母版頁(yè)的CS代碼如下：
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(this.Button1);
}
protected void Button1_Click(object sender, EventArgs e)
{
Label lbl1 = (Label)this.ContentPlaceHolder1.FindControl("Label1");
lbl1.Text = DateTime.Now.ToString();
Label lbl2 = (Label)this.ContentPlaceHolder2.FindControl("Label2");
lbl2.Text = DateTime.Now.ToString();
}
public string TitleInfo
{
get
{
return lbl.Text;
}
set
{
lbl.Text = value;
}
}
內容頁(yè)面的CS代碼如下：
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = Master.TitleInfo;
Master.TitleInfo = "ContentPage1's Act
((UpdatePanel)Master.FindControl("UpdatePanel1")).Update(); ;
}
五、用戶(hù)控件中使用UpdatePanel控件
如果父頁(yè)面中存在ScriptManager控件，那用戶(hù)控件的頁(yè)面中不應再放入ScriptManager控件了，只在用戶(hù)控件中加入UpdatePanel。
其控件的回發(fā)與更新規律與使用方式與母版頁(yè)一樣。
聯(lián)系客服
