在 razor foreach 循环中创建 JavaScript 元素答案

【问题标题】：Create JavaScript element within razor foreach loop在 razor foreach 循环中创建 JavaScript 元素
【发布时间】：2018-04-16 22:05:47
【问题描述】：

我正在使用OpenStreetMap 将搜索结果添加到地图中。对于每个返回的搜索结果，我需要在地图上绘制纬度和经度：

L.marker([39.616886,-86.310997]).addTo(map)
.bindPopup('the institutions name')
.openPopup();

如何在 forEach 循环中执行此操作？这是我尝试过的，但出现错误：

名称 L 在当前上下文中不存在。

@foreach (var u in Model.listschools)
{
    L.marker([@u.lat, @u.longt]).addTo(map)
        .bindPopup(@u.instnm)
    .openPopup();
}

【问题讨论】：

先将模型转换为 javascript 数组 - var list = @Html.Raw(Json.Encode(Model.listschools));，然后在脚本中循环
@StephenMuecke 为什么要这样做？像 OP 一样在 C# 中执行此操作要好得多，除非您想节省服务器资源并让客户端的机器完成工作。对于这种没有处理的简单代码，如果有的话，也没有什么可保存的，所以根本不值得考虑。
尝试用<text></text>标签包裹它。
@RacilHilan - 你是认真的 - OP 代码是 javascript！
@StephenMuecke 是的，我是认真的，我看起来像在开玩笑吗？ :)。不，OP 的代码不是 JavaScript。它是 C# Razor 和 JavaScript 的混合体。那你的意思是什么？ :P

标签： javascript c# .net asp.net-mvc razor

【解决方案1】：

Razor 将 @foreach 中的代码视为 C# 代码，因此您需要告诉它它不是。一种方法是将其放在<text></text> 之间：

@foreach (var u in Model.listschools)
{
    <text>L.marker([@u.lat, @u.longt]).addTo(map)
           .bindPopup('@u.instnm')
           .openPopup();</text>
}

另请注意，您忘记了这一行的引号：

.bindPopup('@u.instnm')

【讨论】：

.marker()、.addTo()、.bindPopup() 和 .openPopup() 是来自 OpenLayers 库的 JavaScript 函数。 OP 希望在地图上为Model.listschools 中的每个纬度/经度坐标创建标记。 @StephenMuecke 在他对帖子的原始评论中指出了如何做到这一点。
是的，我知道，他想在foreach 循环中生成 JavaScript 代码。 Stephen Muecke 的方式也可以完成这项工作，但这不是唯一的方式，也不是 OP 所要求的。 OP 明确询问如何在 JavaScript 代码中插入模型值。无论如何，我的回答也可以，所以你为什么认为它是错误的？你可以赞成 Stephen Muecke 的方式，但这并没有让我错。
我认为这个答案比 StephenMuecke 的评论/解决方案更接近 OP 的实际问题，尽管我同意它可以通过任何一种方式完成。 OP 得到的原始错误是因为缺少 <text> 标签，但 @RacilHilan 也发现了缺少的引号。
我明白你的意思。我想我一直认为在 JavaScript 中编写 C# 是不好的做法，但它仍然可以工作。
@mhodges 不好的做法？为什么？ Stephen Muecke 也在用 JavaScript 编写 C#：P。他将序列化的结果分配给了一个 JavaScript 变量，不是吗？在很多情况下，您甚至无法避免在 JavaScript 行之间插入 C# 代码。它绝对没有错。但就像我在对 Stephen 的评论中所说的那样，如果您希望将代码保留为一种语言（尽可能），那么当然，以您喜欢的方式进行。但是说其他方式是错误的，而不是OP想要的？看来你改变了你的态度，这是受欢迎的:)