ASP.NET AJAX UpdatePanel 控件实现剖析

使用ASP.NET AJAX框架我们可以搭建快速响应、具有丰富的用户体验的AJAX Web应用程序，而该框架的UpdatePanel控件则提供了一种非常简单的方式来实现Web页面的局部更新，我们不需要在每次回发的时候都加载整个页面。

那这个控件是如何实现这种局部刷新的哪，透过其实现机制我们可以更清楚其优缺点，便于我们确定其使用场合。本文将重点阐述ASP.NET AJAX控件UpdatePanel的实现机制。

1． ASP.NET AJAX 简介 ASP.NET AJAX是微软在ASP.NET 2.0之上对AJAX技术的一个封装，为Web应用程序提供完整的AJAX解决方案。ASP.NET AJAX有两种编程模型：部分更新和远程服务。

部分更新使得用户可以用传统的ASP.NET 2.0应用程序的方式来搭建AJAX应用，具体就是使用UpdatePanel控件来实现无闪烁页面更新。而远程服务则是直接通过前端JavaScript来调用的服务器端服务，前段获取数据后，进行页面更新，这就要求服务器端代码必须分解为特定于应用程序的服务，这是与传统的ASP.NET应用程序完全不同的体系结构。

部分更新着重于对现有应用程序进行渐进式增强，帮助用户逐渐转换到纯粹的AJAX应用。本文主要对部分更新编程模型中核心控件UpdatePanel的实现进行剖析，讲述其背后的故事。

ASP.NET AJAX框架分为客户端以及服务器端两个部分，基于客户端的 Microsoft AJAX Library包含了对浏览器兼容性、网络访问以及客户端控件组件等支持， 而服务器端则包括了服务器控件，Web 服务等等。

见下图：

Microsoft Ajax Library就是ASP.NET AJAX的客户端脚本库，其中MicrosoftAjax.js包含了ASP.NET AJAX的核心内容，包括跨浏览器的支持、基于面向对象对JavaScript的扩展以及网络访问等等。MicrosoftAjaxWebForm.js文件则是完全服务于ASP.NET AJAX页面局部更新这样一个功能的，在该文件中定义了一个客户端对象PageRequestManager，该对象将会负责客户端异步回送的全过程。

2． ScriptManager 和 UpdatePanel ScriptManager和UpdatePanel是ASP.NET AJAX服务器端中最重要的两个控件，ScriptManager控件用来管理ASP.NET页面中的客户端脚本，生成及注册所需要的客户端脚本，通过UpdatePanel控件可以更新页面的指定部分而无需加载整个页面。

看个例子：

01	<form id="form1" runat="server">

02	<asp:ScriptManager ID="ScriptManager1" runat="server">

03	</asp:ScriptManager>

04

<div>

05	<asp:UpdatePanel ID="UpdatePanel1" runat="server">

06	<ContentTemplate>

07	<%= DateTime.Now %>

08

<br />

09	<asp:Button ID="Button1" runat="server" Text="Button" />

10	</ContentTemplate>

11	</asp:UpdatePanel>

12

</div>

13

</form>

构建如上代码所示的页面，在Runtime点击UpdatePanel中的Button控件，则不会引起整个页面刷新，只是用来显示当前时间的Label得到更新。

这是如何实现的哪？

3． ASP.NET AJAX部分呈现剖析

3.1 先从客户端讲起

看一下上面的示例代码在客户端的HTML代码， 这里只列出核心部分，其他全部隐去。

01	<script type="text/javascript">

02	//<![CDATA[

03	Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));

04	Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], [], [], 90);

05

//]]>

06

</script>

07

08	<div id="UpdatePanel1">

09	7/25/2008 4:54:36 PM

10

<br />

11	<input type="submit" name="Button1" value="Button" id="Button1" />

12

</div>

看一下上面的两句JavaScript代码，第一句代码中的_initialize 方法是客户端PageRequestManager对象上的静态方法，它会创建一个 PageRequestManager 类的全局实例，并将其初始化。在这个初始化函数中，ageRequestManager对象注册了当前表单对象的submit事件，以及window对象的load和unload事件。

而第二句代码则是通过PageRequestManager的getInstance方法来检索其唯一实例， 得到该实例后调用_updateControls方法来注册UpdatePanel以及其Trigger控件。

我们可以从MicrosoftAjaxWebForm.js文件中得到_updateControls方法的声明：

1	function Sys$WebForms$PageRequestManager$_updateControls(updatePanelIDs, asyncPostBackControlIDs, postBackControlIDs, asyncPostBackTimeout) {}

由其中第一个参数代表了当前页面上所有的UpdatePanel控件的ID集合，如果该UpdatePanel的ChildrenAsTrigger为True的话，应在ID前添加字符't'，否则添加字符'f'；而第二个参数是所有引发异步回送的控件ID；第三个参数是所有引发同步回送的控件ID；第四个参数设定了异步回送的Timeout时间，单位为秒。于PageRequestManager对象注册了当前表单的submit时间，所以每当页面有提交动作的时候，PageRequestManager对象就会介入，看一下PageRequestManager对象页面提交处理函数_onFormSubmit(evt)。

如果需要执行一次异步回送的话，会中止原有的普通浏览器会回发，代之使用XMLHttpRequest进行AJAX回发。在封装这个请求的时候，当前页面的所有字段以及视图状态都会被打包在请求中，另外还设置了这次Request的HTTP头：request.get_headers()['X-MicrosoftAjax'] = 'Delta=true'；

在服务器端将会根据这个HTTP头标记来判定是否为一次AJAX异步回发。

_onFormSubmit(evt)函数代码：

001	function Sys$WebForms$PageRequestManager$_onFormSubmit(evt) {

002	var continueSubmit = true;

003	var isCrossPost = this._isCrossPost;

004	this._isCrossPost = false;

005	if (this._onsubmit) {

006	continueSubmit = this._onsubmit();

007

}

008	if (continueSubmit) {

009	for (var i = 0; i < this._onSubmitStatements.length; i++) {

010	if (!this._onSubmitStatements[i]()) {

011	continueSubmit = false;

012

break;

013

}

014

}

015

}

016	if (!continueSubmit) {

017	if (evt) {

018	evt.preventDefault();

019

}

020

return;

021

}

022	var form = this._form;

023	if (isCrossPost) {

024

return;

025

}

026	if (this._activeDefaultButton && !this._activeDefaultButtonClicked) {

027	this._onFormElementActive(this._activeDefaultButton, 0, 0);

028

}

029	if (!this._postBackSettings.async) {

030

return;

031

}

032	var formBody = new Sys.StringBuilder();

033	formBody.append(encodeURIComponent(this._scriptManagerID) + '=' + encodeURIComponent(this._postBackSettings.panelID) + '&');

034	var count = form.elements.length;

035	for (var i = 0; i < count; i++) {

036	var element = form.elements[i];

037	var name = element.name;

038	if (typeof(name) === "undefined" || (name === null) || (name.length === 0)) {

039

continue;

040

}

041	var tagName = element.tagName;

042	if (tagName === 'INPUT') {

043	var type = element.type;

044	if ((type === 'text') ||

045	(type === 'password') ||

046	(type === 'hidden') ||

047	(((type === 'checkbox') || (type === 'radio')) && element.checked)) {

048	formBody.append(encodeURIComponent(name));

049	formBody.append('=');

050	formBody.append(encodeURIComponent(element.value));

051	formBody.append('&');

052

}

053

}

054	else if (tagName === 'SELECT') {

055	var optionCount = element.options.length;

056	for (var j = 0; j < optionCount; j++) {

057	var option = element.options[j];

058	if (option.selected) {

059	formBody.append(encodeURIComponent(name));

060	formBody.append('=');

061	formBody.append(encodeURIComponent(option.value));

062	formBody.append('&');

063

}

064

}

065

}

066	else if (tagName === 'TEXTAREA') {

067	formBody.append(encodeURIComponent(name));

068	formBody.append('=');

069	formBody.append(encodeURIComponent(element.value));

070	formBody.append('&');

071

}

072

}

073	if (this._additionalInput) {

074	formBody.append(this._additionalInput);

075	this._additionalInput = null;

076

}

077

078	var request = new Sys.Net.WebRequest();

079	var action = form.action;

080	if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {

081	var queryIndex = action.indexOf('?');

082	if (queryIndex !== -1) {

083	var path = action.substr(0, queryIndex);

084	if (path.indexOf("%") === -1) {

085	action = encodeURI(path) + action.substr(queryIndex);

086

}

087

}

088	else if (action.indexOf("%") === -1) {

089	action = encodeURI(action);

090

}

091

}

092	request.set_url(action);

093	request.get_headers()['X-MicrosoftAjax'] = 'Delta=true';

094	request.get_headers()['Cache-Control'] = 'no-cache';

095	request.set_timeout(this._asyncPostBackTimeout);

096	request.add_completed(Function.createDelegate(this, this._onFormSubmitCompleted));

097	request.set_body(formBody.toString());

098	var handler = this._get_eventHandlerList().getHandler("initializeRequest");

099	if (handler) {

100	var eventArgs = new Sys.WebForms.InitializeRequestEventArgs(request, this._postBackSettings.sourceElement);

101	handler(this, eventArgs);

102	continueSubmit = !eventArgs.get_cancel();

103

}

104	if (!continueSubmit) {

105	if (evt) {

106	evt.preventDefault();

107

}

108

return;

109

}

110	this._scrollPosition = this._getScrollPosition();

111	this.abortPostBack();

112	handler = this._get_eventHandlerList().getHandler("beginRequest");

113	if (handler) {

114	var eventArgs = new Sys.WebForms.BeginRequestEventArgs(request, this._postBackSettings.sourceElement);

115	handler(this, eventArgs);

116

}

117

118	if (this._originalDoCallback) {

119	this._cancelPendingCallbacks();

120

}

121	this._request = request;

122	request.invoke();

123	if (evt) {

124	evt.preventDefault();

125

}

126

}

我们可以发现AJAX回发所提交的数据量其实跟普通回发过程中提交的数据量是一样的，并且还附加了一些额外信息。

3.2 服务器端的处理

AJAX回发请求到达服务器之后，当前页面的生命周期跟普通回发引起的请求是一样的，页面的Init、Load和Render等等事件都会被触发，差别只是在于AJAX回发使用了不同的呈现画法。

AJAX回发引起的请求生命周期：

从上图我们可以看到，页面的生命周期与普通回发是一样的，同样页面上的控件也会经历相应的生命周期。

先了解一下ScriptManager控件在服务器端的处理：

- OnInit：在Init事件中，ScriptManager控件会注册页面的InitComplete, PreRenderComplete以及PreRender事件，另外还会根据本次请求的HTTP头来设定一个标记以确定本次回发是否为Ajax异步更新所引起的回发。

见下面的代码：

01	protected internal override void OnInit(EventArgs e)

02

{

03	base.OnInit(e);

04	if (this.EnableHistory)

05

{

06	this.RegisterAsyncPostBackControl(this);

07

}

08	if (!base.DesignMode)

09

{

10	IPage iPage = this.IPage;

11	if (GetCurrent(this.Page) != null)

12

{

13	throw new InvalidOperationException(AtlasWeb.ScriptManager_OnlyOneScriptManager);

14

}

15	iPage.Items[typeof(IScriptManager)] = this;

16	iPage.Items[typeof(ScriptManager)] = this;

17	iPage.InitComplete += new EventHandler(this.OnPageInitComplete);

18	iPage.PreRenderComplete += new EventHandler(this.OnPagePreRenderComplete);

19	if (iPage.IsPostBack)

20

{

21	this._isInAsyncPostBack = PageRequestManager.IsAsyncPostBackRequest(iPage.Request.Headers);

22	if (this.EnableHistory)

23

{

24	this._isNavigating = iPage.Request["__EVENTTARGET"] == this.UniqueID;

25

}

26

}

27	this.PageRequestManager.OnInit();

28	iPage.PreRender += new EventHandler(this.ScriptControlManager.OnPagePreRender);

29

}

30

}

- OnPagePreRenderComplete，在PagePreRenderComplete事件中，ScriptManager控件会注册脚本文件以及Services代理脚本，MicrosoftAjax.js和MicrosoftAjaxWebForm.js就是在这个阶段被注册到客户端的。

见下面的代码：

01	private void OnPagePreRenderComplete(object sender, EventArgs e)

02

{

03	if (!this.IsInAsyncPostBack)

04

{

05	if (this.SupportsPartialRendering)

06

{

07	this.IPage.ClientScript.GetPostBackEventReference(new PostBackOptions(this, null, null, false, false, false, false, true, null));

08

}

09	this.RegisterGlobalizationScriptBlock();

10	this.RegisterScripts();

11	this.RegisterServices();

12	if (this.EnableHistory)

13

{

14	JavaScriptSerializer serializer = JavaScriptSerializer.CreateInstance();

15

string[] strArray = new string[] { "/r/nSys.Application.setServerId(", serializer.Serialize(this.ClientID), ", ", serializer.Serialize(this.UniqueID), ");/r/n", ((this._initialState != null) && (this._initialState.Count != 0)) ? (" Sys.Application.setServerState('" + this.GetStateString() + "');/r/n") : "/r/n" };

16	string script = string.Concat(strArray);

17	RegisterStartupScript(this, typeof(ScriptManager), "HistoryStartup", script, true);

18

}

19

}

20

else

21

{

22	this.RegisterScripts();

23	if (this.EnableHistory)

24

{

25	if ((this._initialState != null) && (this._initialState.Count == 0))

26

{

27	this._initialState = null;

28

}

29	if (this._newPointCreated)

30

{

31	this.RegisterDataItem(this, "'" + this.GetStateString() + "'", true);

32

}

33

}

34

}

35

}

- OnPreRender，在PreRender事件中如果判定本次回发为AJAX回发，则会调用PageRequestManager对象的OnPreRender方法。而PageRequestManager对象则会调用Page对象的SetRenderMethodDelegate方法来代理Page的画法，PageRequestManager对象会真正负责本次AJAX回发最终的HTML代码。

见下面的代码：

01	public class ScriptManager : Control,

02

{

03	protected internal override void OnPreRender(EventArgs e)

04

{

05	base.OnPreRender(e);

06	if (this.IsInAsyncPostBack)

07

{

08	this.PageRequestManager.OnPreRender();

09

}

10

}

11

}

12

13	internal sealed class PageRequestManager

14

{

15	internal void OnPreRender()

16

{

17	this._owner.IPage.SetRenderMethodDelegate(new RenderMethod(this.RenderPageCallback));

18

}

19

}

PageRequestManager的RenderPageCallback方法最终处理了AJAX回发所需要的HTML代码，在这个方法中会遍历页面上所有涉及到的UpdatePanel控件，得到其更新后的HTML代码后，与隐藏字段还有一些额外信息一起打包，然后传递给客户端。

见下面的代码：

01	private void RenderPageCallback(HtmlTextWriter writer, Control pageControl)

02

{

03	this.ProcessUpdatePanels();

04	IHttpResponse response = this._owner.IPage.Response;

05	response.ContentType = "text/plain";

06	response.Cache.SetNoServerCaching();

07	IHtmlForm form = this._owner.IPage.Form;

08	form.SetRenderMethodDelegate(new RenderMethod(this.RenderFormCallback));

09	this._updatePanelWriter = writer;

10	ParserStringWriter writer2 = new ParserStringWriter();

11	ParserHtmlTextWriter writer3 = new ParserHtmlTextWriter(writer2);

12	writer2.ParseWrites = true;

13	form.RenderControl(writer3);

14	writer2.ParseWrites = false;

15	foreach (KeyValuePair<string, string> pair in writer2.HiddenFields)

16

{

17	if (ControlUtil.IsBuiltInHiddenField(pair.Key))

18

{

19	EncodeString(writer, "hiddenField", pair.Key, pair.Value);

20

}

21

}

22	EncodeString(writer, "asyncPostBackControlIDs", string.Empty, this.GetAsyncPostBackControlIDs(false));

23	EncodeString(writer, "postBackControlIDs", string.Empty, this.GetPostBackControlIDs(false));

24	EncodeString(writer, "updatePanelIDs", string.Empty, this.GetAllUpdatePanelIDs());

25	EncodeString(writer, "childUpdatePanelIDs", string.Empty, this.GetChildUpdatePanelIDs());

26	EncodeString(writer, "panelsToRefreshIDs", string.Empty, this.GetRefreshingUpdatePanelIDs());

27	EncodeString(writer, "asyncPostBackTimeout", string.Empty, this._owner.AsyncPostBackTimeout.ToString(CultureInfo.InvariantCulture));

28	if (writer3.FormAction != null)

29

{

30	EncodeString(writer, "formAction", string.Empty, writer3.FormAction);

31

}

32	if (this._owner.IPage.Header != null)

33

{

34	string title = this._owner.IPage.Title;

35	if (!string.IsNullOrEmpty(title))

36

{

37	EncodeString(writer, "pageTitle", string.Empty, title);

38

}

39

}

40	this.RenderDataItems(writer);

41	this.ProcessScriptRegistration(writer);

42	this.ProcessFocus(writer);

43

}

3.3 客户端更新

当服务器端相应完毕后，客户端会得到响应信息，然后调用客户端对象PageRequestManager的_onFormSubmitCompleted方法来进行页面局部更新，最终会调用_updatePanel方法来更新UpdatePanel控件。

参见_onFormSubmitCompleted方法的代码：

view source

print ?

001	function Sys$WebForms$PageRequestManager$_onFormSubmitCompleted(sender, eventArgs) {

002	this._processingRequest = true;

003	var delimitByLengthDelimiter = '|';

004	if (sender.get_timedOut()) {

005	this._endPostBack(this._createPageRequestManagerTimeoutError(), sender);

006

return;

007

}

008	if (sender.get_aborted()) {

009	this._endPostBack(null, sender);

010

return;

011

}

012	if (!this._request || sender.get_webRequest() !== this._request) {

013

return;

014

}

015	var errorMessage;

016	var delta = [];

017	if (sender.get_statusCode() !== 200) {

018	this._endPostBack(this._createPageRequestManagerServerError(sender.get_statusCode()), sender);

019

return;

020

}

021	var reply = sender.get_responseData();

022	var delimiterIndex, len, type, id, content;

023	var replyIndex = 0;

024	var parserErrorDetails = null;

025	while (replyIndex < reply.length) {

026	delimiterIndex = reply.indexOf(delimitByLengthDelimiter, replyIndex);

027	if (delimiterIndex === -1) {

028	parserErrorDetails = this._findText(reply, replyIndex);

029

break;

030

}

031	len = parseInt(reply.substring(replyIndex, delimiterIndex), 10);

032	if ((len % 1) !== 0) {

033	parserErrorDetails = this._findText(reply, replyIndex);

034

break;

035

}

036	replyIndex = delimiterIndex + 1;

037	delimiterIndex = reply.indexOf(delimitByLengthDelimiter, replyIndex);

038	if (delimiterIndex === -1) {

039	parserErrorDetails = this._findText(reply, replyIndex);

040

break;

041

}

042	type = reply.substring(replyIndex, delimiterIndex);

043	replyIndex = delimiterIndex + 1;

044	delimiterIndex = reply.indexOf(delimitByLengthDelimiter, replyIndex);

045	if (delimiterIndex === -1) {

046	parserErrorDetails = this._findText(reply, replyIndex);

047

break;

048

}

049	id = reply.substring(replyIndex, delimiterIndex);

050	replyIndex = delimiterIndex + 1;

051	if ((replyIndex + len) >= reply.length) {

052	parserErrorDetails = this._findText(reply, reply.length);

053

break;

054

}

055	content = reply.substr(replyIndex, len);

056	replyIndex += len;

057	if (reply.charAt(replyIndex) !== delimitByLengthDelimiter) {

058	parserErrorDetails = this._findText(reply, replyIndex);

059

break;

060

}

061	replyIndex++;

062	Array.add(delta, {type: type, id: id, content: content});

063

}

064	if (parserErrorDetails) {

065	this._endPostBack(this._createPageRequestManagerParserError(String.format(Sys.WebForms.Res.PRM_ParserErrorDetails, parserErrorDetails)), sender);

066

return;

067

}

068	var updatePanelNodes = [];

069	var hiddenFieldNodes = [];

070	var arrayDeclarationNodes = [];

071	var scriptBlockNodes = [];

072	var scriptStartupNodes = [];

073	var expandoNodes = [];

074	var onSubmitNodes = [];

075	var dataItemNodes = [];

076	var dataItemJsonNodes = [];

077	var scriptDisposeNodes = [];

078	var asyncPostBackControlIDsNode, postBackControlIDsNode,

079	updatePanelIDsNode, asyncPostBackTimeoutNode,

080	childUpdatePanelIDsNode, panelsToRefreshNode, formActionNode;

081	for (var i = 0; i < delta.length; i++) {

082	var deltaNode = delta[i];

083	switch (deltaNode.type) {

084	case "updatePanel":

085	Array.add(updatePanelNodes, deltaNode);

086

break;

087	case "hiddenField":

088	Array.add(hiddenFieldNodes, deltaNode);

089

break;

090	case "arrayDeclaration":

091	Array.add(arrayDeclarationNodes, deltaNode);

092

break;

093	case "scriptBlock":

094	Array.add(scriptBlockNodes, deltaNode);

095

break;

096	case "scriptStartupBlock":

097	Array.add(scriptStartupNodes, deltaNode);

098

break;

099	case "expando":

100	Array.add(expandoNodes, deltaNode);

101

break;

102	case "onSubmit":

103	Array.add(onSubmitNodes, deltaNode);

104

break;

105	case "asyncPostBackControlIDs":

106	asyncPostBackControlIDsNode = deltaNode;

107

break;

108	case "postBackControlIDs":

109	postBackControlIDsNode = deltaNode;

110

break;

111	case "updatePanelIDs":

112	updatePanelIDsNode = deltaNode;

113

break;

114	case "asyncPostBackTimeout":

115	asyncPostBackTimeoutNode = deltaNode;

116

break;

117	case "childUpdatePanelIDs":

118	childUpdatePanelIDsNode = deltaNode;

119

break;

120	case "panelsToRefreshIDs":

121	panelsToRefreshNode = deltaNode;

122

break;

123	case "formAction":

124	formActionNode = deltaNode;

125

break;

126	case "dataItem":

127	Array.add(dataItemNodes, deltaNode);

128

break;

129	case "dataItemJson":

130	Array.add(dataItemJsonNodes, deltaNode);

131

break;

132	case "scriptDispose":

133	Array.add(scriptDisposeNodes, deltaNode);

134

break;

135	case "pageRedirect":

136	if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {

137	var anchor = document.createElement("a");

138	anchor.style.display = 'none';

139	anchor.attachEvent("onclick", cancelBubble);

140	anchor.href = deltaNode.content;

141	document.body.appendChild(anchor);

142	anchor.click();

143	anchor.detachEvent("onclick", cancelBubble);

144	document.body.removeChild(anchor);

145

146	function cancelBubble(e) {

147	e.cancelBubble = true;

148

}

149

}

150

else {

151	window.location.href = deltaNode.content;

152

}

153

return;

154	case "error":

155	this._endPostBack(this._createPageRequestManagerServerError(Number.parseInvariant(deltaNode.id), deltaNode.content), sender);

156

return;

157	case "pageTitle":

158	document.title = deltaNode.content;

159

break;

160	case "focus":

161	this._controlIDToFocus = deltaNode.content;

162

break;

163

default:

164	this._endPostBack(this._createPageRequestManagerParserError(String.format(Sys.WebForms.Res.PRM_UnknownToken, deltaNode.type)), sender);

165

return;

166

}

167

}

168

var i;

169	if (asyncPostBackControlIDsNode && postBackControlIDsNode &&

170	updatePanelIDsNode && panelsToRefreshNode &&

171	asyncPostBackTimeoutNode && childUpdatePanelIDsNode) {

172	this._oldUpdatePanelIDs = this._updatePanelIDs;

173	var childUpdatePanelIDsString = childUpdatePanelIDsNode.content;

174	this._childUpdatePanelIDs = childUpdatePanelIDsString.length ? childUpdatePanelIDsString.split(',') : [];

175	var asyncPostBackControlIDsArray = this._splitNodeIntoArray(asyncPostBackControlIDsNode);

176	var postBackControlIDsArray = this._splitNodeIntoArray(postBackControlIDsNode);

177	var updatePanelIDsArray = this._splitNodeIntoArray(updatePanelIDsNode);

178	this._panelsToRefreshIDs = this._splitNodeIntoArray(panelsToRefreshNode);

179	for (i = 0; i < this._panelsToRefreshIDs.length; i++) {

180	var panelClientID = this._uniqueIDToClientID(this._panelsToRefreshIDs[i]);

181	if (!document.getElementById(panelClientID)) {

182	this._endPostBack(Error.invalidOperation(String.format(Sys.WebForms.Res.PRM_MissingPanel, panelClientID)), sender);

183

return;

184

}

185

}

186	var asyncPostBackTimeout = asyncPostBackTimeoutNode.content;

187	this._updateControls(updatePanelIDsArray, asyncPostBackControlIDsArray, postBackControlIDsArray, asyncPostBackTimeout);

188

}

189	this._dataItems = {};

190	for (i = 0; i < dataItemNodes.length; i++) {

191	var dataItemNode = dataItemNodes[i];

192	this._dataItems[dataItemNode.id] = dataItemNode.content;

193

}

194	for (i = 0; i < dataItemJsonNodes.length; i++) {

195	var dataItemJsonNode = dataItemJsonNodes[i];

196	this._dataItems[dataItemJsonNode.id] = Sys.Serialization.JavaScriptSerializer.deserialize(dataItemJsonNode.content);

197

}

198	var handler = this._get_eventHandlerList().getHandler("pageLoading");

199	if (handler) {

200	handler(this, this._getPageLoadingEventArgs());

201

}

202	if (formActionNode) {

203	this._form.action = formActionNode.content;

204

}

205

206

207	Sys._ScriptLoader.readLoadedScripts();

208	Sys.Application.beginCreateComponents();

209	var scriptLoader = Sys._ScriptLoader.getInstance();

210	this._queueScripts(scriptLoader, scriptBlockNodes, true, false);

211

212	this._updateContext = {

213	response: sender,

214	updatePanelNodes: updatePanelNodes,

215	scriptBlockNodes: scriptBlockNodes,

216	scriptDisposeNodes: scriptDisposeNodes,

217	hiddenFieldNodes: hiddenFieldNodes,

218	arrayDeclarationNodes: arrayDeclarationNodes,

219	expandoNodes: expandoNodes,

220	scriptStartupNodes: scriptStartupNodes,

221	onSubmitNodes: onSubmitNodes

222

};

223	scriptLoader.loadScripts(0,

224	Function.createDelegate(this, this._scriptIncludesLoadComplete),

225	Function.createDelegate(this, this._scriptIncludesLoadFailed),

226

null);

227

}

4．结语

使用UpdatePanel是给已经存在的ASP.NET应用程序添加AJAX体验的最快捷方式，对于应用程序的架构也不会有影响，我们可以使用它来逐步的提高应用程序的用户体验。但是其性能与纯粹的AJAX方式相比较，还是比较差的。