updatePanle总结
總是在覺得不是問題的問題上牽絆住,基礎才是王道啊。。。。。
一、UpdatePanel內部的控件引起的回發,來更新當前UpdatePanel內部的控件內容: 在ASPX中代碼如下:
<form id="form1" runat="server"><asp:Label ID="lbl_PageLoad" runat="server" Text="Label"></asp:Label>?<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager><div><asp:UpdatePanel ID="up1" runat="server" ChildrenAsTriggers="true"><ContentTemplate><asp:Label ID="lbl_Update" runat="server"></asp:Label><br /><asp:Button ID="btn1" runat="server" OnClick="btn_Click" Text="Test" /></ContentTemplate></asp:UpdatePanel></div></form>在cs中代碼如下:
protected void Page_Load(object sender, EventArgs e) { lbl_PageLoad.Text = DateTime.Now.ToString(); }protected void btn_Click(object sender, EventArgs e) { lbl_Update.Text = DateTime.Now.ToString(); }
運行顯示效果如下:
點擊Test按鈕,顯示效果如下: 再次點擊Test按鈕,顯示效果為:
可以看到,每次點擊Test按鈕時,第一行的時間都沒有改變。第二行的時間就變化為當前時間。因為第一行的時間是在Page_Load中設置的,而每次點擊Test按鈕時,就會局部刷新第二行的時間。即刷新UpdatePanel中的控件。頁面其余部分的控件并不刷新。
注意:此時的ScriptManager的EnablePartialRendering屬性應設為true。UpdatePanel的UpdateMode屬性應設為Always。ChildAsTrigger屬性應設為true。
二、UpdatePanel控件外部的控件來異步更新UpdatePanel內部的內容: 雖然上面的方式能夠達到我們更新局部控件的要求,但大多數時候,我們是將需要局部更新的控件放在UpdatePanel中,而將引發更新的控件放在UpdatePanel的外面。
在頁面中加入一個新的UpdatePanel,如下所示:
在CS的Page_Load中加入下列代碼:
protected void Page_Load(object sender, EventArgs e) { lbl_PostBack.Text = DateTime.Now.ToString(); sm1.RegisterAsyncPostBackControl(btnExternal); //實現對btnExternal的注冊,那此時btnExternal的回發就變成一個異步回發(頁面不會刷新),如果頁面上的UpdatePanel的UpdateMode="always",里面的內容的就會被刷新。若為Conditional,則不會刷新。 }在cs中添加button的click響應函數:
protected void btnExternal_Click(object sender, EventArgs e) { lbl_TestExternal.Text = DateTime.Now.ToString(); } 運行效果如下:
點擊Test External按鈕,運行效果如下: 再次點擊Test External按鈕,下面一行的時間不斷改變:
即每次點擊UpdatePanel外部的Button時,都會局部刷新UpdatePanel里的控件。 注意:此時的ScriptManager的EnablePartialRendering屬性應設為true。UpdatePanel的UpdateMode屬性應設為Always。
三、針對特定UpdatePanel控件進行異步更新把頁面上所有的UpdatePanel控件的UpdateMode設為Conditional,如下所示:
在后臺cs中加入如下代碼:
protected void Page_Load(object sender, EventArgs e) { lbl_PostBack.Text = DateTime.Now.ToString(); sm1.RegisterAsyncPostBackControl(btnExternal); }protected void btn_Click(object sender, EventArgs e) { lbl_Update.Text = DateTime.Now.ToString(); }
protected void btnExternal_Click(object sender, EventArgs e) { lbl_TestExternal.Text = DateTime.Now.ToString(); up1.Update(); }
運行效果如下:
不管如何點擊Test External按鈕,"Test External"文字都沒有變成當前時間。因為我們加入了up1.Update();表示僅僅刷新up1,不刷新lbl_TestExternal所在的upExternal。 如果修改cs代碼為:
顯示效果如下:
每次點擊Test External按鈕,最后那行的時間都會隨著改變。
注意:這里的UpdatePanel的屬性要設為Conditional,如果還是Always的話,會出現所有的UpdatePanel都刷新的效果。
四、用Trigger觸發器來局部更新UpdatePanel這里的效果和上面二、三局部更新UpdatePanel的效果一致,只是變換了一種實現方式而已。 上面的方法是這樣的: 在cs的Page_Load中用ScriptManager的RegisterAsyncPostBackControl來注冊一個控件(如btnExternal) 現在我們在ASPX中用Triggers來注冊這個控件。部分代碼如下:
這個效果和上面二、三效果一樣,這里就不重復列出效果圖片了。 注意:把所有的UpdatePanel控件的UpdateMode設為"Conditional",這樣才能夠針對建有相關觸發器的UpdatePanel更新。一個UpdatePanel上可以建有多個觸發器,實現在不同的情況下對該UpdatePanel控件內容的更新。
五、用不同的控件來觸發不同的UpdatePanel的局部更新這其實是對四的一個延伸。用一個按鈕來控制UpdatePanel1的更新,用另一個按鈕來控制UpdatePanel2的更新。廢話少說,完整代碼如下:
<asp:AsyncPostBackTrigger ControlID="btn_up1" EventName="Click" />
</Triggers> </asp:UpdatePanel> ? <asp:Button ID="btn_up1" runat="server" OnClick="btnUp1_Click" Text="Test External 1" /> <br /> <asp:UpdatePanel ID="upExternal" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lbl_TestExternal" runat="server" Text="Test External"></asp:Label> </ContentTemplate> <Triggers>
<asp:AsyncPostBackTrigger ControlID="btnExternal" EventName="Click" />
</Triggers> </asp:UpdatePanel> ? <asp:Button ID="btnExternal" runat="server" OnClick="btnExternal_Click" Text="Test External 2" /> </div> </form>
后臺完整代碼如下:
protected void Page_Load(object sender, EventArgs e) { lbl_PostBack.Text = DateTime.Now.ToString(); //sm1.RegisterAsyncPostBackControl(btnExternal); }protected void btnUp1_Click(object sender, EventArgs e) { lbl_Update.Text = DateTime.Now.ToString(); }
protected void btnExternal_Click(object sender, EventArgs e) { lbl_TestExternal.Text = DateTime.Now.ToString(); //upExternal.Update(); }
運行效果如下:
點擊Test External 1按鈕,顯示效果如下:
點擊Test External 2按鈕,顯示效果如下: 每次點擊這兩個按鈕,對應的時間都會發生改變:
即實現了不同控件控制不同的UpdatePanel的局部更新。可以看到最頂部那個時間值就一直不變,也就是局部更新不影響其他控件的值。
幾個重要的屬性: ScriptManager控件的EnablePartialRendering屬性:
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的同時順便更新控件外的內容,可以再后端注冊腳本,如果直接寫在click事件里面不起作用。。。。切記,切記
原因很簡單,本來UPDATEPANEL就是局部更新,你把控件放在外面當然不會更新了,此時
?ScriptManager.RegisterStartupScript(UpdatePanel2,?this.GetType(),?"alert",?function,?true); 就起作用了.轉載于:https://www.cnblogs.com/hudasm/archive/2012/08/24/2653616.html
總結
以上是生活随笔為你收集整理的updatePanle总结的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jQuery+css3实现新年贺卡
- 下一篇: 阿里旺旺在线客服代码 贸易通在线状态代码