问题描述

是可能的还是在JavaScript中使用Razor语法的解决方法(cshtml)?

我试图将标记添加到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>

推荐答案

使用<text>伪元素，如 a>，将剃须刀编译器恢复到内容模式:

<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最近在剃须刀中发布了关于@:语法，如果您只有一两行Javascript代码要添加，它就比<text>标签稍微笨拙.以下方法可能是可取的，因为它减小了生成的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更正确.

澄清，即使addMarker呼叫看起来很像C#代码，@:将剃须刀恢复到文本模式.然后，剃须刀拾取@item.Property语法，说它应该直接输出这些属性的内容.

更新2

值得注意的是，查看代码确实不是放置JavaScript代码的好地方. JavaScript代码应放置在静态.js文件中，然后应从Ajax调用或通过扫描data-属性从HTML获取所需的数据.除了使您的JavaScript代码缓存您的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);
});

其他推荐答案

我刚刚写了此辅助功能.将其放在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);

注意我如何不围绕它引用.如果标题已经包含引号，则不会爆炸.似乎也很好地处理字典和匿名对象！

其他推荐答案

您正在尝试在圆孔中塞住一个方形钉.

Razor旨在作为HTML生成模板语言.您很可能会得到它来生成JavaScript代码，但不是为此而设计的.

例如:如果Model.Title包含撇号怎么办?那将打破您的JavaScript代码，而Razor不会默认情况下正确逃脱.

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

以上所述是小编给大家介绍的在JavaScript中使用Razor,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对77isp云服务器技术网的支持！