ASP.NET和Javascript的Json数据交互

最近需要做一个系统，从DataTable中读取数据转交给JavaScript。DataTable中存放着数据点在地图上的经、纬度和计数值。将这些数据以Json的形式交给页面的JavaScript变量。再由百度地图的JavaScript API获取数据显示在地图上。

技术的关键在于：

将DataTable数据转化为Json；

将以C#语言声名的变量形式存放的Json传递给页面的JavaScript变量

读取Json

先说第一个：

DataTable转化为Json可以使用Newtonsoft的Json工具，该工具可以从http://www.newtonsoft.com/json下载。

在代码中添加：

using Newtonsoft.Json;
using Newtonsoft.Json.Converters;

先在页面的Page_Load函数中读取数据表，该表有3列“lng”、“lat”、“count”对应类型为float、float、int。

这里需要注意的是，如果DataTable对象的各个列都没有指定类型，则Newtonsoft.Json转化时会默认都转化为字符串，如：

{"lng":"109.37","lat":"24.33","count":"10"}

上述已经指定列类型的DataTable对象则转化成：

{"lng":109.37,"lat":24.33,"count":10}

转化方法为：

coordinate = JsonConvert.SerializeObject(dt);//coordinate为string类型

coordinate 是该类的公共成员，用于记录转化的Json，在页面类中的声名为：

public string coordinate = "";

下面就要解决如何将这个Json传输到JavaScript变量中。在页面的JavaScript代码段中加入

var points = <%=coordinate%>;

这样在页面加载完Page_Load函数后会将Json传递给JavaScript变量。注意JavaScript代码段要写在下面代码的后面。

<form id="form1" runat="server">
........//这里是存放百度地图的div
</form>

最后，使用百度地图JavaScript API读取该Json

heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 50, "opacity": 0 });
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({ data: points, max: 100 });

显示的效果如下