1.2 背景
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:Button ID="Button1"
Text="RefreshPanel"
runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
UpdatePanel 控件可以輸出爲 <div> 元素或 <span> 元素,以在頁面中形成一個塊或內聯的區域,可以設置其 RenderMode 屬性爲 Block ( 默認,<div>)或 Inline ( <span> ) 來指定。
包含一個或多個 UpdatePanel 控件的頁面在第一次輸出時,所有 UpdatePanel 控件中的內容都會被輸出並被髮送到瀏覽器。在後來的異步更新中,單個 UpdatePanel 控件中的內容可能會被更新。更新依賴於面板的設置、導致回發的元素以及指定給每個面板的代碼。
2.2 指定 UpdatePanel 的觸發器
下列示例展示瞭如何添加一個觸發器到 UpdatePanel 面板中去。
Text="Refresh Panel"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel 內容</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
有上例中,雖然按鈕沒有聲明在面板中,但是由於在面板中指定了它爲觸發器,所以當按鈕事件觸發時,會產生其被包含中面板中同樣的結果,即面板被更新。
觸發器控件的事件是可選的,如果沒有指定事件,觸發器將使用控件的默認事件。例如,對於 Button 控件,默認事件就是 Click 事件。
如果在母版頁中沒有包含 ScriptManager 控件,就必須在包含 UpdatePanel 控件的每個內容頁是都要放置一個 ScriptManager 控件,設計的選擇依賴於在應用程序中將如何管理客戶端腳本。
如果在母版頁中包含了 ScriptManager 控件,而在某個內容頁中又不打算使用局部頁面輸出的功能時,必須用程序設置內容中的 ScriptManager 控件的 EnablePartialRendering 爲 false 。
下列代碼展示瞭如何在一個 UpdatePanel 控件中定義另一個 UpdatePanel 控件。
<!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 控件。
<!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>
3 UpdatePanel 的關鍵屬性
UpdatePanel 控件的內容在下列情形下會更新:
- 如果 UpdateMode 屬性設置爲 Alwarys 時,UpdatePanel 控件中的內容會在源自頁面上任何地方的每個回發時更新。這包括由包含在其他 UpdatePanel 控件中的控件的回發和沒有在 UpdatePanel 控件中的回發。
- 如果 UpdatePanel 控件嵌套在另一個 UpdatePanel 控件中時,父面板更新時它也會被更新。
- 如果 UpdateMode 屬性被設置爲 Conditional 時,且出現下列條件之一時:
- 顯式調用 UpdatePanel 控件的 Update() 方法。
- 由 UpdatePanel 控件中的 Triggers 屬性定義的觸發器控件引起的回送。在這種情況下,控件會顯式的觸發面板內容的更新。定義爲觸發器的控件可以在 UpdatePanel 控件的內部也可以在其外部。
- ChildrenAsTriggers 屬性設置爲 true ,並且是由 UpdatePanel 控件中的子控件導致的回發。在嵌套的 UpdatePanel 控件中的子控件不會引起外層 UpdatePanel 控件的更新,除非顯示的定義爲觸發器。