ASP.NET AJAX中的嵌套UpdatePanel
我們在實(shí)際編程中,經(jīng)常遇到UpdatePanel嵌套的情況。例如,在一個(gè)網(wǎng)上購物系統中,可能需要一個(gè)產(chǎn)品種類(lèi)、子類(lèi)和產(chǎn)品列表的聯(lián)動(dòng)界面。本文探討一下UpdatePanel的嵌套問(wèn)題。
(1) 創(chuàng )建一個(gè)“ASP.NET Ajax-Enabled Web Site”站點(diǎn)。
(2) 如果Default.aspx中沒(méi)有ScriptManager,拖一個(gè)進(jìn)來(lái)。
(3) 在Default.aspx中拖入一個(gè)UpdatePanel,其ID為UpdatePanel1。
(4) 拖一個(gè)Button到UpdatePanel1中,其Text屬性設置為“外部刷新”。
(5) 進(jìn)入源模式,在<ContentTemplate>標簽中輸入“外部最后刷新:<%=DateTime.Now.ToString() %>”。
(6) 進(jìn)入設計模式,在UpdatePanel1中再拖入一個(gè)UpdatePanel,注意要放到UpdatePanel1內部,ID為UpdatePanel2,這第二個(gè)稱(chēng)為嵌套UpdatePanel。
(7) 在UpdatePanel2中拖入一個(gè)Button,Text為“內部刷新”。
(8) 進(jìn)入源模式,在UpdatePanel2的<ContentTemplate>中輸入“內部最后刷新:<%=DateTime.Now.ToString() %>”。
(9) 回到設計模式,將兩個(gè)UpdatePanel的UpdateMode屬性都設置成Conditional。
(10) 最后得到的代碼如下(我在做例子時(shí)把兩個(gè)Button的ID都改了,本例改不改都可以):
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
內部最后刷新:<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="btnInner" runat="server" Text="內部刷新" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnOuter" runat="server" Text="外部刷新" />
<br />
外部最后刷新:<%=DateTime.Now.ToString() %>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
(11) 之所以在頁(yè)面上使用“<%=DateTime.Now.ToString() %>”這樣的標記,是因為只要這部分內容刷新了,就會(huì )顯示當前時(shí)間。我們要看的就是這個(gè)區域有沒(méi)有刷新。
(12) 運行程序,可以看到點(diǎn)擊“內部刷新”按鈕時(shí),只有嵌套的UpdatePanel的時(shí)間改變;點(diǎn)擊“外部刷新”按鈕時(shí),兩個(gè)時(shí)間都會(huì )改變,說(shuō)明兩個(gè)都刷新了。
在一個(gè)界面上,可以使用的UpdatePanel的數量沒(méi)有限制,而且UpdatePanel還可以嵌套(上例)。這里很重要的一個(gè)屬性是UpdateMode屬性。
如果一個(gè)UpdatePanel的UpdateMode屬性設置為Always,則另外一個(gè)UpdatePanel中的某個(gè)服務(wù)器控件(如按鈕)觸發(fā)了刷新后,這個(gè)UpdatePanel也一起刷新。如果UpdatePanel的UpdateMode設置為Conditional,則只有本UpdatePanel中的服務(wù)器控件觸發(fā)刷新,或者嵌套在外部的UpdatePanel中的服務(wù)器控件觸發(fā)刷新后,此UpdatePanel才刷新。
那么產(chǎn)品種類(lèi)、子類(lèi)、產(chǎn)品列表三級聯(lián)動(dòng)的實(shí)例中,我們可以設置三層嵌套,然后將其UpdateMode屬性都設置為Conditional。那么我們選擇了一個(gè)產(chǎn)品種類(lèi)后,其種類(lèi)、子類(lèi)和產(chǎn)品都要刷新;選擇了某個(gè)子類(lèi)后,子類(lèi)和產(chǎn)品會(huì )刷新,而種類(lèi)不刷新。這樣就基本達到了要求。
可能有時(shí)我們的要求更苛刻一些??紤]到產(chǎn)品種類(lèi)的刷新是沒(méi)有意義的,我們希望點(diǎn)擊種類(lèi)時(shí),只有子類(lèi)和產(chǎn)品刷新,而種類(lèi)不刷新。
這時(shí)就用到了ChildrenAsTriggers屬性,該屬性表示UpdatePanel內部的控件是否出發(fā)回傳刷新操作,該屬性默認值為true。如果我們把上個(gè)例子中外層UpdatePanel的該屬性改成false,運行會(huì )看到點(diǎn)擊“外部刷新”按鈕時(shí),沒(méi)有觸發(fā)刷新操作(兩個(gè)時(shí)間都沒(méi)有改變);而點(diǎn)擊“內部刷新”按鈕時(shí),內部的時(shí)間改變了,外邊的沒(méi)有。
這似乎并不符合我們的要求,我們希望的是點(diǎn)擊外部按鈕后,內部的刷新,而外部的不刷新(就是產(chǎn)品種類(lèi)不刷新,子類(lèi)和產(chǎn)品刷新),我們可以用一行程序實(shí)現這個(gè)功能。
為“外部刷新”按鈕增加Click事件,輸入以下代碼:
protected void btnOuter_Click(object sender, EventArgs e)
{
UpdatePanel2.Update();
}
運行,可以看到不管點(diǎn)擊哪個(gè)按鈕,都只有內部的時(shí)間刷新了。
UpdatePanel不僅可以使用在普通aspx中,還可以用在母版頁(yè)中。因為母版頁(yè)和內容頁(yè)運行時(shí)要組合成一個(gè)頁(yè)面,而一個(gè)頁(yè)面中只能有一個(gè)ScriptManager,因此ScriptManager只能放到母版頁(yè)中,而母版頁(yè)和內容頁(yè)中都可以放多個(gè)UpdatePanel。
同時(shí),如果母版頁(yè)的ContentPlaceHolder占位控件放到了一個(gè)UpdatePanel中,則該UpdatePanel就和內容頁(yè)的UpdatePanel形成了嵌套關(guān)系。
聯(lián)系客服