混合Razor和Javascript代码


171

我对如何混合剃须刀和js感到很困惑。这是我坚持的当前功能:

<script type="text/javascript">

        var data = [];

        @foreach (var r in Model.rows)
        {
                data.push([ @r.UnixTime * 1000, @r.Value ]);
        }

如果我可以用声明c#代码,<c#></c#>而其他所有内容都是JS代码,这就是我所追求的:

<script type="text/javascript">

        var data = [];

        <c#>@foreach (var r in Model.rows) {</c#>
                data.push([ <c#>@r.UnixTime</c#> * 1000, <c#>@r.Value</c#> ]);
        <c#>}</c#>

实现此目的的最佳方法是什么?


2
显然,语法高亮显示很不错,并且与我的<c#>标签也很混淆:-P
Kyle Brandt

1
您是否检查了此视图的HTML输出?它看起来如何,以及您希望它如何与众不同?
sukru 2011年

抛出一个错误,Conditional Compilation 使我看不到HTML,因此我认为这是C#代码的一部分。
凯尔·布​​兰特

1
似乎是JavaScript错误:webdeveloper.com/forum/showthread.php?t=99780 。什么是确切的错误消息,您从哪里得到的?
sukru 2011年

2
我认为在这种情况下,试图如此紧密地混合JS和C#将是很难读取/维护的。我很高兴编译器禁止您使用此代码。:)
Jim Bolla

Answers:


332

用途<text>

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
      <text>
            data.push([ @r.UnixTime * 1000, @r.Value ]);
      </text>
   }
</script>

27
Razor在执行时可以在Javascript块中很好地工作,但是我讨厌语法高亮显示如何引起各种混乱。我认为它会将所有Razor代码突出显示为无效语法,因为它停留在Javascript模式下。
2012年

2
如果此代码在捆绑包中怎么办?我可以在javascript文件中编写代码吗?
ncubica

2
完美地工作,直到您要检查一个变量是否小于另一个变量并且剃刀变精神了!
cbp

1
@ncubica,如果您想将剃须刀捆绑在一起,那么在您的概念上有些毛病。剃刀是用于视图,而不是javascript。
100r

1
@ncubica这篇文章很旧,但是解决您的问题的方法是:在JS文件中编写一个函数,使用呈现它Scripts.Render,然后在<script>标签中调用该函数。它并不十分优美,但适用于大多数(阅读:简单)用例。
Sinjai

81

里面一个代码块(例如,@foreach),你需要标记标记(或者,在这种情况下,JavaScript)的使用@:<text>标签

在标记上下文中,您需要用代码块(@{ ... }@if,...)包围代码


为什么说“标记标记”,如果内容实际上是标记,这将不是问题。
Max Toro

1
@Max:尽管它看起来不像标记,但它是标记。(与服务器端代码相反)
SLaks 2011年

@:是我一直在寻找的东西,太好了!
Muflix

53

你也可以简单地使用

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
       @:data.push([ @r.UnixTime * 1000, @r.Value ]);
   }
</script>

注意@:


12

永远不要混合更多的语言。

<script type="text/javascript">
    var data = @Json.Encode(Model); // !!!! export data !!!!

    for(var prop in data){
      console.log( prop + " "+ data[prop]);
    }

如有问题,您也可以尝试

@Html.Raw(Json.Encode(Model));

很好,但是在某些情况下,我们需要混合。但这是我使用的解决方案,因为它非常适合。
frostymarvelous

3
请注意,这混合语言。您有一条语句是半JavaScript(“ var data =”)和半Razor / C#(“ @ Json.Encode(Model)”)。这只是一种侵入性较小的混合,但与具有其主体发出生成的JavaScript的Razor / C#“ foreach”的混合一样,它也不少。:-)
乔纳森·吉尔伯特

3
Uncaught SyntaxError: Unexpected token &之所以返回,是因为该模型变成了这样的样子[{&quot;Id&quot;:1,&quot;Name&quot;:&quot;Name}]
Guoweihui

1

从视图中分离javascript的一种非常规方法,但是仍然使用razor来制作Scripts.cshtml文件并将混合的javascript / razor放在此处。

Index.cshtml

<div id="Result">
</div>

<button id="btnLoad">Click me</button>

@section scripts
{
    @Html.Partial("Scripts")
}

Scripts.cshtml

<script type="text/javascript">
    var url = "@Url.Action("Index", "Home")";

    $(document).ready(function() {
        $("#btnLoad").click(function() {
            $.ajax({
                type: "POST",
                url: url ,
                data: {someParameter: "some value"},
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function(msg) {
                    $("#Result").text(msg.d);
                }
            });
        });
    });
</script>


-1

在JS脚本中时,请将Razor代码包装在@ {}中,并注意仅使用@有时不起作用:

function hideSurveyReminder() {
       @Session["_isSurveyPassed"] = true;
    }

这将产生

function hideSurveyReminder() {
       False = true;
    }

在浏览器中=(

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.