使用UpdatePanel控件实现页面的局部更新,需要包含一个ScriptManage控件,并且必须将ScriptManage控件的 EnablePartialRendering属性设置为true,不过你不用担心,该属性的默认值就是True,所以,在默认情况下,只要添加了 ScriptManage控件,该页面就自动具有了局部更新的能力。
下面,我们来看看页面中UpdatePanel的几种用法:
一、一般用法:下面的代码展示了一个包含了一个Button控件的UpdatePanel控件的一般用法,因为UpdatePanel控件的ChildAsTriggers属性默认值为ture,所以,当我们点击这个Button按钮时将引发一个异步回传。
2 < asp:ScriptManager ID ="ScriptManager"
3 runat ="server" />
4 < asp:UpdatePanel ID ="UpdatePanel1"
5 UpdateMode ="Conditional"
6 runat ="server" >
7 < ContentTemplate >
8 < fieldset >
9 < legend >UpdatePanel content </ legend >
10 <!-- Other content in the panel. -->
11 <% = DateTime.Now.ToString() %>
12 < br />
13 < asp:Button ID ="Button1"
14 Text ="Refresh Panel"
15 runat ="server" />
16 </ fieldset >
17 </ ContentTemplate >
18 </ asp:UpdatePanel >
19 </ div >
20
二、为UpdatePanel控件指定一个Trigger:默认情况下,UpdatePanel控件内部的任何控件引发的PostBack都是异步 PostBack,同时实现页面的局部更新,当然,你也可以去配置一个其他的控件去刷新一个UpdatePanel,这时,你需要设置 UpdatePanel的Trigger属性,一个Trigger将被绑定到指定的控件,当这个控件引发postback时,将异步刷新这个 UpdatePanel,当然,这个被Trigger指定的控件不必在该UpdatePanel内。请看如下代码:
2 < asp:Button ID ="Button1"
3 Text ="Refresh Panel"
4 runat ="server" />
5 < asp:ScriptManager ID ="ScriptManager1"
6 runat ="server" />
7 < asp:UpdatePanel ID ="UpdatePanel1"
8 UpdateMode ="Conditional"
9 runat ="server" >
10 < Triggers >
11 < asp:AsyncPostBackTrigger ControlID ="Button1" />
12 </ Triggers >
13 < ContentTemplate >
14 < fieldset >
15 < legend >UpdatePanel content </ legend >
16 <% = DateTime.Now.ToString() %>
17 </ fieldset >
18 </ ContentTemplate >
19 </ asp:UpdatePanel >
20
21 </ div >
22
在UpdatePanel的Trigger元素里,我们定义了一个<asp:AsyncPostBackTrigger> 元素,该元素的ControlID 属性指定了引发Trigger的控件ID,EventName属性指定了引发PostBack的事件名称,若未指定该属性,将使用该控件的默认事件(例如:在Button控件中,默认事件为Click事件)。另,以上设置都可以在VS2005属性设计器中可视化的设置。
三、Master Page中的UpdatePanel:在Master Page中使用UpdatePanel,你必须决定如何包含ScriptManage控件,有以下两种策略在页面上来包含ScriptManger控件,1.将ScriptManage控件放置在Masert Page中,这样,它将作用于所有内容页。如果你想在内容页去注册脚本货服务,你可以在内容页添加一个 ScriptManagerProxy 控件。2.将ScriptManage控件放置在每个包含UpdatePanel的内容页上。使用何种策略,取决于你将在你的应用程序中以何种方式管理你的脚本。
如果以策略一的方式包含了ScriptManage控件,但你在某个内容页面上又不想实现局部更新,那么,你就必须在该页面以编程的方式设置ScriptManage控件的 EnablePartialRendering 属性为false。下面代码展示了以策略一的方式使用UpdatePanel的情况:
Master Page:
2 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
4
5 < script runat ="server" >
6
7 public DateTime LastUpdate
8 {
9 get
10 {
11 return (DateTime)(ViewState[ " LastUpdate " ] ?? DateTime.Now);
12 }
13 set
14 {
15 ViewState[ " LastUpdate " ] = value;
16 }
17 }
18
19
20 protected void MasterButton2_Click(object sender, EventArgs e)
21 {
22 LastUpdate = DateTime.Now;
23 ((UpdatePanel)ContentPlaceHolder1.FindControl( " UpdatePanel1 " )).Update();
24
25 }
26
27 protected void Page_Load(object sender, EventArgs e)
28 {
29 ScriptManager1.RegisterAsyncPostBackControl(Button2);
30 }
31 </ script >
32
33 < html xmlns ="http://www.w3.org/1999/xhtml" >
34 < head id ="Head1" runat ="server" >
35 < title >ScriptManager in Master Page Example </ title >
36 </ head >
37 < body >
38 < form id ="form1" runat ="server" >
39 < div >
40 < asp:ScriptManager ID ="ScriptManager1" runat ="server" />
41 < asp:Panel ID ="MasterPanel1" runat ="server" GroupingText ="Master Page" >
42 < asp:Button ID ="Button1" runat ="server" Text ="Full Page Refresh" />
43 < asp:Button ID ="Button2" runat ="server" Text ="Refresh Panel" OnClick ="MasterButton2_Click" />
44 </ asp:Panel >
45 < asp:ContentPlaceHolder ID ="ContentPlaceHolder1" runat ="server" >
46 </ asp:ContentPlaceHolder >
47 </ div >
48 </ form >
49 </ body >
50 </ html >
51
2 Title = " ScriptManager in Content Page " %>
3
4 <% @ MasterType VirtualPath = " MasterCS.master " %>
5
6 < script runat ="server" >
7
8 protected void Button3_Click(object sender, EventArgs e)
9 {
10 Master.LastUpdate = DateTime.Now;
11 }
12
13 </ script >
14
15 < asp:Content ID ="Content1" ContentPlaceHolderID ="ContentPlaceHolder1"
16 runat ="Server" >
17 < asp:Panel ID ="Panel2"
18 GroupingText ="ContentPage"
19 runat ="server" >
20 < asp:UpdatePanel ID ="UpdatePanel1"
21 UpdateMode ="Conditional"
22 runat ="server" >
23 < ContentTemplate >
24 < p >
25 Last updated: < strong >
26 <% = Master.LastUpdate.ToString() %>
27 </ strong >
28 </ p >
29 < asp:Button ID ="Button3"
30 Text ="Refresh Panel"
31 OnClick ="Button3_Click"
32 runat ="server" />
33 </ ContentTemplate >
34 </ asp:UpdatePanel >
35 </ asp:Panel >
36 </ asp:Content >
四、UpdatePanel的嵌套:UpdatePanel能够嵌套使用,在这种情况下,若父Panel被刷新,那么,所有的子Panel也将被刷新。请看如下代码:
2 < asp:ScriptManager ID ="ScriptManager"
3 runat ="server" />
4 < asp:UpdatePanel ID ="OuterPanel"
5 UpdateMode ="Conditional"
6 runat ="server" >
7 < ContentTemplate >
8 < div >
9 < fieldset >
10 < legend >Outer Panel </ legend >
11 < br />
12 < asp:Button ID ="OPButton1"
13 Text ="Outer Panel Button"
14 runat ="server" />
15 < br />
16 Last updated on
17 <% = DateTime.Now.ToString() %>
18 < br />
19 < br />
20 < asp:UpdatePanel ID ="NestedPanel1"
21 UpdateMode ="Conditional"
22 runat ="server" >
23 < ContentTemplate >
24 < div class ="NestedPanel" >
25 < fieldset >
26 < legend >Nested Panel 1 </ legend >
27 < br />
28 Last updated on
29 <% = DateTime.Now.ToString() %>
30 < br />
31 < asp:Button ID ="NPButton1"
32 Text ="Nested Panel 1 Button"
33 runat ="server" />
34 </ fieldset >
35 </ div >
36 </ ContentTemplate >
37 </ asp:UpdatePanel >
38 </ fieldset >
39 </ div >
40 </ ContentTemplate >
41 </ asp:UpdatePanel >
42 </ div >
43
五:以编程方式刷新UpdatePanel:
2
3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
5
6 < script runat ="server" >
7
8 protected SortedList AnsweredQuestions
9 {
10 get { return (SortedList)(ViewState[ " AnsweredQuestions " ] ?? new SortedList()); }
11 set { ViewState[ " AnsweredQuestions " ] = value; }
12 }
13
14 protected void Page_Load()
15 {
16 ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
17 }
18
19 protected void ChoicesRadioButtonList_SelectedIndexChanged(object sender, EventArgs e)
20 {
21 SortedList answers = this .AnsweredQuestions;
22 RadioButtonList r = (RadioButtonList)sender;
23 answers[r.ToolTip] = r.SelectedValue;
24 this .AnsweredQuestions = answers;
25
26 ResultsList.DataSource = this .AnsweredQuestions;
27 ResultsList.DataBind();
28
29 if ( this .AnsweredQuestions.Count == SurveyDataList.Items.Count)
30 SubmitButton.Visible = true ;
31
32 UpdatePanel1.Update();
33 }
34
35 protected void SubmitButton_Click(object sender, EventArgs e)
36 {
37 // Submit responses.
38 }
39 </ script >
40
41 < html xmlns ="http://www.w3.org/1999/xhtml" >
42 < head id ="Head1" runat ="server" >
43 < title >Registering Controls as Async Postback Controls </ title >
44 < style type ="text/css" >
45 .AnswerFloatPanelStyle {
46 background-color : bisque ;
47 position : absolute ;
48 right : 10px ;
49 height : 130px ;
50 width : 150px ;
51 border-right : silver thin solid ; border-top : silver thin solid ;
52 border-left : silver thin solid ; border-bottom : silver thin solid ;
53 }
54 </ style >
55 </ head >
56 < body >
57 < form id ="form1" runat ="server" >
58 < div >
59 < asp:ScriptManager ID ="ScriptManager1" runat ="server" />
60 < div id ="AnswerFloatPanel" class ="AnswerFloatPanelStyle" runat ="server" >
61 < asp:UpdatePanel ID ="UpdatePanel1" UpdateMode ="Conditional" runat ="server" >
62 < ContentTemplate >
63 Completed Questions:
64 < asp:DataList ID ="ResultsList" runat ="server" >
65 < ItemTemplate >
66 < asp:Label ID ="ResultQuestion" runat ="server" Text ='<%# Eval("Key") % >' />
67 ::
68 < asp:Label ID ="ResultAnswer" runat ="server" Text ='<%# Eval("Value") % >' />
69 </ ItemTemplate >
70 </ asp:DataList >
71 < p style ="text-align: right" >
72 < asp:Button ID ="SubmitButton" Text ="Submit" runat ="server" Visible ="false"
73 OnClick ="SubmitButton_Click" />
74 </ p >
75 < asp:Label ID ="Message" runat ="Server" />
76 </ ContentTemplate >
77 </ asp:UpdatePanel >
78 </ div >
79
80 < asp:XmlDataSource ID ="SurveyDataSource"
81 runat ="server"
82 XPath ="/Questions/Question"
83 DataFile ="~/App_Data/SurveyQuestions.xml" />
84 < asp:DataList
85 ID ="SurveyDataList"
86 DataSourceID ="SurveyDataSource"
87 runat ="server" >
88
89 < ItemTemplate >
90 < table cellpadding ="2" cellspacing ="2" >
91 < tr >
92 < td valign ="top" >
93 < asp:Label id ="QuestionLabel" Text ='<%# XPath("@Title")% >' runat="server" />
94 </ td >
95 </ tr >
96 < tr >< td >
97 < asp:RadioButtonList ID ="ChoicesRadioButtonList" runat ="server"
98 DataSource ='<%#XPathSelect("Choices/Choice") % >'
99 DataTextField="InnerText" DataValueField="InnerText"
100 AutoPostBack="True"
101 ToolTip=' <% # " Question " + XPath( " @ID " ) %>'
102 OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
103 </ td ></ tr >
104 </ table >
105 < hr />
106 </ ItemTemplate >
107 </ asp:DataList >
108 </ div >
109 </ form >
110 </ body >
111 </ html >
112
六:以编程方式创建UpdatePanel:你能够以编程的方式创建一个UpdatePanel的实例,并且可以使用它的 ContentTemplateContainer 属性和Add(control)方法为该Panel添加内容,请看如下代码。
2
3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
5
6 < script runat ="server" >
7
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 UpdatePanel up1 = new UpdatePanel();
11 up1.ID = " UpdatePanel1 " ;
12 up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
13 Button button1 = new Button();
14 button1.ID = " Button1 " ;
15 button1.Text = " Submit " ;
16 button1.Click += new EventHandler(Button_Click);
17 Label label1 = new Label();
18 label1.ID = " Label1 " ;
19 label1.Text = " A full page postback occurred. " ;
20 up1.ContentTemplateContainer.Controls.Add(button1);
21 up1.ContentTemplateContainer.Controls.Add(label1);
22 Page.Form.Controls.Add(up1);
23
24 }
25 protected void Button_Click(object sender, EventArgs e)
26 {
27 ((Label)Page.FindControl( " Label1 " )).Text = " Panel refreshed at " +
28 DateTime.Now.ToString();
29 }
30
31 </ script >
32
33 < html xmlns ="http://www.w3.org/1999/xhtml" >
34 < head id ="Head1" runat ="server" >
35 < title >UpdatePanel Added Programmatically Example </ title >
36 </ head >
37 < body >
38 < form id ="form1" runat ="server" >
39 < div >
40 < asp:ScriptManager ID ="TheScriptManager"
41 runat ="server" />
42 </ div >
43 </ form >
44 </ body >
45 </ html >
46
由于UpdatePanel的ChildrenAsTriggers的默认属性为True,所以,在该示例中,Button控件将引发Panel的Trigger。
在上一章我们主要讨论了UpdatePanel控件的几种使用方法,在这一章里,我们将看看使用UpdatePanel控件有那些限制,对于使用UpdatePanel的限制,官方文档是这样给我们描述的:
1.TreeView和Menu控件与UpdatePanel控件不兼容。
2.Web Parts控件。
3.在以异步回传方式上传文件时,FileUpload控件与UpdatePanel控件不兼容。
4.当GridView和DetailsView控件的EnableSortingAndPagingCallbacks属性被设置成True时(默认值为False)与UpdatePanel控件不兼容。
5.Substitution控件。
6.Validation控件,包括(BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, ValidationSummary)。
7.当Login, PasswordRecovery, ChangePassword, and CreateUserWizard 控件没有转换到编辑模板时,他们与UpdatePanel不兼容。
以上这些控件仍然能够在页面中被使用,只是他们不应该被包含在UpdatePanel之内,当然,以上某些控件在某些条件下又与UpdatePanel兼容,所以,在某些情况下,你可以以一种特殊的方式在UpdatePanel控件内使用这些控件,以完成页面的局部更新。