混合 Razor 和 Javascript 代码

Question

我对如何混合 razor 和 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#>

实现这一目标的最佳方法是什么？

Answer 1

使用<text> ：

<script type="text/javascript">

   var data = [];

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

Answer 2

在代码块（例如@foreach ）中，您需要使用@:或<text>标记来标记标记（或在本例中为 Javascript）。

在标记上下文中，您需要用代码块（ @{ ... }或@if , ...）包围代码

Answer 3

你也可以简单地使用

<script type="text/javascript">

   var data = [];

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

注意@：

Answer 4

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

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

Answer 5

一种将 javascript 与视图分离但仍使用 razor 的非常规方法是制作一个Scripts.cshtml文件并将混合的 javascript/razor 放在那里。

索引.cshtml

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

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

@section scripts
{
    @Html.Partial("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>

Answer 6

您可以将<text>标记用于带有 javascript 的两个 cshtml 代码

Answer 7

这是我破解 Razor 并使用 Javascript 而不会吓坏 Intellisense 的方法。

显然你应该使用<text>但有一个“权宜之计”：之前的双大括号。

如果使用单个大括号会发生以下情况：

如果使用几个大括号，会发生这种情况：

现在常量和变量已经被识别。 它更好，但不是很好！ 仍然存在混淆智能感知的“小于”符号，使其认为以下是标签的名称。 “小于”符号表示为错误，从这里开始有解析错误，如“console.log”所示。 您需要添加一些使智能感知安静并且在编译时不会在最终 JS 代码中返回的内容。

解决方法：在“小于”之后使用此注释： /*>*/

这是结果

看起来很奇怪，但它应该可以正常工作。

Answer 8

在 JS 脚本中将 Razor 代码包裹在 @{} 中，并注意仅使用 @ 有时它不起作用：

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

这将产生

function hideSurveyReminder() {
       False = true;
    }

在浏览器中 =(