UpdatePanel控件的简单属性学习
一、RenderMode屬性,值為Block(默認值)為Inline
?在頁面中輸入以下代碼:
<asp:ScriptManager?ID="ScriptManager1"?runat="server">
????????</asp:ScriptManager>
????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?RenderMode="Block">???
?????????????<ContentTemplate>
????????????????RenderMode=Block
?????????????</ContentTemplate>
????????</asp:UpdatePanel>
????????<hr?/>
????????<asp:UpdatePanel?ID="UpdatePanel2"?runat="server"?RenderMode="Inline">
????????????<ContentTemplate>
????????????????RenderMode=Inline
????????????</ContentTemplate>
????????</asp:UpdatePanel>?
運行后查看網頁源代碼,會發現以下HTML標記:
?
<div?id="UpdatePanel1">
????????????????RenderMode=Block
?</div>
????????<hr?/>
????????<span?id="UpdatePanel2">
????????????????RenderMode=Inline
????????</span>
?這就是這兩個值的區別,為Block時輸出的容器為<div>,而為Inline時則輸出<span>。
二、UpdateMode屬性,值為Always(默認值)或Conditional?作用分別為Always:只要頁面有異步回送則該UpdatePanel更新
?Conditional:只有該UpdatePanel控件中的控件產生的異步回送,才更新該UpdatePanel
?在頁面輸入以下代碼:
?
? <asp:ScriptManager?ID="ScriptManager1"?runat="server">
????????</asp:ScriptManager>
????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?RenderMode="Block"?UpdateMode="Always">???
?????????????<ContentTemplate>
????????????????<%=DateTime.Now?%>
?????????????????<asp:Button?ID="Button1"?runat="server"?Text="點擊該按鈕只有上面時間更新"?/>
?????????????</ContentTemplate>
????????</asp:UpdatePanel>
????????<hr?/>
????????<asp:UpdatePanel?ID="UpdatePanel2"?runat="server"?RenderMode="Block"?UpdateMode="Conditional">???
?????????????<ContentTemplate>
????????????????<%=DateTime.Now?%>
?????????????????<asp:Button?ID="Button2"?runat="server"?Text="點擊該按鈕全部時間都會更新"?/>
?????????????</ContentTemplate>
????????</asp:UpdatePanel>?
運行后就會發現按鈕文本所寫的效果。
三、ChildrenAsTriggers屬性,值為True(默認值)為False
?在頁面輸入以下代碼:
????????</asp:ScriptManager>
????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?RenderMode="Block"?UpdateMode="Always"?ChildrenAsTriggers="true">????
?????????????<ContentTemplate>
????????????????<%=DateTime.Now?%>
?????????????</ContentTemplate>
????????</asp:UpdatePanel>
????????<hr?/>
????????<asp:UpdatePanel?ID="UpdatePanel2"?runat="server"?RenderMode="Block"?UpdateMode="Conditional"?ChildrenAsTriggers="false">???
?????????????<ContentTemplate>
????????????????<%=DateTime.Now?%>
?????????????????<asp:Button?ID="Button2"?runat="server"?Text="點擊該按鈕只有上方的時間會更新"?/>
?????????????</ContentTemplate>
????????</asp:UpdatePanel>?
運行結果如按鈕文本所寫,他的作用是任何異步回送都不會引發該UpdatePanel更新(單獨指定的除外)。
?注意:如果ChildrenAsTriggers的值為False,則UpdateMode的值也應該為Conditional,否則會引發異常,這時他不知道是該更新還是不更新。?
四、Triggers屬性,這其實是UpdatePanel的一個子節點,作用是為UpdatePanel指定一個控件,由該控件引發UpdatePanel更新
?在頁面輸入以下代碼:
<asp:ScriptManager?ID="ScriptManager1"?runat="server">
????????</asp:ScriptManager>
????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?RenderMode="Block"??ChildrenAsTriggers="true"?UpdateMode="Conditional">????
?????????????<ContentTemplate>
????????????????<%=DateTime.Now?%>
?????????????</ContentTemplate>
?????????????<Triggers>
????????????????<asp:AsyncPostBackTrigger?ControlID="Button1"?/>
?????????????</Triggers>
????????</asp:UpdatePanel><hr?/>
??????? <asp:Button ID="Button1" runat="server" Text="該按鈕在UpdatePanel外,但為Triggers所指定,也會引發UpdatePanel更新" /> ?由于UpdatePanel1的UpdateMode屬性為Conditional,所以只有當里面的控件引發回送時也會更新,但是Triggers節點指定了一個外部的Button控件,由該控件一樣會引發UpdatePanel的更新。有意思的是被指定的Button按鈕會變成一個異步控件,也就是說如果你還雙擊該按鈕在CS文件中添加了一個Button_Click事件的話,會報出一個腳本錯誤!
?在<asp:AsyncPostBackTrigger ControlID="Button1" />中還有一個屬性“EventName”,該屬性指定了一個事件名稱,作用為只有當ControlID指定的控件的EventName指定的事件才會引發更新。
?在頁面輸入以下代碼:
? <asp:ScriptManager?ID="ScriptManager1"?runat="server">????????</asp:ScriptManager>
????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?RenderMode="Block"??ChildrenAsTriggers="false"?UpdateMode="Conditional">????
?????????????<ContentTemplate>
????????????????<%=DateTime.Now?%>
?????????????????<asp:Button?ID="Button1"?runat="server"?Text="不會刷新"?/>
?????????????????<asp:Button?ID="Button2"?runat="server"?Text="不會刷新"?/>
?????????????</ContentTemplate>
????????</asp:UpdatePanel>
?
?如第三個屬性所說:這里把UpdatePanel的ChildrerAsTriggers屬性設置為False,則任何控件引發的回送都不會引發該UpdatePanel更新。
?但是把代碼修改如下:
?
? <asp:ScriptManager?ID="ScriptManager1"?runat="server">
????????</asp:ScriptManager>
????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?RenderMode="Block"??ChildrenAsTriggers="false"?UpdateMode="Conditional">????
?????????????<ContentTemplate>
????????????????<%=DateTime.Now?%>
?????????????????<asp:Button?ID="Button1"?runat="server"?Text="因為是Triggers指定的控件,所以會引發更新"?/>
?????????????????<asp:Button?ID="Button2"?runat="server"?Text="不會刷新"?/>
?????????????</ContentTemplate>
?????????????<Triggers>
????????????????<asp:AsyncPostBackTrigger?ControlID="Button1"?/>
?????????????</Triggers>
????????</asp:UpdatePanel>?
其實就是為UpdatePanel添加了一個<Triggers>節點,指向Button1。則運行結果按鈕文本所示。
?事實上Triggers可以指定UpdatePanel外的控件,也可以指定一個在其他UpdatePanel內的控件,或者在GridView中的一個控件。
在母版頁中使用 UpdatePanel
要在母版頁中使用 UpdatePanel 控件,必須確定如何使用 ScriptManager 控件。如果在母版頁面中放置了一個 ScriptManater 控件,則 ScriptManager 控件可以在所有的內容面中起作用。(如果要在內容頁中聲明腳本或服務,可以在頁面中添加一個 ScriptManagerProxy,它具有和 ScriptManager 差不多一樣的屬性和方法。)如果在母版頁中沒有包含 ScriptManager 控件,就必須在包含 UpdatePanel 控件的每個內容頁是都要放置一個 ScriptManager 控件,設計的選擇依賴于在應用程序中將如何管理客戶端腳本。
如果在母版頁中包含了 ScriptManager 控件,而在某個內容頁中又不打算使用局部頁面輸出的功能時,必須用程序設置內容中的 ScriptManager 控件的 EnablePartialRendering 為 false? 。
?使用嵌套的 UpdatePanel 控件
UpdatePanel 控件可以嵌套使用,如果父面板被刷新,則所有嵌套的面板也都會被刷新。下列代碼展示了如何在一個 UpdatePanel 控件中定義另一個 UpdatePanel 控件。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
??? <title>UpdatePanelUpdateMode 示例</title>
??? <style type="text/css">
??? div.NestedPanel
??? {
????? position: relative;
????? margin: 2% 5% 2% 5%;
??? }
??? </style>
</head>
<body>
??? <form id="form1" runat="server">
??????? <div>
??????????? <asp:ScriptManager ID="ScriptManager"
?????????????????????????????? runat="server" />
??????????? <asp:UpdatePanel ID="OuterPanel"
???????????????????????????? UpdateMode="Conditional"
???????????????????????????? runat="server">
??????????????? <ContentTemplate>
??????????????????? <div>
??????????????????????? <fieldset>
??????????????????????????? <legend>外層 Panel </legend>
??????????????????????????? <br />
??????????????????????????? <asp:Button ID="OPButton1"
??????????????????????????????????????? Text="外層面板按鈕"
??????????????????????????????????????? runat="server" />
??????????????????????????? <br />
??????????????????????????? 最后更新在:
??????????????????????????? <%= DateTime.Now.ToString() %>
??????????????????????????? <br />
??????????????????????????? <br />
??????????????????????????? <asp:UpdatePanel ID="NestedPanel1"
?????????????????????????????????????????????? UpdateMode="Conditional"
?????????????????????????????????????????????? runat="server">
??????????????????????????????? <ContentTemplate>
??????????????????????????????????? <div class="NestedPanel">
??????????????????????????????????????? <fieldset>
??????????????????????????????????????????? <legend>嵌套面板</legend>
??????????????????????????????????????????? <br />
??????????????????????????????????????????? 最后更新在:
??????????????????????????????????????????? <%= DateTime.Now.ToString() %>
??????????????????????????????????????????? <br />
??????????????????????????????????????????? <asp:Button ID="NPButton1"
??????????????????????????????????????????????????????? Text="嵌套面板按鈕"
??????????????????????????????????????????????????????? runat="server" />
??????????????????????????????????????? </fieldset>
??????????????????????????????????? </div>
??????????????????????????????? </ContentTemplate>
??????????????????????????? </asp:UpdatePanel>
??????????????????????? </fieldset>
??????????????????? </div>
??????????????? </ContentTemplate>
??????????? </asp:UpdatePanel>
??????? </div>
??? </form>
</body>
</html>
?用程序創建 UpdatePanel 控件
要用程序添加一個 UpdatePanel 控件到頁面中,可以先創建一個新的 UpdatePanel 實例,然后使用它的 ContentTemplateContainer 屬性的 Add( Control ) 方法來添加其他控件。不能直接使用 ContentTemplate? 屬性來添加控件。如果 UpdatePanel 控件是程序添加的,只有來自同樣命名容器如 UpdatePanel 控件中控件的回發才可以被使用為面板的觸發器。
下列代碼演示了如何用程序添加 UpdatePanel 控件。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
??? protected void Page_Load(object sender, EventArgs e)
??? {
??????? UpdatePanel up1 = new UpdatePanel();
??????? up1.ID = "UpdatePanel1";
??????? up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
??????? Button button1 = new Button();
??????? button1.ID = "Button1";
??????? button1.Text = "Submit";
??????? button1.Click += new EventHandler(Button_Click);
??????? Label label1 = new Label();
??????? label1.ID = "Label1";
??????? label1.Text = "A full page postback occurred.";
??????? up1.ContentTemplateContainer.Controls.Add(button1);
??????? up1.ContentTemplateContainer.Controls.Add(label1);
??????? Page.Form.Controls.Add(up1);
??? }
??? protected void Button_Click(object sender, EventArgs e)
??? {
??????? ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
??????????? DateTime.Now.ToString();
??? }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
??? <title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
??? <form id="form1" runat="server">
??????? <div>
??????????? <asp:ScriptManager ID="TheScriptManager"
?????????????????????????????? runat="server" />
??????? </div>
??? </form>
</body>
</html>
?UpdatePanel 的關鍵屬性
ChildrenAsTriggers:指示來自 UpdatePanel 控件的直接子控件的回發是否更新面板的內容。設置為 true 時更新,否則不更新,默認為 true 。如果此屬性設置為 false ,UpdatePanel 控件的 UpdateMode 就必須設置為 Conditional ,否則會拋出 InvalidOperationException 異常。 UpdateMode:
指示什么時候需要更新面板。當一個UpdatePanel 控件沒有包含在另一個 UpatePanel 控件中時,面板的更新是根據 UpdateMode 、ChildrenAsTriggers 屬性的設置,以及觸發器的集合來進行的。當一個 UpdatePanel 控件在另一個 UpdatePanel 控件內部時,子面板會自動在父面板更新時更新。
UpdatePanel 控件的內容在下列情形下會更新:
- 如果 UpdateMode 屬性設置為 Alwarys 時,UpdatePanel 控件中的內容會在源自頁面上任何地方的每個回發時更新。這包括由包含在其他 UpdatePanel 控件中的控件的回發和沒有在 UpdatePanel 控件中的回發。
- 如果 UpdatePanel 控件嵌套在另一個 UpdatePanel 控件中時,父面板更新時它也會被更新。
- 如果 UpdateMode 屬性被設置為 Conditional 時,且出現下列條件之一時:
- 顯式調用 UpdatePanel 控件的 Update() 方法。
- 由 UpdatePanel 控件中的 Triggers 屬性定義的觸發器控件引起的回送。在這種情況下,控件會顯式的觸發面板內容的更新。定義為觸發器的控件可以在 UpdatePanel 控件的內部也可以在其外部。
- ChildrenAsTriggers 屬性設置為 true ,并且是由 UpdatePanel 控件中的子控件導致的回發。在嵌套的 UpdatePanel 控件中的子控件不會引起外層 UpdatePanel 控件的更新,除非顯示的定義為觸發器。
由以上內容可以看出,使用 UpdatePanel 控件可以方便的幫助大家開發出具有 AJAX 特性的 ASP.NET 應用程序來。當然,它也不是萬能的,過度的使用會引起一定的性能開銷,同時它還與現在的部分 ASP.NET 控件不兼容,如 TreeView、Menu,以及 WebParts 控件等。?
轉載于:https://www.cnblogs.com/panjun-Donet/archive/2009/02/12/1389408.html
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的UpdatePanel控件的简单属性学习的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Repeater、GridView等 操
- 下一篇: 解决Exchange的Client no