在 JavaScript 中使用 Razor

IT技术 javascript asp.net-mvc razor
2021-02-08 20:09:01

在视图 ( cshtml)中的 JavaScript 中使用 Razor 语法是否可能或是否有解决方法

我正在尝试向 Google 地图添加标记......例如,我尝试过这个,但我收到了大量的编译错误:

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.

    // Now add markers
    @foreach (var item in Model) {

        var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
        var title = '@(Model.Title)';
        var description = '@(Model.Description)';
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
</script>
6个回答

使用<text>伪元素,如所描述这里,迫使剃刀编译器返回到内容模式:

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.


    // Now add markers
    @foreach (var item in Model) {
        <text>
            var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
            var title = '@(Model.Title)';
            var description = '@(Model.Description)';
            var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: latLng,
                title: title,
                map: map,
                draggable: false
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        </text>
    }
</script>

更新:

Scott Guthrie 最近发布了关于@:Razor 语法的文章,<text>如果您只需要添加一两行 JavaScript 代码,Razor 会比标签稍微笨拙一些以下方法可能更可取,因为它减少了生成的 HTML 的大小。(您甚至可以将 addMarker 函数移动到静态、缓存的 JavaScript 文件以进一步减小大小):

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

更新了上面的代码,使调用addMarker更正确。

澄清一下,@:强制 Razor 回到文本模式,即使addMarker调用看起来很像 C# 代码。然后 Razor 选择@item.Property语法说它应该直接输出这些属性的内容。

更新 2

值得注意的是,View 代码确实不是放置 JavaScript 代码的好地方。JavaScript 代码应该放在一个静态.js文件中,然后它应该从 Ajax 调用或通过扫描data-HTML 中的属性来获取它需要的数据除了可以缓存 JavaScript 代码之外,这还避免了编码问题,因为 Razor 旨在为 HTML 编码,而不是为 JavaScript 编码。

查看代码

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

JavaScript 代码

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});
@NVM:我建议创建一个 javascript 函数(可以保存在缓存的 .js 文件中),而不是多次输出相同的 javascript 代码,并输出对该函数的多次调用。我不知道这个函数是否正确:我只是基于 OP 的代码。
2021-03-14 20:09:01
我不明白你更新的例子。addmarker 函数是否正确?
2021-03-20 20:09:01
为什么在 foreach 中使用“@Model.Latitude”。为什么不是 item.Latitude?
2021-03-22 20:09:01
@Mark:很好的观察。事实上,我通常不结合JavaScript和剃须刀在我自己的代码:我更喜欢用剃刀与生成HTMLdata-属性,然后用静态的,不显眼的JavaScript来搜集从DOM这一信息。但是整个讨论有点超出了问题的范围。
2021-03-24 20:09:01
您的 C# 变量需要转义。如果@item.Title包含单引号,此代码将爆炸。
2021-04-07 20:09:01

我刚刚写了这个辅助函数。把它放进去App_Code/JS.cshtml

@using System.Web.Script.Serialization
@helper Encode(object obj)
{
    @(new HtmlString(new JavaScriptSerializer().Serialize(obj)));
}

然后在您的示例中,您可以执行以下操作:

var title = @JS.Encode(Model.Title);

注意我没有在它周围加上引号。如果标题已经包含引号,它不会爆炸。似乎也能很好地处理字典和匿名对象!

PJH 的评论很棒。以某种方式将服务器端模型反序列化为 javascript 块。
2021-03-12 20:09:01
你能扩展你的答案 PJH 吗?如果你只是编码“模型”,你如何指定标题?
2021-03-15 20:09:01
另外,当我用 Model.Title 尝试这种方法时,我在编码的 javascript 周围得到了一些额外的引号。即使我将它连接到其他东西,我也无法摆脱引号。这些引号成为你的 js 的一部分。
2021-03-15 20:09:01
如果您尝试对视图中的对象进行编码,则无需创建辅助代码,因为该代码已经存在。我们一直使用这个@Html.Raw(Json.Encode(Model))
2021-04-01 20:09:01

您正试图将方钉塞入圆孔中。

Razor 旨在作为一种生成 HTML 的模板语言。您很可能会使用它来生成 JavaScript 代码,但它并不是为此而设计的。

例如:如果Model.Title包含撇号怎么办?这会破坏您的 JavaScript 代码,并且默认情况下 Razor 不会正确转义它。

在辅助函数中使用字符串生成器可能更合适。这种方法的意外后果可能会更少。

您看到了哪些具体错误?

像这样的东西可以更好地工作:

<script type="text/javascript">

//now add markers
 @foreach (var item in Model) {
    <text>
      var markerlatLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude);
      var title = '@(Model.Title)';
      var description = '@(Model.Description)';
      var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'
    </text>
}
</script>

请注意,您需要在<text>之后的神奇标记foreach来指示 Razor 应切换到标记模式。

迭代模型(通过foreach)并标记@Model.Latidue?什么是迭代函数?我认为错过了一些东西。它可能是@item.Latitude 等
2021-04-02 20:09:01

只要它在 CSHTML 页面中而不是外部 JavaScript 文件中,就可以正常工作。

Razor 模板引擎并不关心它输出的是什么,也不区分<script>其他标签。

但是,您需要对字符串进行编码以防止XSS攻击。

@raklos:您需要转义字符串。称呼HTML.Raw(Server.JavaScriptStringEncode(...))
2021-03-10 20:09:01
HTML.Raw(HttpUtility.JavaScriptStringEncode(...))-服务器属性现在没有这个方法。HttpUtility可以。
2021-03-11 20:09:01
@HMR:当我写这个答案时,那个功能不存在。
2021-03-26 20:09:01
The Razor template engine doesn't care what it's outputting and does not differentiate between <script> or other tags.你确定是这样吗?stackoverflow.com/questions/33666065/...
2021-04-02 20:09:01
我已经更新了我的问题,它对我不起作用 - 有什么想法有什么问题吗?谢谢
2021-04-03 20:09:01