将列表项从 c# 传递到 javascript 数组

Posted 2023-02-22

【中文标题】将列表项从 c# 传递到 javascript 数组

【英文标题】：pass list item from c# to javascript array

【发布时间】：2012-08-03 08:16:21

【问题描述】：

我有以下代码在 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);

但是运气不好，任何参考资料都会对我有所帮助

【参考方案1】：

基本上我相信你想要做的是创建一个JSON 字符串。 JSON 允许您在多种语言（包括 JavaScript 和 C#）之间传递序列化字符串格式的对象。我建议看看JSON .NET library。这是一个很棒的库，可让您在 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 在您的页面上引用它。还有pretty comprehensive documentation，非常有用！

然后可以在您的 JavaScript 中像任何其他 js 对象一样访问它，如下所示：

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
    );

    // ...

【讨论】：

但这会输出像["Name":"Bondi Beach","Lat":-33.890542,"Lng":151.274856,...]这样的json。不是 OP 想要的。

我已经更新了我的答案，以更好地反映这不仅可以回答问题，还可以应用更好的编码实践。 :)

【参考方案2】：

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

例子：

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

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

return serializer.Serialize(data);

就是这样。

希望能成功

【讨论】：

您甚至不需要引用任何其他 dll。

【参考方案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);

【讨论】：

我已经采取了 并使用您提到的相同代码并尝试将该json字符串设置为隐藏字段并获取js位置变量中的隐藏字段值，但标记没有显示在那里

我也将隐藏字段值与静态值匹配，两者完全相同

【参考方案4】：

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

【讨论】：

你也可以写如var jsVarialbe = <%= JsonConvert.Serialize(list) %> ...不需要隐藏字段

【参考方案5】：

你必须像这样使用它： 在您的控制器中：

 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();

并在您的 java 脚本中像这样使用它：

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

你可以将你的数据放在数组中，并在每个函数中使用它：

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

对于 javascript 而不是 jquery 使用：

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