如何将 ASP.NET 中继器项传递给 JavaScript 数组？

Question

在我的 aspx 页面上，我有一个中继器控件，它显示数据库中位置的纬度。我想将从中继器返回的值传递到 java 脚本中，该脚本在 sql server 数据库的谷歌地图上显示位置标记。

 <form id="form1" runat="server">

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var markers = [
        <asp:Repeater ID="rptMarkers" runat="server">
        <ItemTemplate>
                 {
                "title": '<%# Eval("City") %>',
                 "lat": '<%# Eval("Latitude") %>',
                 "lng": '<%# Eval("Longitude") %>',

             }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
    ];
    </script>
   </form>

这是我的代码，

 void GetData(string strRsult)
{
    XmlDataDocument xmlDataDoc = new XmlDataDocument();
    xmlDataDoc.LoadXml(strRsult);
    foreach (XmlNode n in xmlDataDoc.DocumentElement.GetElementsByTagName("Property"))
    {
        if (n.HasChildNodes)
        {
          List<Markers> markers = new List<Markers>();
            foreach (XmlNode childNode in n)
            {
                if (childNode.Name=="GEOData")
                {
                    markers.Add(new Markers
                    {
                        City = childNode.Attributes["City"].Value,
                        Longitude = childNode.Attributes["Longitude"].Value,
                        Latitude = childNode.Attributes["Latitude"].Value
                    });
                }

            }
            rptMarkers.DataSource = markers;
            rptMarkers.DataBind();
        }

    }

Answer 1

代码背后

//Retrieves markers from somewhere and converts them to a JSON string
public string GetMarkersJson()
{
    List<Marker> markers = GetData("string");
    return JsonConvert.SerializeObject(markers); //using JSON.NET for serialization
}

//Parses an XML string and retrieves a list of Marker objects. Should probably go in a utility class somewhere, not in code behind
List<Marker> GetData(string strRsult)
{
    List<Marker> markers = new List<Marker>();
    XmlDataDocument xmlDataDoc = new XmlDataDocument();
    xmlDataDoc.LoadXml(strRsult);
    foreach (XmlNode n in xmlDataDoc.DocumentElement.GetElementsByTagName("Property"))
    {
        if (n.HasChildNodes)
        {
            foreach (XmlNode childNode in n)
                {
                    if (childNode.Name=="GEOData")
                    {
                        markers.Add(new Marker
                        {
                            City = childNode.Attributes["City"].Value,
                            Longitude = childNode.Attributes["Longitude"].Value,
                            Latitude = childNode.Attributes["Latitude"].Value
                        });
                    }
                }
            }
    return markers;
}

型号

//Represents the data needed for each marker, with JSON.NET attributes to account for different property names we want to use in the JSON
public class Marker
{
    [JsonProperty(PropertyName = "title")]
    public string City {get; set;}

    [JsonProperty(PropertyName = "lat")]
    public string Latitude {get; set;}

    [JsonProperty(PropertyName = "lng")]
    public string Longitude {get; set;}
}

页面

//Embed the JSON into the page and have JavaScript parse it
var markers = JSON.parse('<%= GetMarkersJson() %>');

Answer 2

你的 aspx 代码

<form id="form1" runat="server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<asp:literal runat="server" id="Literal1"></asp:literal>
</form>

你的 aspx.cs 代码

    //Parses an XML string and retrieves a list of Marker objects. Should probably go in a utility class somewhere, not in code behind
    protected void GetData(string strRsult)
    {
        List<Marker> markers = new List<Marker>();
        XmlDataDocument xmlDataDoc = new XmlDataDocument();
        xmlDataDoc.LoadXml(strRsult);
        //This line write script init in your html page
        Literal1.text = "<script type=\"text/javascript\">var markers = [";

        foreach (XmlNode n in xmlDataDoc.DocumentElement.GetElementsByTagName("Property"))
        {
            if (n.HasChildNodes)
            {
//for any item you write directly the element{ tile:'yourTile', lat:'yourLat', lng:'yourLng' }
                foreach (XmlNode childNode in n)
                    {
                        if (childNode.Name=="GEOData")
                        {
                            literal1.text += "{title: '"+childNode.Attributes["City"].Value+"', lat: '"+childNode.Attributes["Longitude"].Value+"', lng: '"+childNode.Attributes["Latitude"].Valu+"'}";                        
                        }
                    }
            }
        }
        //Write the scripts end
        Literal1.text += "];</script>";
    }