有关注册DataItem的一些可能被忽视的事情 VS System.Web.UI.ScriptManager.RegisterStartupScript
在
UpdatePanel
对页面进行部分刷新时注册一些
Data Item
是
ASP.NET AJAX
的特点之一。我们可以在服务器端为某个控件注册一个字符串甚至是一个对象，然后在客户端将将其取回。但是现在我希望向您展示一些您可能会忽视的事情。
让我们先从最基本的用法开始。在一个异步回送过程中，我们可以调用
RegisterDataItem
方法将一个字符串与一个
UpdatePanel
绑定起来：
RegisterDataItem
方法调用
ScriptManager.GetCurrent(
this
.Page).RegisterDataItem(
this
.UpdatePanel1, "
DataItem
");
在客户端，如果我们监听 pageLoading ， pageLoaded 或者 endRequest 事件，我们就可以使用下面的代码，使用控件的 ClientID 将这个字符串取回：
将字符串取回
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
function
(sender, e)
{
var
dataItem = e.get_dataItems()["
<%= this.UpdatePanel1.ClientID %>
"];
// "DataItem"
// more implementations...
});
RegisterDataItem 方法还有一个重载的版本会接受一个额外的参数，其作用是使用一个布尔值来表明我们注册的 dataItem 是不是已经被序列化为 JSON 。但是这里就出了一个问题 —— 甚至在官方文档中的示例也是不正确的。
下面的代码选自官方文档中的示例：
官方文档中的示例
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(ScriptManager1.IsInAsyncPostBack)
{
System.Web.Script.Serialization.JavaScriptSerializer json =
new
System.Web.Script.Serialization.JavaScriptSerializer();
ScriptManager1.RegisterDataItem(Label1, DateTime.Now.ToString());
ScriptManager1.RegisterDataItem(Label2, json.Serialize("
more data
"),
true
);
}
}
这个示例的确能够正常工作，但是它事实上掩盖了一个问题。请注意，序列化之后的 Data Item 会被 JavaScript 内置的 eval 方法解释执行：
使用
eval
函数解释执行
function
Sys$WebForms$PageRequestManager$_onFormSubmitCompleted(sender, eventArgs)
{
//...
for
(i = 0; i < dataItemJsonNodes.
length
; i++) {
var
dataItemJsonNode = dataItemJsonNodes[i];
this
._dataItems[dataItemJsonNode.id] =
eval(dataItemJsonNode.content)
;
}
//...
}
在官方文档的示例中，字符串 “ more data ” 会被序列化为 “ "more data" ” （请注意多出的双引号），这样从 eval 方法中得到的结果就是 “ more data ” ，这正是我们注册的内容。这个再正常不多了，不是吗？猜猜看如果我们将一个序列化的对象注册到客户端时会发生什么事情呢？我为此写了一个示例：
注册一个对象
// the definition of Person class
public
class
Person
{
public
string Name;
}
// the code to register a Person object
Person person =
new
Person();
person.Name = "
Jeffz
";
JavaScriptSerializer serializer =
new
JavaScriptSerializer();
ScriptManager.GetCurrent(
this
.Page).RegisterDataItem(
this
.UpdatePanel1, serializer.Serialize(person),
true
);
当我们进行异步更新时就会抛出异常。似乎这是因为服务器端注册的表示 Person 对象的 JSON 字符串 “ {"Name":"Jeffz"} ” 无法被直接传递进入 eval 方法。具体的原因关乎语法方面的问题，可以在 ECMAScript Specification 中找到解释，因此我在这里就不多作解释了。那么，请注意我下面的代码：
为
JSON
字符串添加括号
ScriptManager.GetCurrent(
this
.Page).RegisterDataItem(
this
.UpdatePanel1,
"(" +
serializer.Serialize(person)
+ ")"
,
true
);
现在，我们的代码就能正常工作了，于是我们就可以在客户端将 Person 对象取出：
在客户段取出
Person
对象
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
function
(sender, e)
{
var
person = e.get_dataItems()["
<%= this.UpdatePanel1.ClientID %>
"];
alert
(person.Name);
// "Jeffz"
});
这样看来，这个问题也就可以使用这个方法来解决了。不过为什么 ASP.NET AJAX 会使用 eval 方法，而不是定义在 Microsoft AJAX Library 中的 deserialize 方法来反序列化一个对象呢？我们可以发现，在 deserialize 方法中，一个表达式被传递给 eval 方法之前会被自动加上括号：
desrialize
方法
Sys.Serialization.JavaScriptSerializer.deserialize =
function
(data)
{
try
{
var
exp = data.replace(...);
return
eval
('(' + exp + ')');
}
catch
(e)
{
throw
Error.argument('data', Sys.Res.cannotDeserializeInvalidJson);
}
}
我猜想，会不会是因为编写部分刷新相关代码的开发人员并不完全了解 Microsoft AJAX Library 中的功能呢？不过可能性最大的原因则是这些代码没有被完整地 Review 和测试过。事实上这并不是 ASP.NET AJAX 最终版本中唯一的 bug ，其他的还包括那个著名的 “跨域名frame的拒绝访问错误” 和 StringBuilder的Bug 。
嗯，我们问题也看够了，就把目光移向别处吧。尽管逻辑上一个
Data Item
应该是一个包含信息的对象，但是请注意我们是使用
eva
l
方法来
“
反序列化
”
一个
JSON
字符串的。这意味着我们事实上可以将任意的合法表达式发送到客户端，然后它就会被正确执行。请看下面的示例：
服务器端代码
ScriptManager.GetCurrent(
this
.Page).RegisterDataItem(
this
.UpdatePanel1, "
var __f = function(){alert('Hello World!');}; __f;
",
true
);
客户端代码
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
function
(sender, e)
{
e.get_dataItems()["
<%= this.UpdatePanel1.ClientID %>
"]();
});
我在上面代码中将一个函数注册为一个 Data Item 并且在客户端将其执行了。如果您深入了解 UpdatePanel 局部刷新的过程，您会注意到您在服务器端注册的 JavaScript 代码只有在页面更新结束后才会生效，也就是说，我们无法在 pageLoading 事件被触发时执行这些代码。我会在之后的文章中针对这样的设计以及如何使用 work arounds 来解决这个问题进行详细的探讨。这些 work arounds 就是基于 Data Item 注册的使用方式的，因为表示 Data Item 的 “JSON 字符串 ” 在 pageLoading 触发之前就被解释执行。
示例：
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
WebForm1.aspx.cs
"
Inherits
=
"
Sopu.Business.WebForm1
"
%>
<! 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 runat = " server " >
< title > 无标题页 </ title >
</ head >
< body >
< form id = " form1 " runat = " server " >
< asp:ScriptManager ID = " ScriptManager1 " runat = " server " ></ asp:ScriptManager >
< script type = " text/javascript " >
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
function(sender, e)
{
var dataItem = e.get_dataItems()[ " <%= this.UpdatePanel1.ClientID %> " ];
alert(dataItem.Name);
});
</ script >
< div >
< asp:UpdatePanel ID = " UpdatePanel1 " runat = " server " >
< ContentTemplate >
< asp:Button ID = " test " runat = " server " Text = " test " OnClick = " test_Click " />
</ ContentTemplate >
</ asp:UpdatePanel >
</ div >
</ form >
</ body >
</ html >
<! 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 runat = " server " >
< title > 无标题页 </ title >
</ head >
< body >
< form id = " form1 " runat = " server " >
< asp:ScriptManager ID = " ScriptManager1 " runat = " server " ></ asp:ScriptManager >
< script type = " text/javascript " >
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
function(sender, e)
{
var dataItem = e.get_dataItems()[ " <%= this.UpdatePanel1.ClientID %> " ];
alert(dataItem.Name);
});
</ script >
< div >
< asp:UpdatePanel ID = " UpdatePanel1 " runat = " server " >
< ContentTemplate >
< asp:Button ID = " test " runat = " server " Text = " test " OnClick = " test_Click " />
</ ContentTemplate >
</ asp:UpdatePanel >
</ div >
</ form >
</ body >
</ html >
using
System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Script.Serialization;
namespace Sopu.Business
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
}
protected void test_Click( object sender, EventArgs e)
{
Person person = new Person();
person.Name = " Jeffz " ;
// System.Web.Script.Serialization.JavaScriptSerializer serializer = new JavaScriptSerializer();
// 方法一
JavaScriptSerializer serializer = new JavaScriptSerializer();
ScriptManager.GetCurrent( this .Page).RegisterDataItem( this .UpdatePanel1, " ( " + serializer.Serialize(person) + " ) " , true );
// 方法二
System.Web.UI.ScriptManager.RegisterStartupScript( this .Page, this .GetType(), " test " , " var p = ( " + serializer.Serialize(person) + " );alert(p.Name) " , true );
}
}
public class Person
{
public string Name;
}
}
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Script.Serialization;
namespace Sopu.Business
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
}
protected void test_Click( object sender, EventArgs e)
{
Person person = new Person();
person.Name = " Jeffz " ;
// System.Web.Script.Serialization.JavaScriptSerializer serializer = new JavaScriptSerializer();
// 方法一
JavaScriptSerializer serializer = new JavaScriptSerializer();
ScriptManager.GetCurrent( this .Page).RegisterDataItem( this .UpdatePanel1, " ( " + serializer.Serialize(person) + " ) " , true );
// 方法二
System.Web.UI.ScriptManager.RegisterStartupScript( this .Page, this .GetType(), " test " , " var p = ( " + serializer.Serialize(person) + " );alert(p.Name) " , true );
}
}
public class Person
{
public string Name;
}
}