asp.net中后台c#数组与前台js数组交互

浏览数：27 / 时间：2015年06月09日

在上一篇《asp.net中javascript与后台c#交互》中实现了前端脚本javascript调用后台的数据库的数据。但新的问题又出现了，由于地图上有多个点，所以存放google maps的longitude和latitude有多个值，这就需要利用数组来存放经纬度，问题又演变成如何把后台的c#数组传给前端的js。由于刚接触asp.net和前端这块，基本是零基础，所以这个问题困扰了很久，上网查资料，后来在一篇文章中看到解决办法，但文章中的方法处理的是定长数组，而我现在要处理的是不定长数组，由于用户有可能会添加和删除地图上的位置，所以从数据库里查询的记录数是未知的，所以我又在文章的基础上修改了一下。自己亲自的实践了一下并应用在自己的程序中，果然解决了问题。现在结合大牛的文章和我自己的亲身实践来说明一下这个问题是如何解决的。

第一步：定义cs数组
cs文件里后台程序中要有数组，这个数组要定义成公共的数组。
public string[] lat = null;
public string[] lng = null;
第二步：给cs数组赋值
cs数组的值一般都是从数据库中取到的，相信大家也都会，且后边的代码中也会有描写，这里就不做详细的解释。
第三步：将cs数组赋给前端的js数组
这个步骤是关键，我选用的方法就是<%=cs数组%>。这样模糊的说法也是百度得到的，赋值会用到循环，即会一个元素一个元素的赋值。

后台cs代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;
using System.Data;
using System.Collections;

public partial class VideoSource : System.Web.UI.Page
{
public string[] lat = null;//存放纬度值
public string[] lng = null;//存放经度值
public int lng_len = 0;//用于获得数组长度
public int k = 0;//用于赋值循环
protected void Page_Load(object sender, EventArgs e)
{
ArrayList lng_list = new ArrayList();
ArrayList lat_list = new ArrayList();
OleDbConnection con = new OleDbConnection(@"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + Server.MapPath("App_Data/Database1.accdb"));
con.Open();
string sql = "select * from tb_videos";
try
{
OleDbDataAdapter gh = new OleDbDataAdapter(sql, con);
DataSet ds = new DataSet();
gh.Fill(ds);
con.Close();
foreach (DataRow DR in ds.Tables[0].Rows)
{
lng_list.Add(DR[2].ToString());
lat_list.Add(DR[3].ToString());
}
}
catch
{
con.Dispose();
}
lng = (string[])lng_list.ToArray(typeof(string));
lat = (string[])lat_list.ToArray(typeof(string));
lng_len = lng_list.Count;
}

aspx代码
<script type="text/javascript">
var jingdu = new Array();
var weidu = new Array();
<%
for(int k=0;k<lng_len;k++){
%>
jingdu.push("<%=lng[k]%>");
weidu.push("<%=lat[k]%>");
<%
}
%>
var latlng=[];
for(var i=0;i<jingdu.length;i++){
latlng.push(new google.maps.LatLng(jingdu[i],weidu[i]));
}
</script>
上述代码即为我解决问题所用代码，均已试验通过。