在JavaScript中使用Razor

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

回答:

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

});

以上是 在JavaScript中使用Razor 的全部内容, 来源链接: utcz.com/qa/433985.html

回到顶部