javascript - 将参数从模型传递到 JavaScript

Question

所以我在 asp.net MVC4 地理定位项目中工作，我的 foreach 循环遇到问题，我的 map 只显示最后一个位置，这是我的观点代码:

@model  List<AgencyWebApplication.Models.HomeModel>
 @foreach(var ch in Model)
    {
    <script>
        var city = '@Html.Raw(ch.adress)';
        var attitude = '@Html.Raw(ch.attitude)';
        var longitude = '@Html.Raw(ch.longidue)';
        var indice = '@Html.Raw(ch.indice)';
        var array = [[city, attitude, longitude, indice]];
    </script>
    }
    <script src="@Url.Content("~/Scripts/Map.js")" type="text/javascript"></script>
    <input type="submit" name="Go" value="Go" onclick="getMap(array)" />
    <div id="map_canvas" style="width:600px; height:400px"></div>

这是我的 map 脚本代码:

function getMap(array) {

var myLatlng = new google.maps.LatLng(35.728329, -5.882750);
var mapOptions = {
    center: myLatlng,
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

setMarkers(map, array);
}

function setMarkers(map, locations) {

for (var i = 0; i < locations.length; i++)
{
    var place = locations[i];
    var myLatLng = new google.maps.LatLng(place[1], place[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: place[0],
        zIndex: place[3]
    });
}
return marker;
}

所以，如果您有任何想法，我将非常感激。

Answer 1

将模型序列化为 View 模型属性并将其放入脚本中，例如

public class Geo{
 public string city{get;set;}
 public Decimal lat{get;set;}
 public Decimal lng {get;set;}
}

和 View 模型

public class ViewModel{
 //other props
 public string GeoData{get;set;}
}

从数据库中填充它

 var ViewModel vm = new ViewModel();
 vm.GeoData = new JavaScriptSerializer.serialze(/*get the Geo data and pass it here*/);

现在在 View 中

<script>
 var geoData = $.parseJSON('@Html.Raw(Model.GeoData)');
 //here you can iterate the geo data and make use of it 
</script>

未测试的代码可能包含一些语法错误，建议使用 Json.Net用于序列化