ScriptManager和UpdatePanel控制項聯合使用可以實現頁面非同步局部更新的效果。其中的UpdatePanel就是設置頁面中異 步局部更新區域,它必須依賴於ScriptManager存在,因為ScriptManger控制項提供了客戶端腳本生成與管理UpdatePanel的功 能。幾個重要的
ScriptManager和UpdatePanel控制項聯合使用可以實現頁面非同步局部更新的效果。其中的UpdatePanel就是設置頁面中異 步局部更新區域,它必須依賴於ScriptManager存在,因為ScriptManger控制項提供了客戶端腳本生成與管理UpdatePanel的功 能。
幾個重要的屬性:
ScriptManager控制項的EnablePartialRendering屬性:true-實現頁面的非同步局部更新;false-實現全頁面的刷新。
UpdatePanel控制項的RenderMode屬性:InLine-UpdatePanel控制項被解析成HTML的<span>標記;Block-UpdatePanel控制項被解析成HTML控制項的<DIV>。
UpdatePanel控制項的UpdateMode屬性:Always-UpdatePanel頁面上任何一處發生的回發操作都會產生頁局部更新;Conditional-只在特定的情況下才產頁面的回發,如執行UpdatePanel控制項的update()方法或在指定的觸發器的操作下。
UpdatePanel控制項的ChildAsTrigger屬性:指示UpdatePanel內部控制項引起的回發是否產生當前UpdatePanel控制項的局部更新。如果UpdateMode設為Always的話,那ChildAsTrigger局性必須設為True,否則運行出錯。
一、UpdatePanel內部的控制項引起的回發,來更新當前UpdatePanel內部的控制項內容:
1.向頁面中加入ScriptManager、UpdatePanel控制項和一個Label控制項(Label2)。
2.在UpdatePanel中加入一個Button、一個Label(Label1)。
3.雙擊Button在事件處理程式中寫入下列代碼:Label1.Text = DateTime.Now.ToString();
4.在Page_Load事件中寫入下列代碼:Label2.Text = DateTime.Now.ToString();
5.運行頁面,發現每次點擊按鈕都會產生非同步局步刷新,只有Label1的內容發生更改,頁面上的Label2時間沒有發生更改。
代碼如下:
<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" OnClick="Button1_Click" Text="Button" />
</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();
}
註意:此時的ScriptManager的EnablePartialRendering屬性應設為true。UpdatePanel的UpdateMode屬性應設為Always。ChildAsTrigger屬性應設為true。
二、UpdatePanel控制項外部的控制項引起的回發,來非同步更新UpdatePanel內部的內容:
雖然上面的方式能夠很簡單地實現非同步局部更新的功能,但就性能方面考慮,我們應當只將數據確實會發生變化的控制項擺放在UpdatePanel中,這就可能會出現引起回發的控制項不在UpdatePanel內的情況。
有兩種方式實現這種效果:
a.在Page_Load方法中用ScriptManager1.RegisterAsyncPostBackControl()來註冊一下要實現非同步更新的控制項。
b.用觸發器來實現。
1、ScriptManager1.RegisterAsyncPostBackControl()註冊的控制項可以實現對所有的UpdatePanel控制項的非同步更新。
如:ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實現對Button2的註 冊,那此時Button2的回發就變成一個非同步回發(頁面不會刷新),它會導致頁面上所有的UpdatePanel的內容的更新。
註意:此時的ScriptManager的EnablePartialRendering屬性應設為true。UpdatePanel的UpdateMode屬性應設為Always。
2、ScriptManager1.RegisterAsyncPostBackControl()註冊的控制項可以實現針對特定UpdatePanel控制項的非同步更新。
a.把頁面上所有的UpdatePanel控制項的UpdateMode設為Conditional。
b.ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實現對Button2的註冊。
c.在Button2控制項的Click事件中後面加入後面的代碼:UpdatePanel1.Update();
這樣Button2按鈕只對UpdatePanel1控制項實現的非同步的局部刷新。
註意:這裡的UpdatePanel的屬性要設為Conditional,如果還是Always的話,會出現所有的UpdatePanel都刷新的效果。
3、觸發器
如果頁面上有多個UpdatePanel控制項,如果要實現外部的控制項的回發引髮指定UpdatePanel的更新的話,那應當為要實現刷新的UpdatePanel控制項建立一個觸發器。
a.選中要進行局部更新的UpdatePanel控制項。
b.在其屬性頁中點擊Triggers集合屬性右邊的小按鈕。
c.在彈出的對話框中,的成員列表中添加一個AsyncPostBackTriggers成員。
d.指定AsyncPostBackTriggers成員的ControlID和EventName,即引發非同步回送的控制項的ID和該控制項的事件。
完成以上步驟後,切換到HTML頁面就會出現下列代碼:
<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" OnClick="Button2_Click" Text="ButtonOut" />
這裡需要大家註意的是:
把所有的UpdatePanel控制項的UpdateMode設為"Conditional",這樣才能夠針對建有相關觸發器的UpdatePanel更新。
一個UpdatePanel上可以建有多個觸發器,實現在不同的情況下對該UpdatePanel控制項內容的更新。
三、兩個UpdatePanel控制項,其中一個UpdatePanel內的控制項引發兩個UpdatePanel控制項的同時刷新。
a.在頁面上放入兩個UpdatePanel和一個ScriptManager控制項。
b.在UpdatePanel1中加入一個標簽Label1、一個按鈕Button1 ,在UpdatePanel2中加入一個標簽Label2。
c.將UpdatePanel1和UpdatePanel2兩個控制項的的UpdateMode屬性設為"Always"
c.在Button1的Click事件中加入下麵的代碼:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
Label2.Text = DateTime.Now.ToString();
}
四、兩個UpdatePanel控制項,其中一個UpdatePanel內的控制項引發當前的UpdatePanel控制項的刷新,而另一個不刷新。
a.步驟和上面的(三)一樣
b.要把UpdatePanel1和UpdatePanel2兩個控制項的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" OnClick="Button1_Click1" Text="更新兩個UpdatePanel" />
</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>
五、兩個UpdatePanel控制項,其中一個UpdatePanel內的控制項引發另一個UpdatePanel控制項的刷新,而本身不刷新。
a.步驟和上面的(四)一樣
b.把UpdatePanel1和UpdatePanel2的ChildrenAsTriggers屬性設為false
c.在UpdatePanel2控制項中加入一個觸發器,觸發源設到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" OnClick="Button1_Click1" Text="更新兩個UpdatePanel" />
</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>
在開發過程中難免會用到UpdatePanel控制項的一些複雜的使用。如:UpdatePanel控制項的嵌套、在母版頁中使用UpdatePanel、在用戶控制項中使用UpdatePanel以及在GridView中使用UpdatePanel等。
其實這些操作也免不了對UpdatePanel控制項的UpdateMode屬性、ChildrenAsTrigger屬性以及觸發器的使用,下麵是系統地說明。
一、兩個嵌套的UpdatePanel控制項,外部的UpdatePanel內的控制項回發引發二者同時更新
在頁面上放一個ScriptManager和UpdatePanel控制項(UpdatePanel1),在UpdatePanel1中放入一個標簽控制項 (lblOut)、一個按鈕(Button1)和另一個UpdatePanel控制項(UpdatePanel2),在UpdatePanel2控制項中放一 個標簽控制項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" OnClick="Button1_Click2" Text="Button" />
<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();
}
要實現外部UpdatePanel內控制項的回發引起內部和外部兩個UpdatePanel控制項的同時刷新的話,需要把兩個UpdatePanel控制項的 UpdateMode都設為Conditional,這樣外部UpdatePanel內的控制項回發會自動引起內部UpdatePanel控制項的刷新。
註意:
外 部UpdatePanel控制項的ChildrenAsTrigger屬性要設為True,兩個UpdatePanel控制項的UpdateMode要都設為 Conditional,如果UpdateMode設為Always的話也會出現兩個UpdatePanel同時刷新的效果,但樣這會導致頁面上其它的 UpdatePanel控制項也發生刷新。
二、兩個嵌套的UpdatePanel控制項,內部的UpdatePanel內的控制項回發引發二者同時更新
在頁面上放一個ScriptManager和UpdatePanel控制項(UpdatePanel1),在UpdatePanel1中放入一個標簽控制項 (lblOut)和另一個UpdatePanel控制項(UpdatePanel2),在UpdatePanel2控制項中放一個標簽控制項lblIn和一個按 鈕(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" OnClick="Button1_Click2" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
在按鈕的Click事件中和(一)中的一樣。
註意:
把兩個UpdatePanel控制項的UpdateMode屬性設為Conditional,要把內部控制項ChildrenAsTrigger設為 True。但這樣內部UpdatePanel內的控制項只引發自身的刷新,不會引發外部的UpdatePanel控制項的刷新,不會刷新外部的 UpdatePanel控制項,因此我們還需要為外部UpdatePanel控制項加入一個觸發器,觸發源指定為Button1控制項的Click事件上。
三、兩個嵌套的UpdatePanel控制項,外部的UpdatePanel內的控制項回發只引發內部控制項的更新
在頁面上放一個ScriptManager和UpdatePanel控制項(UpdatePanel1),在UpdatePanel1中放入一個標簽控制項 (lblOut)、一個按鈕(Button1)和另一個UpdatePanel控制項(UpdatePanel2),在UpdatePanel2控制項中放一 個標簽控制項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" OnClick="Button1_Click2" Text="Button" /><br />
<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>
http://roucheng.cnblogs.com/
在按鈕的Click事件中和(一)中的一樣。
註意:
要把兩個UpdatePanel控制項的UpdateMode設為Conditional,把外部UpdatePanel控制項的 ChildrenAsTrigger設為false。這樣兩個UpdatePanel控制項都不會刷新,所以還要為內部的UpdatePanel控制項建立觸 發器,觸發源指向外部UpdatePanel中的的Button1的Click事件上。
四、母版頁中使用UpdatePanel控制項
如果將ScriptManager控制項添加在母版頁上的話,那麼各內容頁面就沒必要再添加ScriptManager控制項了,只需添加UpdatePanel控制項就可以了,因為母版頁和內容頁面將來生成的是一個頁面的實例,而在一個頁面上是不允許同時存在兩個ScriptManager控制項的。
如果ScriptManager控制項沒有添加在母版頁上的話,那隻能把ScriptManager控制項添加在其中一個內容頁面里。不要向每一個內容頁面中添加ScriptManager控制項。
1、內容頁面中的UpdatePanel內的控制項引起回發,只更新當前內容頁面的內容。
此時按鈕分別在各自的UpdatePanel控制項內。
將兩個內容頁面內的兩個UpdatePanel控制項的UpdateMode設為Conditional,ChildrenAsTrigger設為True。
在按鈕的Click事件中和(一)中的一樣。
這樣就出現各內容頁的UpdatePanel內的按鈕只對當前內容頁起作用。
2、在母版頁中的按鈕引起回發,更新指定內容頁的信息。
此時有兩個按鈕:ButtonOuter在母版頁中,ButtonInner在內容頁面1中。
當點擊ButtonOuter時,非同步更新兩個內容頁面的信息。當點擊ButtonInner時,非同步更新母版面中的UpdatePanel1中的信息。
母版頁HTML代碼如下:
<div>
母版頁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" OnClick="Button1_Click" Text="ButtonOuter" /><br />
#####################################################################
<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>
內容頁面的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" OnClick="Button1_Click" Text="ButtonInner" />
</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>
母版頁的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;
}
}
內容頁面的CS代碼如下:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = Master.TitleInfo;
Master.TitleInfo = "ContentPage1's Action";
((UpdatePanel)Master.FindControl("UpdatePanel1")).Update(); ;
}
五、用戶控制項中使用UpdatePanel控制項
如果父頁面中存在ScriptManager控制項,那用戶控制項的頁面中不應再放入ScriptManager控制項了,只在用戶控制項中加入UpdatePanel。
其控制項的回發與更新規律與使用方式與母版頁一樣。
轉自:http://hovertree.com/h/bjaf/al9rdfad.htm