上一篇「CallBack PageCommand 与 JSON 初体验」中说明了在 CallBack 时，客户端可以接收伺服端传回的 JSON 字符串，在客户端 eval 取得 JSON 对象，使 JavaScript 可以直接操作伺服端传回的对象。其实在 ASP.NET AJAX 1.0 有提供相关类别来处理伺服端/客户端的 JSON 序列化/反列序化的需求。
伺服端处理 JSON 序列化的类别为
System.Web.Script.Serialization.JavaScriptSerializer
在伺服端处理序列化/反序列化的函式如下
''' <summary>
''' JSON 序列化。
''' </summary>
''' <param name="Value">物件。</param>
Public Shared Function JsonSerialize(ByVal Value As Object) As String
Dim oSerializer As System.Web.Script.Serialization.JavaScriptSerializer
oSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
Return oSerializer.Serialize(Value)
End Function
''' <summary>
''' JSON 反序列化。
''' </summary>
''' <param name="Text">JSON 字符串。</param>
Public Shared Function JsonDeserialize(Of T)(ByVal Text As String) As T
Dim oSerializer As System.Web.Script.Serialization.JavaScriptSerializer
oSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
Return oSerializer.Deserialize(Of T)(Text)
End Function
客户端处理 JSON 序列化的类别为
Sys.Serialization.JavaScriptSerializer
JSON 序列化
var sJson= Sys.Serialization.JavaScriptSerializer.serialize(oObject)
JSON 反序列化
var oObject = Sys.Serialization.JavaScriptSerializer.deserialize(sJson)
我们来撰写一个范例测试客户端/伺服端 JSON 对象的传递，程序运作流程如下
客户端物件 -> 1.客户端 JSON 序列化 -> CallBack 呼叫伺服端 -> 2.伺服服端 JSON 反序列化还原对象 -> 修改对象属性
-> 3.伺服端 JSON 序列化 -> CallBack 回传客户端 -> 4.客户端 JSON 反序列化还原物件
首先修改 GetCallBackPageCommandEventReference 方法，原本 CommandArgument 是使用字符串常数，现修改为呼叫客户端 GetPageCommandParam 函式。
''' <summary>
''' 取得以 CallBack 方式引发 PageCommand 事件的客户端指令码。
''' </summary>
''' <param name="CommandName">命令名称。</param>
''' <param name="CommandArgument">命令自变量。</param>
''' <param name="ClientCallback">可接收成功的服务器端事件结果的客户端事件处理例程名称。</param>
''' <param name="Context">在启始回呼之前，于客户端上评估的客户端指令码。</param>
Public Function GetCallBackPageCommandEventReference(ByVal CommandName As String, _
ByVal CommandArgument As String, _
ByVal ClientCallback As String, ByVal Context As String) As String
Dim sArgument As String
'sArgument = String.Format("'{0}${1}${2}'", PageEvent.PageCommand, CommandName, CommandArgument)
'PageCommand 事件会执行客户端 GetPageCommandParam 函式
sArgument = String.Format("GetPageCommandParam('{0}',{1})", CommandName, CommandArgument)
Return Me.GetCallbackEventReference(FPage, sArgument, ClientCallback, Context)
End Function
客户端对应的 GetPageCommandParam 函式如下
function GetPageCommandParam(commnadName,value){
var sArgument = Sys.Serialization.JavaScriptSerializer.serialize(value);
return "PageCommand$"+commnadName+'$'+sArgument;
}
在页面上放置一个按钮，利用 GetCallBackPageCommandEventReference 来取得 CallBack PageCommand 的客户端指令码。其中 CommandArgument 自变量为 GetUser() ，此为执行 CallBack 时执行客户端的函式。ReceiveServerData 函式则是接收伺服端回传的结果。
Button1.OnClientClick = Me.BeeScript.GetCallBackPageCommandEventReference( _
"User", "GetUser()", "ReceiveServerData", "") & ";return false;"
伺服端的完整程序代码 (aspx.vb) 如下，在 PageCommand 事件中会接收客户端传入的 JSON 字符串将其转为对象，修改此对象属性值再回传给客户端。在伺服端会执行程序流程中的「2.伺服服端 JSON 反序列化还原对象」及「3.伺服端 JSON 序列化」二个步骤。
<Serializable()> _
Public Class TUserData
Dim FID As String = String.Empty
Dim FName As String = String.Empty
Public Property ID() As String
Get
Return FID
End Get
Set(ByVal value As String)
FID = value
End Set
End Property
Public Property Name() As String
Get
Return FName
End Get
Set(ByVal value As String)
FName = value
End Set
End Property
End Class
Partial Class _Default
Inherits Bee.Web.TBBasePage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Button1.OnClientClick = Me.BeeScript.GetCallBackPageCommandEventReference( _
"User", "GetUser()", "ReceiveServerData", "") & ";return false;"
End Sub
Protected Sub _Default_PageCommand(ByVal sender As Object, ByVal e As Bee.Web.TBBasePage.PageCommandEventArgs) Handles Me.PageCommand
Dim oUser As TUserData
Dim sJson As String
'2.伺服服端 JSON 反序列化还原对象
oUser = JsonDeserialize(Of TUserData)(e.CommandArgument)
oUser.ID = "012"
oUser.Name = "tony"
'3.伺服端 JSON 序列化
sJson = Bee.Web.WebFunc.JsonSerialize(oUser)
e.CallbackResult = sJson
End Sub
End Class
执行 CallBack 的按钮，输出的 HTML 码如下
<input type="submit" name="Button1" value="執行 PageCommand" onclick="WebForm_DoCallback('__Page',GetPageCommandParam('User',GetUser()),ReceiveServerData,"",null,false);return false;" id="Button1" />
客户端的 JavaScrpt 程序代码如下所示，其中 GetUser 函式会取得 oUser 类别，包含 ID 及 Name 二个属性。执行按钮后会呼叫 GetPageCommandParam 函式，将 GetUser 取得对象执行步骤「1.客户端 JSON 序列化」，而伺服端回传给呼叫 ReceiveServerData 函式，执行步骤「4.客户端 JSON 反序列化还原对象」，并显示 CallBack 后的对象。
<script type="text/jscript">
function ReceiveServerData(value){
//4.客户端 JSON 反序列化还原物件
var oUser = Sys.Serialization.JavaScriptSerializer.deserialize(value)
//显示 CallBack 后的对象
alert('Server:\n'+'ID:'+oUser.ID+'\nName:'+oUser.Name);
}
function GetUser(){
var oUser={
ID : "007",
Name : "jeff"
};
return oUser;
}
function GetPageCommandParam(commnadName,value){
//1.客户端 JSON 序列化
var sArgument = Sys.Serialization.JavaScriptSerializer.serialize(value);
return "PageCommand$"+commnadName+'$'+sArgument;
}
</script>
执行结果如下
