使用中的JavaScript剃刀 [英] Using Razor within JavaScript
问题描述
是否有可能或有使用在JavaScript是在一个视图剃刀语法的解决方法（ CSHTML ）？
我试图标记添加到谷歌地图...例如，我想这一点，但我得到一吨的编译错误的：
＆LT;脚本类型=文/ JavaScript的＆GT; //此处一些JavaScript code来显示地图等。 //现在添加标记
@foreach（以型号VAR项）{ VAR markerlatLng =新google.maps.LatLng（@（Model.Latitude），@（Model.Longitude））;
VAR标题='@（Model.Title）';
Var描述=@（Model.Description）';
VAR contentString ='＆LT; H3＆GT;' +标题+'＆LT; / H3和GT;' +'＆所述p为H.;' +说明书+'＆LT; / P＆GT;' VAR信息窗口=新google.maps.InfoWindow（{
内容：contentString
}）; VAR的标记=新google.maps.Marker（{
位置：的latLng，
标题：标题，
地图：地图，
可拖动：假的
}）; google.maps.event.addListener（标记，'点击'，功能（）{
infowindow.open（地图，标记）;
}）;
}
＆LT; / SCRIPT＆GT;
使用＆LT;文字和GT; 伪元素，描述<一个href=\"http://stackoverflow.com/questions/4045308/razor-syntax-and-javascript/4047382#4047382\">here,给力的剃刀编译器放回内容模式：
＆LT;脚本类型=文/ JavaScript的＆GT; //此处一些JavaScript code来显示地图等。
//现在添加标记
@foreach（以型号VAR项）{
＆LT;文字和GT;
VAR markerlatLng =新google.maps.LatLng（@（Model.Latitude），@（Model.Longitude））;
VAR标题='@（Model.Title）';
Var描述=@（Model.Description）';
VAR contentString ='＆LT; H3＆GT;' +标题+'＆LT; / H3和GT;' +'＆所述p为H.;' +说明书+'＆LT; / P＆GT;' VAR信息窗口=新google.maps.InfoWindow（{
内容：contentString
}）; VAR的标记=新google.maps.Marker（{
位置：的latLng，
标题：标题，
地图：地图，
可拖动：假的
}）; google.maps.event.addListener（标记，'点击'，功能（）{
infowindow.open（地图，标记）;
}）;
＆LT; /文字和GT;
}
＆LT; / SCRIPT＆GT;
更新：
<一个href=\"http://weblogs.asp.net/scottgu/archive/2010/12/15/asp-net-mvc-3-razor-s-and-lt-text-gt-syntax.aspx\">Scott格思里最近发布约 @：在剃刀语法，这是稍微比＆LT少笨重;文本＆GT; 标签，如果你只需要JavaScript的code的一行或两行的补充。以下方法很可能是preferable，因为它降低了生成的HTML的大小。 （你甚至可以移动addMarker函数为静态，缓存JavaScript文件以进一步减小大小）：
＆LT;脚本类型=文/ JavaScript的＆GT; //此处一些JavaScript code来显示地图等。
...
//声明addMarker功能
功能addMarker（纬度，经度，标题，描述，图）
{
VAR的latLng =新google.maps.LatLng（纬度，经度）;
VAR contentString ='＆LT; H3＆GT;' +标题+'＆LT; / H3和GT;' +'＆所述p为H.;' +说明书+'＆LT; / P＆GT;'; VAR信息窗口=新google.maps.InfoWindow（{
内容：contentString
}）; VAR的标记=新google.maps.Marker（{
位置：的latLng，
标题：标题，
地图：地图，
可拖动：假的
}）; google.maps.event.addListener（标记，'点击'，功能（）{
infowindow.open（地图，标记）;
}）;
} //现在添加标记
@foreach（以型号VAR项）{
@：addMarker（@ item.Latitude，@ item.Longitude，@ item.Title'，'@ item.Description'，地图）;
}
＆LT; / SCRIPT＆GT;
的更新上述code键使调用 addMarker 更正确。的
要澄清一下，在 @ 力量剃刀背到文本模式，即使 addMarker 调用看起来很像C＃code。剃刀然后拿起 @ item.Property 语法地说，它应该直接输出这些属性的内容。
更新2
这是值得注意的是，查看code真的是不把JavaScript的code的好地方。 JavaScript的code应该被放置在一个静态的.js 文件，然后将它应该得到它需要无论是从一个Ajax调用或通过扫描<$ C $的数据C>数据 - 从HTML属性。除了从而可以缓存你的JavaScript code，这也避免了问题同编码，因为剃须刀的设计EN code为HTML，而不是JavaScript的。
查看code
@foreach（以型号VAR项）
{
＆LT; DIV数据标记=@ Json.En code（项目）＆GT;＆LT; / DIV＆GT;
}
的JavaScript code
$（'[数据标志]'）。每个（函数（）{
VAR markerData = $（本）。数据（'标记'）;
addMarker（markerData.Latitude，markerData.Longitude，
markerData.Description，markerData.Title）;
}）;
Is it possible or is there a workaround to use Razor syntax within JavaScript that is in a view (cshtml)?
I am trying to add markers to a Google map... For example, I tried this, but I'm getting a ton of compilation errors:
<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>
Use the <text> pseudo-element, as described here, to force the Razor compiler back into content mode:
<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>
Update:
Scott Guthrie recently posted about @: syntax in Razor, which is slightly less clunky than the <text> tag if you just have one or two lines of JavaScript code to add. The following approach would probably be preferable, because it reduces the size of the generated HTML. (You could even move the addMarker function to a static, cached JavaScript file to further reduce the size):
<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>
Updated the above code to make the call to addMarker more correct.
To clarify, the @: forces Razor back into text mode, even though addMarker call looks a lot like C# code. Razor then picks up the @item.Property syntax to say that it should directly output the contents of those properties.
Update 2
It's worth noting that View code really isn't a good place to put JavaScript code. JavaScript code should be placed in a static .js file, and then it should get the data that it needs either from an Ajax call or by scanning data- attributes from the HTML. Besides making it possible to cache your JavaScript code, this also avoids issues with encoding, since Razor is designed to encode for HTML, but not JavaScript.
View Code
@foreach(var item in Model)
{
<div data-marker="@Json.Encode(item)"></div>
}
JavaScript code
$('[data-marker]').each(function() {
var markerData = $(this).data('marker');
addMarker(markerData.Latitude, markerData.Longitude,
markerData.Description, markerData.Title);
});
这篇关于使用中的JavaScript剃刀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
