将列表从 c# 传递到 asp.net 并且它没有获取数据答案

【问题标题】：passing in list from c# to asp.net and it's not getting the data将列表从 c# 传递到 asp.net 并且它没有获取数据
【发布时间】：2013-04-01 16:28:51
【问题描述】：

我做出了 Mikey 建议不要使用 Session 的更改，但我的地图上仍然没有得到任何东西

我正在向我的 ASP 页面传递一个谷歌地图的经纬度列表，如下所示：

  public List<string> GetLatLonList()
  {
        var list = new List<string>();
        list.Add("43.169582 , -76.823404");
        list.Add("43.169133 , -76.822956");
        list.Add("43.169115 , -76.821818");
        list.Add("43.169151 , -76.820488");
        list.Add("43.170049 , -76.820424");
        return string.Join(";", list.ToArray());
      }

这是我的 asp.net 页面：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MultipleMarker.aspx.cs" Inherits="MultipleMarker" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>



<script type ="text/javascript">
  var map; var infowindow;
  var latlons = 'System.Collections.Generic.List`1[System.String]';

    function InitializeMap() {

      var latlng = new google.maps.LatLng(latlons[0]);
      console.log("latlng:" + latlng);
        var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    }

    function markicons() {

        InitializeMap();

        var ltlng = [];

      //        ltlng.push(new google.maps.LatLng(17.22, 78.28));
      //        ltlng.push(new google.maps.LatLng(13.5, 79.2));
      //        ltlng.push(new google.maps.LatLng(15.24, 77.16));

        var length = latlons.length;
        for (var i = 0; i < length; i++) {
          console.log(latlons[i]);
          ltlng.push(new google.maps.LatLng(latlons[i]));
        }

        map.setCenter(ltlng[0]);
        for (var i = 0; i <= ltlng.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                position: ltlng[i]
            });

            (function (i, marker) {

                google.maps.event.addListener(marker, 'click', function () {

                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    infowindow.setContent("Message" + i);

                    infowindow.open(map, marker);

                });

            })(i, marker);

        }

    }

    window.onload = markicons; 

</script>
<h2>Multiple Markers Demo:</h2>
<div id ="map"   
        style="width: 80%; top: 51px; left: 32px; position: absolute; height: 80%">

</div>
</asp:Content>

屏幕上没有内容。它提出了一张空白地图。我没有收到任何 javascript 错误，所以我不确定它为什么不起作用。

这是我第一次尝试 javascript。有人知道我为什么会遇到问题吗？

编辑 #2 以回应 Mikey

这是运行时页面的来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form method="post" action="MultipleMarker.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjhkZOATrmZzTn3jrg2qYoyIsT7K8EJcig29Z1QzbaXOQK0d" />
</div>

    <div>

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



<script type ="text/javascript">
  var map; var infowindow;
  var latlons = 'System.Collections.Generic.List`1[System.String]';

    function InitializeMap() {

      var latlng = new google.maps.LatLng(latlons[0]);
      console.log("latlng:" + latlng);
        var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    }

    function markicons() {

        InitializeMap();

        var ltlng = [];

      //        ltlng.push(new google.maps.LatLng(17.22, 78.28));
      //        ltlng.push(new google.maps.LatLng(13.5, 79.2));
      //        ltlng.push(new google.maps.LatLng(15.24, 77.16));

        var length = latlons.length;
        for (var i = 0; i < length; i++) {
          console.log(latlons[i]);
          ltlng.push(new google.maps.LatLng(latlons[i]));
        }

        map.setCenter(ltlng[0]);
        for (var i = 0; i <= ltlng.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                position: ltlng[i]
            });

            (function (i, marker) {

                google.maps.event.addListener(marker, 'click', function () {

                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    infowindow.setContent("Message" + i);

                    infowindow.open(map, marker);

                });

            })(i, marker);

        }

    }

    window.onload = markicons; 

</script>
<h2>Multiple Markers Demo:</h2>
<div id ="map"   
        style="width: 80%; top: 51px; left: 32px; position: absolute; height: 80%">

</div>

    </div>
    </form>
</body>
</html>

【问题讨论】：

当您加载页面时，您可以“查看源代码”来查看您实际输出的内容。此外，您不需要（也不应该使用） Session 变量来执行此操作。您可以将“受保护的字符串 getLatLonList”方法添加到后面的代码中，该方法返回您要用来表示列表的字符串。您可以通过执行而不是将其插入 javascript。
感谢您的信息，不知道您可以这样做。我已经进行了更改，但我仍然没有在地图上看到任何内容。
@ErocM 查看源输出是什么？很可能 C# 方法没有以 javascript 可以自行解释的格式返回列表...
是的，如果您的方法返回列表的字符串表示形式，而不是列表本身，那么您将更接近解决方案。 dotnetperls.com/convert-list-string
感谢您的意见。我已经发布了来源。我在找什么？

标签： javascript asp.net google-maps-api-3

【解决方案1】：

请通过以下链接。在这篇文章中，我将复杂的数据传递给图表 API。你可以从这篇文章中获得灵感。

How to used google chart in asp.net[google chart]

【讨论】：

我在表单中添加了<asp:HiddenField ID="hdData" runat="server" />，但仍然显示 hdData 未定义。
我的页面加载和你的一样，hdData是在哪里定义的？
在表单部分

【解决方案2】：

您似乎在不理解它们的情况下将内容 CTRL-V-ing 到您的页面中...下面的方法将使您更接近..

在你的代码后面：

public string getLatLonList()
{
        var list = new List<string>();
        list.Add("[43.169582 , -76.823404]"); // this is the center
        list.Add("[43.169133 , -76.822956]"); // these are the marks
        list.Add("[43.169115 , -76.821818]");
        list.Add("[43.169151 , -76.820488]");
        list.Add("[43.170049 , -76.820424]");
        return string.Join(",", list.ToArray());    
        // TODO:  cache the above list so you're not always creating it..  
        // e.g. create the list on Page_Load and simply return its string representation in this method..
}

然后在你的 aspx 中：

var latlons = [<%= getLatLonList() %>];
function InitializeMap() {

  var latlng = new google.maps.LatLng(latlons[0][0], latlons[0][1]);
  console.log("latlng:" + latlng);

你需要调试它..

这是另一个 javascript 函数：

function markicons() {
    InitializeMap();

    // TODO: ensure there at least 2 items in the latlons list...
    for (var i = 1; i < latlons.length; i++) {
        marker = new google.maps.Marker({
            map: map,
            position: latlons[i][0], latlons[i][1]
        });

        (function (i, marker) {

            google.maps.event.addListener(marker, 'click', function () {

                if (!infowindow) {
                    infowindow = new google.maps.InfoWindow();
                }

                infowindow.setContent("Message" + i);

                infowindow.open(map, marker);

            });

        })(i, marker);

    }

}

【讨论】：

latlons 变量有些问题。当我做 'console.log("latlng:" + latlng);'它正在返回“latlng:(NaN, NaN)”。我已经用这些更改更新了我的帖子。
实际上不要输入“var latlons = 'System.Collections.Generic.List`1[System.String]';”进入你的aspx页面！那只是为了突出显示输出到用户页面的内容（这是最初的问题）。我为你更新了我的答案。