将C#中的列表项传递到JavaScript数组

Question

我有以下代码用于在Gmap上显示多个标记:

<script type="text/javascript">

        function init() {
            var locations = [
              ['Bondi Beach', -33.890542, 151.274856, 4],
              ['Coogee Beach', -33.923036, 151.259052, 5],
              ['Cronulla Beach', -34.028249, 151.157507, 3],
              ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
              ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(-33.92, 151.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
            return false;
        }
    </script>

我希望让这个变得动态，所以我必须传递这个。

 var locations = [
              ['Bondi Beach', -33.890542, 151.274856, 4],
              ['Coogee Beach', -33.923036, 151.259052, 5],
              ['Cronulla Beach', -34.028249, 151.157507, 3],
              ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
              ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

从C#代码转换为这个JS代码。

我已经尝试了隐藏字段和以下代码：

 List<String> oGeocodeList = new List<String>
                                         {
                                            "'Bondi Beach', -33.890542, 151.274856, 4",
                                            "'Coogee Beach', -33.923036, 151.259052, 5",
                                            "'Cronulla Beach', -34.028249, 151.157507, 3",
                                            "'Manly Beach', -33.80010128657071, 151.28747820854187, 2",
                                            "'Maroubra Beach', -33.950198, 151.259302, 1"
                                        };

        var geocodevalues = string.Join(",", oGeocodeList.ToArray());
        ClientScript.RegisterArrayDeclaration("locations", geocodevalues);

但是我没有任何运气可以帮助我查找参考资料。

- rahularyansharma

Answer 1

我认为你想要做的是创建一个JSON字符串。JSON允许你在多种语言之间以序列化字符串的格式传递对象，包括JavaScript和C#。我建议你看一下JSON .NET库。这是一个很棒的库，可以让你在C#中安全高效地序列化和反序列化项目。

我还建议你不要传递多维数组，而是创建一个更面向对象的结构。为此，你需要为你的位置创建一个类，我会假设如下：

public class Location
{
    public string Name { get; set; }
    public double Lat { get; set; }
    public double Lng { get; set; }
}

您需要构建一个List<Location>，然后使用JSON .NET库对其进行序列化，操作如下：

List<Location> oGeocodeList = new List<Location>() {
    //...
};

string json = JsonConvert.SerializeObject(oGeocodeList);

使用这个JSON，你需要将它写入一个隐藏字段或JavaScript内的变量。然后你可以通过JavaScript在页面上引用它。此外，非常全面的文档也非常有用！

你可以像处理其他js对象一样在JavaScript中访问它：

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].Lat, locations[i].Lng),
        map: map
    });

    // ...
}

- Richard

---

但是这将会输出一个类似于 [{"Name":"邦迪海滩","Lat":-33.890542,"Lng":151.274856},...] 的 JSON。这不是 OP 想要的。 - L.B

我已经更新了我的答案，以更好地反映这不仅可以回答问题，而且适用于更好的编码实践。 :) - Richard

Answer 2

我认为你可以创建一个列表。

例如：

List<T> data = new List<T>();

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

return serializer.Serialize(data);

就是这样。

我希望它能正常工作。

- Moons

---

你甚至不需要引用任何其他的动态链接库（DLL）。 - Moons

Answer 3

使用 Json.Net。

var obj = new[] { 
    new object[] { "Bondi Beach", -33.890542, 151.274856, 4 },
    new object[] { "Coogee Beach", -33.923036, 151.259052, 5 },
    new object[] { "Cronulla Beach", -34.028249, 151.157507, 3 },
    new object[] { "Manly Beach", -33.80010128657071, 151.28747820854187, 2 },
    new object[] { "Maroubra Beach", -33.950198, 151.259302, 1 },
};
var json = JsonConvert.SerializeObject(obj);

- L.B

---

我已经使用与您提到的相同代码，将json字符串设置为隐藏字段并获取js位置变量中的隐藏字段值，但标记未在那里显示。<input type="hidden" id="hdnLink" runat="server"/> - rahularyansharma

我也将隐藏字段的值与静态值进行匹配，两者完全相同。 - rahularyansharma

Answer 4

你需要像这样使用它： 在你的控制器中：

 var locations = [
          ['Bondi Beach', -33.890542, 151.274856, 4],
          ['Coogee Beach', -33.923036, 151.259052, 5],
          ['Cronulla Beach', -34.028249, 151.157507, 3],
          ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 1]
        ];
var locationsString = JsonConvert.SerializeObject(locations);
ViewBag.locationsString = locationsString;
return View();

在你的JavaScript中使用它，像这样：

var data = JSON.parse(@ViewBag.locationsString);

你可以将数据存储在数组中，并在JavaScript的each函数中使用它：

$.each(data, function (i, item) {
//enter your code
}

如果不使用jQuery，可以使用以下JavaScript代码：

for (var i = 0; i < data.length; i++) {
       addMarker(data[i], map);
    }

- Abbas Dehghan

Answer 5

我会使用Json.Net或C# Json编码器将C#编码为Json格式，然后将其写入隐藏字段。然后在JavaScript端使用Json2进行解码。

- Liam

---

你也可以这样写，例如var jsVariable = <%= JsonConvert.Serialize(list) %>，不需要使用hiddenfield。 - user57508