用编程的方法控制UpdatePanel的更新
于UpdatePanel,我们也可以使用编程的方法来控制它的更新,可以通过ScriptManager的RegisterAsyncPostBackControl()方法注册一个异步提交的控件,并且调用UpdatePanel的Update()方法来让它更新。再次用我在前面的文章中用到的一个无聊的时间更新例子来看一下,有时候我觉得例子过于复杂更加不好说明白所要讲的内容,如下代码所示,注意Button1并不包含在UpdatePanel中:
1<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>2
3<scriptrunat="server">4
5voidButton1_Click(objectsender,EventArgse)
6
7{
8
9this.Label2.Text=DateTime.Now.ToString();
10
11}12
13</script>14
15<htmlxmlns="http://www.w3.org/1999/xhtml">16
17<headrunat="server">18
19<title>RefreshinganUpdatePanelProgrammatically</title>20
21</head>22
23<body>24
25<formid="form1"runat="server">26
27<asp:ScriptManagerID="ScriptManager1"runat="server"/>28
29<div>30
31<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">32
33<ContentTemplate>34
35<asp:LabelID="Label1"runat="server"Text="更新时间:"></asp:Label>36
37<asp:LabelID="Label2"runat="server"Text="Label"ForeColor="Red"></asp:Label><br/><br/>38
39
40
41</ContentTemplate>42
43</asp:UpdatePanel>44
45<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>46
47</div>48
49</form>50
51</body>52
53</html>
再次修改上面的例子,使用ScriptManager的RegisterAsyncPostBackControl()注册Button1为一个异步提交控件,并且调用UpdatePanel的Update()方法:
1<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>2
3<scriptrunat="server">4
5voidPage_Load(objectsender,EventArgse)
6
7{
8
9ScriptManager1.RegisterAsyncPostBackControl(Button1);
10
11}12
13
14
15voidButton1_Click(objectsender,EventArgse)
16
17{
18
19this.Label2.Text=DateTime.Now.ToString();
20
21this.UpdatePanel1.Update();
22
23}24
25</script>26
27<htmlxmlns="http://www.w3.org/1999/xhtml">28
29<headrunat="server">30
31<title>RefreshinganUpdatePanelProgrammatically</title>32
33</head>34
35<body>36
37<formid="form1"runat="server">38
39<asp:ScriptManagerID="ScriptManager1"runat="server"/>40
41<div>42
43<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">44
45<ContentTemplate>46
47<asp:LabelID="Label1"runat="server"Text="更新时间:"></asp:Label>48
49<asp:LabelID="Label2"runat="server"Text="Label"ForeColor="Red"></asp:Label><br/><br/>50
51
52
53</ContentTemplate>54
55</asp:UpdatePanel>56
57<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>58
59</div>60
61</form>62
63</body>64
65</html>
这时候可以看到,已经是异步提交了:
UpdatePanel的嵌套使用
UpdatePanel还可以嵌套使用,即在一个UpdatePanel的ContentTemplate中还可以放入另一个UpdatePanel。当最外面的UpdatePanel被触发更新时,它里面的子UpdatePanel也随着更新,里面的UpdatePanel触发更新时,只更新它自己,而不会更新外层的UpdatePanel。看下面的例子:
1<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2"%>2
3<scriptrunat="server">4
5</script>6
7
8
9<htmlxmlns="http://www.w3.org/1999/xhtml">10
11<headid="Head1"runat="server">12
13<title>UpdatePanelUpdateModeExample</title>14
15<styletype="text/css">16
17div.NestedPanel
18
19{}{}{}{20
21position:relative;22
23margin:2%5%2%5%;24
25}26
27</style>28
29</head>30
31<body>32
33<formid="form1"runat="server">34
35<div>36
37<asp:ScriptManagerID="ScriptManager"38
39runat="server"/>40
41<asp:UpdatePanelID="OuterPanel"42
43UpdateMode="Conditional"44
45runat="server">46
47<ContentTemplate>48
49<div>50
51<fieldset>52
53<legend>OuterPanel</legend>54
55<br/>56
57<asp:ButtonID="OPButton1"58
59Text="OuterPanelButton"60
61runat="server"/>62
63<br/>64
65Lastupdatedon
66
67<%=DateTime.Now.ToString()%>68
69<br/>70
71<br/>72
73<asp:UpdatePanelID="NestedPanel1"74
75UpdateMode="Conditional"76
77runat="server">78
79<ContentTemplate>80
81<divclass="NestedPanel">82
83<fieldset>84
85<legend>NestedPanel1</legend>86
87<br/>88
89Lastupdatedon
90
91<%=DateTime.Now.ToString()%>92
93<br/>94
95<asp:ButtonID="NPButton1"96
97Text="NestedPanel1Button"98
99runat="server"/>100
101</fieldset>102
103</div>104
105</ContentTemplate>106
107</asp:UpdatePanel>108
109</fieldset>110
111</div>112
113</ContentTemplate>114
115</asp:UpdatePanel>116
117</div>118
119</form>120
121</body>122
123</html>
同一页面上使用多个UpdatePanel
使用UpdatePanel的时候并没有限制在一个页面上用多少个UpdatePanel,所以我们可以为不同的需要局部更新的页面区域加上不同的UpdatePanel。由于UpdatePanel默认的UpdateMode是Always,如果页面上有一个局部更新被触发,则所有的UpdatePanel都将更新,这是我们不愿看到的,我们只需要UpdatePanel在它自己的触发器触发的时候更新就可以了,所以需要把UpdateMode设置为Conditional。
来看一下官方网站上提供的一个例子:包括两个UpdatePanel,其中一个用来用户输入而另一个则用来显示数据,每一个UpdatePanel的UpdateMode属性都设置为Conditional。当我们单击Cancel按钮时,只有用来用户输入的那个UpdatePanel刷新,当单击Insert按钮时,两个UpdatePanel都刷新。代码如下:
1<%@PageLanguage="C#"%>2
3<%@ImportNamespace="System.Collections.Generic"%>4
5
6
7<htmlxmlns="http://www.w3.org/1999/xhtml">8
9<headid="Head1"runat="server">10
11<title>EnterNewEmployees</title>12
13<scriptrunat="server">14
15privateList<Employee>EmployeeList;
16
17
18
19protectedvoidPage_Load()
20
21{
22
23if(!IsPostBack)
24
25{
26
27EmployeeList=newList<Employee>();
28
29EmployeeList.Add(newEmployee(1,"Jump","Dan"));
30
31EmployeeList.Add(newEmployee(2,"Kirwan","Yvette"));
32
33ViewState["EmployeeList"]=EmployeeList;
34
35}36
37else38
39EmployeeList=(List<Employee>)ViewState["EmployeeList"];
40
41
42
43EmployeesGridView.DataSource=EmployeeList;
44
45EmployeesGridView.DataBind();
46
47}48
49
50
51protectedvoidInsertButton_Click(objectsender,EventArgse)
52
53{
54
55if(String.IsNullOrEmpty(FirstNameTextBox.Text)||56
57String.IsNullOrEmpty(LastNameTextBox.Text)){return;}58
59
60
61intemployeeID=EmployeeList[EmployeeList.Count-1].EmployeeID+1;
62
63
64
65stringlastName=Server.HtmlEncode(FirstNameTextBox.Text);
66
67stringfirstName=Server.HtmlEncode(LastNameTextBox.Text);
68
69
70
71FirstNameTextBox.Text=String.Empty;
72
73LastNameTextBox.Text=String.Empty;
74
75
76
77EmployeeList.Add(newEmployee(employeeID,lastName,firstName));
78
79ViewState["EmployeeList"]=EmployeeList;
80
81
82
83EmployeesGridView.DataBind();
84
85EmployeesGridView.PageIndex=EmployeesGridView.PageCount;
86
87}88
89
90
91protectedvoidCancelButton_Click(objectsender,EventArgse)
92
93{
94
95FirstNameTextBox.Text=String.Empty;
96
97LastNameTextBox.Text=String.Empty;
98
99}100
101
102
103[Serializable]
104
105publicclassEmployee
106
107{
108
109privateint_employeeID;
110
111privatestring_lastName;
112
113privatestring_firstName;
114
115
116
117publicintEmployeeID
118
119{
120
121get{return_employeeID;}122
123}124
125
126
127publicstringLastName
128
129{
130
131get{return_lastName;}132
133}134
135
136
137publicstringFirstName
138
139{
140
141get{return_firstName;}142
143}144
145
146
147publicEmployee(intemployeeID,stringlastName,stringfirstName)
148
149{
150
151_employeeID=employeeID;
152
153_lastName=lastName;
154
155_firstName=firstName;
156
157}158
159}160
161
162
163</script>164
165</head>166
167<body>168
169<formid="form1"runat="server">170
171<div>172
173 </div>174
175<asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/>176
177<table>178
179<tr>180
181<tdstyle="height:206px"valign="top">182
183<asp:UpdatePanelID="InsertEmployeeUpdatePanel"runat="server"UpdateMode="Conditional">184
185<ContentTemplate>186
187<tablecellpadding="2"border="0"style="background-color:#7C6F57">188
189<tr>190
191<td><asp:LabelID="FirstNameLabel"runat="server"AssociatedControlID="FirstNameTextBox"192
193Text="FirstName"ForeColor="White"/></td>194
195<td><asp:TextBoxrunat="server"ID="FirstNameTextBox"/></td>196
197</tr>198
199<tr>200
201<td><asp:LabelID="LastNameLabel"runat="server"AssociatedControlID="LastNameTextBox"202
203Text="LastName"ForeColor="White"/></td>204
205<td><asp:TextBoxrunat="server"ID="LastNameTextBox"/></td>206
207</tr>208
209<tr>210
211<td></td>212
213<td>214
215<asp:LinkButtonID="InsertButton"runat="server"Text="Insert"OnClick="InsertButton_Click"ForeColor="White"/>216
217<asp:LinkButtonID="Cancelbutton"runat="server"Text="Cancel"OnClick="CancelButton_Click"ForeColor="White"/>218
219</td>220
221</tr>222
223</table>224
225<asp:Labelrunat="server"ID="InputTimeLabel"><%=DateTime.Now%></asp:Label>226
227</ContentTemplate>228
229</asp:UpdatePanel>230
231</td>232
233<tdstyle="height:206px"valign="top">234
235<asp:UpdatePanelID="EmployeesUpdatePanel"runat="server"UpdateMode="Conditional">236
237<ContentTemplate>238
239<asp:GridViewID="EmployeesGridView"runat="server"BackColor="LightGoldenrodYellow"BorderColor="Tan"240
241BorderWidth="1px"CellPadding="2"ForeColor="Black"GridLines="None"AutoGenerateColumns="False">242
243<FooterStyleBackColor="Tan"/>244
245<SelectedRowStyleBackColor="DarkSlateBlue"ForeColor="GhostWhite"/>246
247<PagerStyleBackColor="PaleGoldenrod"ForeColor="DarkSlateBlue"HorizontalAlign="Center"/>248
249<HeaderStyleBackColor="Tan"Font-Bold="True"/>250
251<AlternatingRowStyleBackColor="PaleGoldenrod"/>252
253<Columns>254
255<asp:BoundFieldDataField="EmployeeID"HeaderText="EmployeeID"/>256
257<asp:BoundFieldDataField="LastName"HeaderText="LastName"/>258
259<asp:BoundFieldDataField="FirstName"HeaderText="FirstName"/>260
261</Columns>262
263<PagerSettingsPageButtonCount="5"/>264
265</asp:GridView>266
267<asp:Labelrunat="server"ID="ListTimeLabel"><%=DateTime.Now%></asp:Label>268
269</ContentTemplate>270
271<Triggers>272
273<asp:AsyncPostBackTriggerControlID="InsertButton"EventName="Click"/>274
275</Triggers>276
277</asp:UpdatePanel>278
279</td>280
281</tr>282
283</table>284
285</form>286
287</body>288
289</html>
运行后效果如下:
转自:http://www.cnblogs.com/Terrylee/archive/2006/11/01/ASPNET_AJAX_UpdatePanle_Part2.html
示例代码下载:https://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo2.rar