Как перебрать @Model.ICollection в функции Java Script?

Question

У меня есть @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>

Но я не могу получить доступ i элемент LoginCoordinates потому что это так ICollection, Также я верю, что foreach невозможен - это объект C#.

Вопрос: как перебрать ICollection внутри JavaScript?

РЕДАКТИРОВАТЬ

Это выше 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);

Answer 1

Это должно сделать это с помощью JsonConvert от newtonsoft.json

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

Answer 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>

Answer 3

Модель доступна только на стороне сервера во время визуализации представления. Поэтому, чтобы получить доступ к его свойствам на стороне клиента, вам нужно будет выполнить итерацию по коллекции в C# (бритва) и сгенерировать HTML-код, к которому затем сможет обращаться код JavaScript на стороне клиента.

Другой альтернативой может быть создание метода контроллера, который возвращает модель в виде JSON и вызывает ее из кода на стороне клиента через AJAX.

Answer 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>
     }