在JavaScript中使用Razor

Question

是否可以解决在视图（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>

Answer 1

使用<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代码，它就比标签稍微麻烦一些。以下方法可能更可取，因为它可以减小生成的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＃代码，Razor也会强制返回文本模式。然后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);
});