在JavaScript中使用Razor

在JavaScript中使用Razor

使用

<text>

伪元素，如所描述这里，迫使剃刀编译器返回到内容模式：

<script type="text/javascript">    // Some Javascript pre 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 pre 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.Enpre(item)"></div>}

Javascript代码

$('[data-marker]').each(function() {    var markerData = $(this).data('marker');    addMarker(markerData.Latitude, markerData.Longitude,   markerData.Description, markerData.Title);});