它是可能的,或有一个工作区,以使用Razor语法在JavaScript中,是在一个视图(cshtml)?

我正在尝试添加标记到谷歌地图…例如,我尝试了这个,但我得到了大量的编译错误:

<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>

当前回答

一个简单明了的例子:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from the
    // client side.
    //
    // It's an odd workaraound, but it works.
    @{
        var outScript = "var razorUserName = " + "\"" + @User.Identity.Name + "\"";
    }
    @MvcHtmlString.Create(outScript);
</script>

这将在您的页面中创建一个脚本,在您放置上面的代码的位置,看起来如下所示:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from
    // client side.
    //
    // It's an odd workaraound, but it works.

    var razorUserName = "daylight";
</script>

现在您有了一个全局JavaScript变量razorUserName,您可以在客户机上访问和使用它。Razor引擎显然已经从@User.Identity中提取了这个值。名称(服务器端变量),并将其放入它写入脚本标记的代码中。

其他回答

你是想把方钉塞进圆洞里。

Razor的目的是作为一种html生成模板语言。您可以让它生成JavaScript代码,但它不是为此而设计的。

例如:What if Model。标题包含撇号?这将破坏JavaScript代码,默认情况下Razor不会正确转义它。

在辅助函数中使用String生成器可能更合适。这种做法可能会减少意想不到的后果。

有一件事要补充-我发现Razor语法分析器(可能是编译器)对开始括号的位置有不同的解释:

<script type="text/javascript">
    var somevar = new Array();

    @foreach (var item in items)
    {  // <----  placed on a separate line, NOT WORKING, HILIGHTS SYNTAX ERRORS
        <text>
        </text>
    }

    @foreach (var item in items) {  // <----  placed on the same line, WORKING !!!
        <text>
        </text>
    }
</script>

一个简单明了的例子:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from the
    // client side.
    //
    // It's an odd workaraound, but it works.
    @{
        var outScript = "var razorUserName = " + "\"" + @User.Identity.Name + "\"";
    }
    @MvcHtmlString.Create(outScript);
</script>

这将在您的页面中创建一个脚本,在您放置上面的代码的位置,看起来如下所示:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from
    // client side.
    //
    // It's an odd workaraound, but it works.

    var razorUserName = "daylight";
</script>

现在您有了一个全局JavaScript变量razorUserName,您可以在客户机上访问和使用它。Razor引擎显然已经从@User.Identity中提取了这个值。名称(服务器端变量),并将其放入它写入脚本标记的代码中。

使用<text>伪元素,如下所述,强制Razor编译器回到内容模式:

<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中的@:语法的文章,如果你只有一两行JavaScript代码要添加的话,它比<text>标签稍微简单一些。下面的方法可能更可取,因为它减少了生成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。属性语法,表示它应该直接输出这些属性的内容。

更新2

值得注意的是,视图代码确实不是放置JavaScript代码的好地方。JavaScript代码应该放在一个静态的.js文件中,然后它应该从Ajax调用或从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);
});

我刚刚写了这个辅助函数。把它放在App_Code/JS.cshtml中:

@using System.Web.Script.Serialization
@helper Encode(object obj)
{
    @(new HtmlString(new JavaScriptSerializer().Serialize(obj)));
}

然后在你的例子中,你可以这样做:

var title = @JS.Encode(Model.Title);

注意我没有加引号。如果标题已经包含引号,它就不会爆炸。似乎处理字典和匿名对象也很好!