现存问题以及解决方案：在ASP.NET AJAX中从客户端向服务器端传送DataTable
摘要
在《现存问题以及解决方案：在ASP.NET AJAX客户端得到服务器端的DataTable》这篇文章中，我给出了一个在ASP.NET AJAX中从服务器端得到客户端DataTable的方法，以及相应的示例程序。Jeffrey Zhao更加聪明地对此进行了改进，从根本上解决了从服务器到客户端传送DataTable的问题。
然而，这也仅仅解决了这个问题的一半而已。从客户端向服务器端发送DataTable仍然无法实现，这部分的问题要比前一部分更加严重。本文就将分析其中的原因，并给出解决方案。
本文包括如下内容：
- 异常重现——第一个异常：客户端JSON序列化时发生循环引用造成堆栈溢出
- 解决第一个异常——破坏循环引用
- 异常重现——第二个异常：服务器端Deserialize()方法抛出异常
- 解决第二个异常——简单实现Deserialize()方法
- 完成后的示例程序
- 示例代码下载
- 参考文献
异常重现——第一个异常：客户端JSON序列化时发生循环引用造成堆栈溢出
本文的将接着《现存问题以及解决方案：在ASP.NET AJAX客户端得到服务器端的DataTable》这篇文章中的示例程序继续开发。如果你还没有阅读过，那么请先至少熟悉其中的示例程序。在这篇文章中，我们已经能够在客户端得到一个DataTable，其中客户端的回调函数如下：
function cb_getDataTable(result) { result = parseBetaDataTable(result); var contentBuilder = new Sys.StringBuilder(); for (var i = 0; i < result.get_length(); ++i) { contentBuilder.append("<strong>Id</strong>: "); contentBuilder.append(result.getRow(i).getProperty("Id")); contentBuilder.append(" <strong>Name</strong>: "); contentBuilder.append(result.getRow(i).getProperty("Name")); contentBuilder.append("<br />"); } $get("result").innerHTML = contentBuilder.toString(); }
其中result就是这个客户端DataTable，让我们在该函数外定义一个全局的DataTable，将这个DataTable先保留起来：
var m_myDataTable = null;
修改一下上述回调函数，将result保留在m_myDataTable中：
function cb_getDataTable(result) { result = parseBetaDataTable(result); m_myDataTable = result; var contentBuilder = new Sys.StringBuilder(); //...... }
然后在页面中再添加一个按钮：
<input id="btnSendDataTable" type="button" value="Send DataTable" onclick="return btnSendDataTable_onclick()" />
onclick中指定的事件处理函数定义如下：
function btnSendDataTable_onclick()
{
PageMethods.SendDataTable(m_myDataTable, cb_sendDataTable);
}
可以看到，PageMethods.SendDataTable()即为服务器端名为SendDataTable()的Web Method的客户端代理，我们就通过这个代理将前面保存起来的DataTable（m_myDataTable）发送回了服务器。服务器端SendDataTable()方法的定义如下，注意该方法必须为静态（static），且被 [System.Web.Services.WebMethod]和 [Microsoft.Web.Script.Services.ScriptMethod]两个属性所修饰：
[System.Web.Services.WebMethod] [Microsoft.Web.Script.Services.ScriptMethod] public static void SendDataTable(DataTable myDataTable) { // do anything you like. save it to database or xml file, etc. }
示例程序中我们什么都没做，具体应用中各位朋友可以随心所欲地发挥。我们只要保证DataTable能够发送过去就行了。
返回到客户端JavaScript部分，注意到在调用PageMethods.SendDataTable()时候我们为其指定了一个回调函数，名为cb_sendDataTable()，该JavaScript函数的定义如下：
function cb_sendDataTable(result) { debugger; }
没什么讲的，只要能够顺利执行到回调函数，也就是其中的debugger被hit，那么我们就算是成功了！
这样就完成了本示例程序，运行并点击“Get DataTable”，将顺利得到如下图所示的界面。若出现了异常，请先参考《现存问题以及解决方案：在ASP.NET AJAX客户端得到服务器端的DataTable》这篇文章进行修正。
然后点击“Send DataTable”按钮，将这个DataTable发送回服务器…………………………………………在经历过长时间的等待以及浏览器无响应之后，抛出了Out of stack space异常：
上图右上角的Call Stack中可以看到，同一个函数被调用了无数次——显然发生了循环引用问题。
让我们在btnSendDataTable_onclick() 中加上一个断点，看看这个客户端DataTable到底是怎么回事。关于调试JavaScript，请参考我的这篇文章。
在上图中可以看到，Immediate Window中测试m_myDataTable._rows[0]._owner == m_myDataTable，返回为true。说明确实存在着循环引用：客户端DataTable的每一个Row对象的_owner属性都引用回了该DataTable自身，这也就造成了客户端序列化时无止无休的进行，直至堆栈溢出。
解决第一个异常——破坏循环引用
客户端DataTable的Row对象的_owner属性在传回服务器时似乎没什么用。所以解决这个循环引用问题最好的方式就是，在将客户端DataTable传回服务器之前，清空其每一个Row对象的_owner属性。
编写一个辅助函数prepareSendingDataTable()，接受一个客户端DataTable，返回一个破坏掉循环引用的DataTable：
function prepareSendingDataTable(dataTable) { for (var i = 0; i < dataTable.get_length(); ++i) { dataTable._rows[i]._owner = null; } return dataTable; }
然后修改一下btnSendDataTable_onclick() ，首先调用该辅助函数，然后再发送：
function btnSendDataTable_onclick() { var myDataTable = prepareSendingDataTable(m_myDataTable); PageMethods.SendDataTable(myDataTable, cb_sendDataTable); }
这样以后，第一个异常——客户端JSON序列化时发生循环引用造成堆栈溢出就被搞定了！
异常重现——第二个异常：服务器端Deserialize()方法抛出异常
别高兴得太早了——再次运行示例程序，依次点击“Get DataTable”和“Send DataTable”两个按钮。又出现了如下错误：
打开Fiddler，可以看到如下异常的详细信息：
仍旧是“System.NotSupportedException”异常……
通过某些手段，我们可以知道ASP.NET AJAX中自带的Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter中根本没有实现Deserialize()方法，该方法中仅仅是抛出了System.NotSupportedException异常而已……
似乎觉得无语，是么？不过ASP.NET AJAX也有它自己的考虑，毕竟DataTable是一个非常复杂的对象。其中Row、Column、数据类型、更新、删除等各种关系信息非常复杂。实现这个Deserialize()方法确实将是一个非常浩大的工程。
解决第二个异常——简单实现Deserialize()方法
有了问题不能逃避。我这里就简单地实现了一个DataTable的Deserialize()方法，其中忽略了太多太多的复杂东西。仅仅是创建出了最最最最最最最基本的一个DataTable而已，朋友们可以基于这个进行改进：
using System; using System.Data; using System.Configuration; using System.Collections.Generic; 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; namespace Dflying.Atlas { /// <summary> /// Simple implementation of DataTable Converter - Deserialize() method. /// </summary> public class DataTableConverter : Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter { public override object Deserialize(IDictionary<string, object> dictionary, Type t, Microsoft.Web.Script.Serialization.JavaScriptSerializer serializer) { // there's no rows in the DataTable, return null object. Array rowDicts = (dictionary["_array"] as Array); if (rowDicts.Length == 0) { return null; } DataTable myDataTable = new DataTable(); // get column info foreach (string colKey in (rowDicts.GetValue(0) as IDictionary<string, object>).Keys) { myDataTable.Columns.Add(colKey); } // create and add rows to the DataTable foreach (object rowObj in rowDicts) { IDictionary<string, object> rowDict = rowObj as IDictionary<string, object>; DataRow newRow = myDataTable.NewRow(); foreach (DataColumn column in myDataTable.Columns) { newRow[column.ColumnName] = rowDict[column.ColumnName]; } myDataTable.Rows.Add(newRow); } // done! return myDataTable; } } }
注释非常详细，这里不赘。若您不能完全理解，请参考Jeffrey Zhao的一系列非常精彩的深入文章。若您只想着使用的话，那么也无所谓理解了。
将其放置于App_Code目录下，并修改Web.config，使用我们自己的DataTableConverter：
<jsonSerialization maxJsonLength="500000000"> <converters> <add name="DataTableConverter" type="Dflying.Atlas.DataTableConverter"/> </converters> </jsonSerialization>
千辛万苦之后，终于大功告成！
完成后的示例程序
在public static void SendDataTable(DataTable myDataTable)中加上个断点，再次运行示例程序，依次点击“Get DataTable”和“Send DataTable”两个按钮。如我们所愿，服务器端得到了正确的DataTable：
接下来，客户端回调函数中的debugger也顺利被hit。终于搞定……
示例代码下载
本文的示例程序在此下载：ASPNETAJAXDataTable_Send.zip
