DataTable循环引用错误？——Ajax系列之五（上）

何谓循环引用？
举个例子来说吧，一个男孩类Boy中可以访问他的女朋友是类Girl，同样，类Girl也可以访问她的男朋友Boy类。而且一个男朋友和女朋友具有对应的关系（一对一）；还有一种情况就是一对多的情况，比如Parent可以有多个Child，但是每个Child只可以有一个Parent。
不管是一对多，关联的两个类之间肯定存在一定的对应关系，这种关系就是循环引用。

Ajax中为什么会出现循环引用的错误？
在默认情况下Ajax的服务端和客户端之间传递的都是Json字串，json字串是json对象的字串表现形式，json对象是使用字典和列表（dictionary和list）两种结构互相嵌套、引用的方法来表示的对象；
对于每一个对象来说，我们都可以想象成是一个字典，由key和value组成，一个key个value组成一个item；一个json对象可以有多个item。这样在客户端和服务端传输的Json字串的key和value就发生了循环指向，造成无法解析的错误。

解决办法？
针对常用的DataSet、DataTable和DataRow数据类型，微软已经封装了解决循环引用的类，我们在程序中直接添加引用即可；
针对自定义的复杂类型的数据，我们可以自定义JavascriptConverter来解决循环问题。
核心的思路原理：
破解循环引用的核心思想是：在访问对方类之前，打破原有的引用关系，重新来指定对方类的引用。

=======================================================================================

接下来进入代码实现部分：



默认情况下，如果在Ajax中返回一个DataTable，那么会弹出上图的错误提示。

解决方法是：
首先，在程序的Bin目录下添加Microsoft.Web.Preview.dll对象的引用



然后，在配置文件的system.web.extensions节点->scripting->webServices->jsonSerialization->converters节点中添加序列化类的路径。

<system.web.extensions>
<scripting>
<webServices>
<!-- Uncomment this line to customize maxJsonLength and add a custom converter -->
<jsonSerialization>
<!--定义了一些转换dataset、DataRow和datetable的类型-->
<converters>
<add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview"/>
<add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview"/>
<add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview"/>
<!--注册定义的序列化，type的值是这个类的完整命名，App_Code会自动生成一个应用程序集-->
<add name="BoyConverter" type="Converter.BoyConverter, App_Code"/>
</converters>
</jsonSerialization>
</webServices>
<!--
<scriptResourceHandler enableCompression="true" enableCaching="true" />
-->
</scripting>
</system.web.extensions>

在服务端定义GetDataTable方法，创建一个10行2列的DataTable：

<%@ WebService Language="C#" Class="DataTableService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Data;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class DataTableService  : System.Web.Services.WebService
{
[WebMethod]
public DataTable GetDataTable()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("ID", typeof(int)));
dt.Columns.Add(new DataColumn("Text", typeof(string)));
//使用时间作为随机化的种子
Random random = new Random(DateTime.Now.Millisecond);
for (int i = 0; i < 10; i++)
{
dt.Rows.Add(i, random.Next().ToString());
}

return dt;
}

}

客户端使用javascript脚本，调用服务端方法获得表格，并为表格赋值：

<script language="javascript" type="text/javascript">
function getDataTable()
{
DataTableService.GetDataTable(onSucceeded, onFailed);
}

function onSucceeded(result)
{
// alert(result);
//提倡使用StringBuilder拼接字符串，保证在不同的浏览器下都可以正确的拼接
var sb = new Sys.StringBuilder("<table border='1'>");
sb.append("<tr><td>ID</td><td>Text</td></tr>");
for (var i = 0; i < result.rows.length; i++)
{
sb.append(
String.format(
"<tr><td>{0}</td><td>{1}</td></tr>",
result.rows[i]["ID"],
result.rows[i].Text));
}
sb.append("</table>");

$get("result").innerHTML = sb.toString();
}

function onFailed(error)
{
alert(error.get_message());
}
</script>

客户端调用显示的事件：

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="DataTableService.asmx" InlineScript="true" />
</Services>
</asp:ScriptManager>

<input type="button" value="Get DataTable" onclick="getDataTable();" />

运行效果图：



技术学习：
在客户端使用了Sys.StringBuilder的方法拼接字符串，保证在不同的浏览器下都可以正确的拼接；
使用append方法添加dom元素，sb.append("</table>")；
在循环中使用String.format函数，为行赋值，String.format( "<tr><td>{0}</td><td>{1}</td></tr>", result.rows[i]"ID"], result.rows[i].Text))；
服务端使用dt.Columns.Add(new DataColumn("ID", typeof(int)));方法添加列字段。

如何解决自定义复杂数据类型的循环引用？
见下篇博客的分析……