使用<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);
});