如何在 Javascript 函数中迭代 @Model.ICollection？答案

【问题标题】：How to iterate over @Model.ICollection in Java Script function?如何在 Javascript 函数中迭代 @Model.ICollection？
【发布时间】：2015-06-16 16:01:06
【问题描述】：

我有一个@Model.LoginCoordinates，其中LoginCoordinates 是ICollection<Coordinates>。

Coordinates 类：

public class Coordinates {
    public int Id { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

在我的视图中：

<script>
    function f(){
       for (var i = 0, n  = @Model.LoginCoordinates.Count; i < n; i++) {
                    alert(i);//works fine, I just wanted to check if the loop works at all
       }
    }
</script>

它工作正常，但我想显示所有的做：

 <script>
     function f(){
          for (var i = 0, n  = @Model.LoginCoordinates.Count; i < n; i++) {
                  var latitute = @Model.LoginCoordinates[i].Latitude;
                  var longituted = @Model.LoginCoordinates[i].Longitude;
         }
     }
</script>

但我无法访问LoginCoordinates 的i 元素，因为它是ICollection。我也相信 foreach 是不可能的，因为它是 c# 对象。

问题：如何在JavaScript 中迭代ICollection？

编辑

上面这个是SSCCE，真正的代码是；

  var map;
    function InitializeMap() {
        alert('works');
        var lat = @Model.LoginCoordinates.First().Latitude;
        var lon = @Model.LoginCoordinates.First().Longitude;
        var latlng = new google.maps.LatLng(lat, lon);
        var mapOptions =
        {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions); //this breaks the script

    }
    window.addEventListener('load', InitializeMap);

【问题讨论】：

请问您需要如何处理这些没有javascript 无法在视图中完成的数据？
@area28 我想在谷歌地图上显示这个集合中的所有坐标。所以我想迭代它并为该循环内的每个纬度和经度对创建标记。
我曾尝试在 dotnetfiddle 中使用类似的数据集，但无法使其正常工作。一种解决方法是将坐标放在 DOM 上的某个位置并使用 javascript 访问它们。
@area28 请看看我的编辑。在将这个 ICollection 转换为 foreach 循环内的 String[] 之后，也许有可能将字符串数组传递给 java 脚本。

标签： javascript .net asp.net-mvc razor icollection

【解决方案1】：

这应该使用来自 newtonsoft.json 的JsonConvert 来完成

<script>
var coordinatesJson='@Html.Raw(JsonConvert.Serialize(Model.LoginCoordinates.ToArray())'

var coordinates=JSON.parse(coordinatesJson);

//you now have coordinates as javascript  object

var map;
function InitializeMap() {
    // could loop over if needed
     for(var coords in coordinates) {
        // do something with coords
     }
</script>

【讨论】：

你知道为什么 for in 循环永远不会结束吗？该循环内的警报有效，但在它之后却没有。
改成for(var i=0;i<coords.length;++i)也一样？
不，我忘了说。我在评论后一分钟将其更改为您在评论中显示的版本。

【解决方案2】：

怎么样

<script>
 function f(){
     var coordinates= @Model.LoginCoordinates.ToArray();
     for (var i = 0, n  = coordinates.Length; i < n; i++) {
              var latitute = coordinates[i].Latitude;
              var longituted = coordinates[i].Longitude;
     }
 }
</script>

【讨论】：

我也相信这在 javascript 中对你不起作用，因为你不能将你的 c# 代码与 javascript 混合。如果您还没有找到答案，请再次询问我。
这一行：var coordinates= @Model.LoginCoordinates.ToArray(); 破坏了脚本，我找不到异常或编译错误（在 chrome 控制台中），但是当我添加这一行时，我的函数内部的警报停止工作。
请注意我在原帖中的编辑。

【解决方案3】：

模型只能在渲染视图时在服务器端访问。因此，为了在客户端访问其属性，您需要在 C# (razor) 中迭代集合并生成客户端 JavaScript 代码随后可以访问的 HTML。

另一种选择是创建一个控制器方法，将模型作为 JSON 返回并通过 AJAX 从客户端代码调用它。

【讨论】：

【解决方案4】：

不管怎样，这个语法可能对某人有用：

      @section Scripts {
      <script type="text/javascript">  
        @if (Model.LoginCoordinates.Any())
        {
            //C# loop over C# object
            foreach (var point in Model.LoginCoordinates)
            {
                //We are mixing C# and JS code here
                //you could call google's JS API, but still work with C# object properties
                @:console.log(@point.Latitude, @point.Longitude);
            }
        }
      </script>
     }

【讨论】：