在MVC中的javascript中嵌套foreach答案

【问题标题】：Nested foreach in javascript in MVC在MVC中的javascript中嵌套foreach
【发布时间】：2020-08-19 01:01:29
【问题描述】：

我正在创建一个 ASP.NET MVC 应用程序，我在其中显示带有数据库坐标的谷歌地图。我是这方面的新手，我遇到了嵌套 foreach 循环的问题...... 在 C# Razor 页面上，我有一个 JavaScript 函数“Initialize”，在该函数中，我循环遍历包含坐标的对象数组，并根据它们创建一条折线，然后将其添加到地图中。这工作正常，代码如下所示：

var latLongCoordinates =
[
    @foreach(var itemFlightState in Model.QARFlights[0].FlightStates)
    {
        <text> new google.maps.LatLng(@itemFlightState.PresentPosLatDec.ToString().Replace(",", "."), 
               @itemFlightState.PresentPosLongDec.ToString().Replace(",", ".")),</text>
    }
];

var flightPath = new google.maps.Polyline({
    path: latLongCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

flightPath.setMap(map);

但是，我需要显示几条不同的折线（每个航班一条），因此需要使用嵌套的 foreach 循环来实现这一点，但它不起作用。我想用另一个 foreach 循环围绕上面的示例来绘制所有航班，而不仅仅是上面示例中索引为 0 的航班。以下是我想做的：

@foreach (var itemQARFlight in Model.QARFlights) {
    var latLongCoordinates =
    [
        @foreach(var itemFlightState in itemQARFlight.FlightStates)
        {
            <text> new google.maps.LatLng(@itemFlightState.PresentPosLatDec.ToString().Replace(",", "."), 
                   @itemFlightState.PresentPosLongDec.ToString().Replace(",", ".")),</text>
        }
    ];

    var flightPath = new google.maps.Polyline({
        path: latLongCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
}

当添加周围的@foreach 时，下面的所有内容都会变成红色，并且解析器似乎不再理解我的意思了。

对不起，如果这是一个微不足道的问题，但我真的无法解决它。任何帮助将不胜感激！此致乌尔丽卡

【问题讨论】：

标签： c# asp.net-mvc razor foreach nested

【解决方案1】：

请注意，@foreach 会将您带回 C#，因此您需要将 JavaScript 再次包装在 <text> 中。

@foreach (var itemQARFlight in Model.QARFlights) {
    <text>
        var latLongCoordinates =
        ...
        flightPath.setMap(map);
    </text>
}

【讨论】：