UpdatePanel控件使用详解（二）
用编程的方法控制UpdatePanel的更新
于UpdatePanel，我们也可以使用编程的方法来控制它的更新，可以通过ScriptManager的RegisterAsyncPostBackControl()方法注册一个异步提交的控件，并且调用UpdatePanel的Update()方法来让它更新。再次用我在前面的文章中用到的一个无聊的时间更新例子来看一下，有时候我觉得例子过于复杂更加不好说明白所要讲的内容，如下代码所示，注意Button1并不包含在UpdatePanel中：
1
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>2
3
<script runat="server">4
5
void Button1_Click(object sender, EventArgs e)6
7
{8
9
this.Label2.Text = DateTime.Now.ToString();10
11
}12
13
</script>14
15
<html xmlns="http://www.w3.org/1999/xhtml">16
17
<head runat="server">18
19
<title>Refreshing an UpdatePanel Programmatically</title>20
21
</head>22
23
<body>24
25
<form id="form1" runat="server">26
27
<asp:ScriptManager ID="ScriptManager1" runat="server"/>28
29
<div>30
31
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">32
33
<ContentTemplate>34
35
<asp:Label ID="Label1" runat="server" Text="更新时间："></asp:Label>36
37
<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>38
39
40
41
</ContentTemplate>42
43
</asp:UpdatePanel>44
45
<asp:Button ID="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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>2
3
<script runat="server">4
5
void Page_Load(object sender, EventArgs e)6
7
{8
9
ScriptManager1.RegisterAsyncPostBackControl(Button1);10
11
}12
13
14
15
void Button1_Click(object sender, EventArgs e)16
17
{18
19
this.Label2.Text = DateTime.Now.ToString();20
21
this.UpdatePanel1.Update();22
23
}24
25
</script>26
27
<html xmlns="http://www.w3.org/1999/xhtml">28
29
<head runat="server">30
31
<title>Refreshing an UpdatePanel Programmatically</title>32
33
</head>34
35
<body>36
37
<form id="form1" runat="server">38
39
<asp:ScriptManager ID="ScriptManager1" runat="server"/>40
41
<div>42
43
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">44
45
<ContentTemplate>46
47
<asp:Label ID="Label1" runat="server" Text="更新时间："></asp:Label>48
49
<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>50
51
52
53
</ContentTemplate>54
55
</asp:UpdatePanel>56
57
<asp:Button ID="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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>2
3
<script runat="server">4
5
</script>6
7
8
9
<html xmlns="http://www.w3.org/1999/xhtml">10
11
<head id="Head1" runat="server">12
13
<title>UpdatePanelUpdateMode Example</title>14
15
<style type="text/css">16
17
div.NestedPanel18
19
{}{}{}{20
21
position: relative;22
23
margin: 2% 5% 2% 5%;24
25
}26
27
</style>28
29
</head>30
31
<body>32
33
<form id="form1" runat="server">34
35
<div>36
37
<asp:ScriptManager ID="ScriptManager" 38
39
runat="server" />40
41
<asp:UpdatePanel ID="OuterPanel" 42
43
UpdateMode="Conditional" 44
45
runat="server">46
47
<ContentTemplate>48
49
<div>50
51
<fieldset>52
53
<legend>Outer Panel </legend>54
55
<br />56
57
<asp:Button ID="OPButton1" 58
59
Text="Outer Panel Button" 60
61
runat="server" />62
63
<br />64
65
Last updated on66
67
<%= DateTime.Now.ToString() %>68
69
<br />70
71
<br />72
73
<asp:UpdatePanel ID="NestedPanel1" 74
75
UpdateMode="Conditional"76
77
runat="server">78
79
<ContentTemplate>80
81
<div class="NestedPanel">82
83
<fieldset>84
85
<legend>Nested Panel 1</legend>86
87
<br />88
89
Last updated on90
91
<%= DateTime.Now.ToString() %>92
93
<br />94
95
<asp:Button ID="NPButton1"96
97
Text="Nested Panel 1 Button" 98
99
runat="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
<%@ Page Language="C#" %>2
3
<%@ Import Namespace="System.Collections.Generic" %>4
5
6
7
<html xmlns="http://www.w3.org/1999/xhtml" >8
9
<head id="Head1" runat="server">10
11
<title>Enter New Employees</title>12
13
<script runat="server">14
15
private List<Employee> EmployeeList;16
17
18
19
protected void Page_Load()20
21
{22
23
if (!IsPostBack)24
25
{26
27
EmployeeList = new List<Employee>();28
29
EmployeeList.Add(new Employee(1, "Jump", "Dan"));30
31
EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));32
33
ViewState["EmployeeList"] = EmployeeList;34
35
}36
37
else38
39
EmployeeList = (List<Employee>)ViewState["EmployeeList"];40
41
42
43
EmployeesGridView.DataSource = EmployeeList;44
45
EmployeesGridView.DataBind();46
47
}48
49
50
51
protected void InsertButton_Click(object sender, EventArgs e)52
53
{54
55
if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||56
57
String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }58
59
60
61
int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;62
63
64
65
string lastName = Server.HtmlEncode(FirstNameTextBox.Text);66
67
string firstName = Server.HtmlEncode(LastNameTextBox.Text);68
69
70
71
FirstNameTextBox.Text = String.Empty;72
73
LastNameTextBox.Text = String.Empty;74
75
76
77
EmployeeList.Add(new Employee(employeeID, lastName, firstName));78
79
ViewState["EmployeeList"] = EmployeeList;80
81
82
83
EmployeesGridView.DataBind();84
85
EmployeesGridView.PageIndex = EmployeesGridView.PageCount;86
87
}88
89
90
91
protected void CancelButton_Click(object sender, EventArgs e)92
93
{94
95
FirstNameTextBox.Text = String.Empty;96
97
LastNameTextBox.Text = String.Empty;98
99
}100
101
102
103
[Serializable]104
105
public class Employee106
107
{108
109
private int _employeeID;110
111
private string _lastName;112
113
private string _firstName;114
115
116
117
public int EmployeeID118
119
{120
121
get { return _employeeID; }122
123
}124
125
126
127
public string LastName128
129
{130
131
get { return _lastName; }132
133
}134
135
136
137
public string FirstName138
139
{140
141
get { return _firstName; }142
143
}144
145
146
147
public Employee(int employeeID, string lastName, string firstName)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
<form id="form1" runat="server">170
171
<div>172
173
</div>174
175
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />176
177
<table>178
179
<tr>180
181
<td style="height: 206px" valign="top">182
183
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" runat="server" UpdateMode="Conditional">184
185
<ContentTemplate>186
187
<table cellpadding="2" border="0" style="background-color:#7C6F57">188
189
<tr>190
191
<td><asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstNameTextBox" 192
193
Text="First Name" ForeColor="White" /></td>194
195
<td><asp:TextBox runat="server" ID="FirstNameTextBox" /></td>196
197
</tr>198
199
<tr>200
201
<td><asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastNameTextBox" 202
203
Text="Last Name" ForeColor="White" /></td>204
205
<td><asp:TextBox runat="server" ID="LastNameTextBox" /></td>206
207
</tr>208
209
<tr>210
211
<td></td>212
213
<td>214
215
<asp:LinkButton ID="InsertButton" runat="server" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />216
217
<asp:LinkButton ID="Cancelbutton" runat="server" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />218
219
</td>220
221
</tr>222
223
</table>224
225
<asp:Label runat="server" ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>226
227
</ContentTemplate>228
229
</asp:UpdatePanel>230
231
</td>232
233
<td style="height: 206px" valign="top">234
235
<asp:UpdatePanel ID="EmployeesUpdatePanel" runat="server" UpdateMode="Conditional">236
237
<ContentTemplate>238
239
<asp:GridView ID="EmployeesGridView" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"240
241
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">242
243
<FooterStyle BackColor="Tan" />244
245
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />246
247
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />248
249
<HeaderStyle BackColor="Tan" Font-Bold="True" />250
251
<AlternatingRowStyle BackColor="PaleGoldenrod" />252
253
<Columns>254
255
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />256
257
<asp:BoundField DataField="LastName" HeaderText="Last Name" />258
259
<asp:BoundField DataField="FirstName" HeaderText="First Name" />260
261
</Columns>262
263
<PagerSettings PageButtonCount="5" />264
265
</asp:GridView>266
267
<asp:Label runat="server" ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>268
269
</ContentTemplate>270
271
<Triggers>272
273
<asp:AsyncPostBackTrigger ControlID="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
浙公网安备 33010602011771号