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