如何在 Java 脚本函数中迭代 @Model.ICollection?
How to iterate over @Model.ICollection in Java Script function?
我有一个 @Model.LoginCoordinates
,其中 LoginCoordinates
是 ICollection<Coordinates>
。
Coordinates
class:
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);
怎么样
<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>
模型只能在呈现视图时在服务器端访问。因此,为了在客户端访问其属性,您需要在 C# (razor) 中迭代集合并生成 HTML 客户端 JavaScript 代码随后可以访问的 HTML。
另一种选择是创建一个控制器方法,该方法 returns 模型为 JSON 并通过 AJAX.
从客户端代码调用它
这应该使用 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>
就其价值而言,此语法可能对某人有用:
@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>
}
我有一个 @Model.LoginCoordinates
,其中 LoginCoordinates
是 ICollection<Coordinates>
。
Coordinates
class:
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);
怎么样
<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>
模型只能在呈现视图时在服务器端访问。因此,为了在客户端访问其属性,您需要在 C# (razor) 中迭代集合并生成 HTML 客户端 JavaScript 代码随后可以访问的 HTML。
另一种选择是创建一个控制器方法,该方法 returns 模型为 JSON 并通过 AJAX.
从客户端代码调用它这应该使用 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>
就其价值而言,此语法可能对某人有用:
@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>
}