C# 混合Razor和Javascript代码

C# 混合Razor和Javascript代码,c#,javascript,razor,C#,Javascript,Razor,我对如何混合使用剃须刀和js感到非常困惑。这是我目前一直使用的功能: <script type="text/javascript"> var data = []; @foreach (var r in Model.rows) { data.push([ @r.UnixTime * 1000, @r.Value ]); } var数据=[]; @foreach(Model.rows中

我对如何混合使用剃须刀和js感到非常困惑。这是我目前一直使用的功能:

<script type="text/javascript">

        var data = [];

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

var数据=[];
@foreach(Model.rows中的var r)
{
data.push([@r.UnixTime*1000,@r.Value]);
}
如果我可以用
声明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#>

var数据=[];
@foreach(Model.rows中的var r){
data.push([@r.UnixTime*1000,@r.Value]);
}
实现这一点的最佳方法是什么?

在代码块(例如,
@foreach
)中,您需要标记标记(或者,在本例中是Javascript)

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

使用


var数据=[];
@foreach(Model.rows中的var r)
{
data.push([@r.UnixTime*1000,@r.Value]);
}

您也可以简单地使用

<script type="text/javascript">

   var data = [];

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

var数据=[];
@foreach(Model.rows中的var r)
{
@:data.push([@r.UnixTime*1000,@r.Value]);
}

注意:

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

function hideSurveyReminder() {
       @Session["_isSurveyPassed"] = true;
    }
这将产生

function hideSurveyReminder() {
       False = true;
    }

在浏览器中=(

永远不要混合更多的语言

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

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

您可以将
标记用于cshtml代码和javascript

这是一种将javascript与视图分离的非常规方法,但仍然可以在其中使用razor,即创建一个
Scripts.cshtml
文件,并将混合的javascript/razor放在那里

Index.cshtml

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

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

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

var url=“@url.Action”(“索引”、“主页”);
$(文档).ready(函数(){
$(“#btnLoad”)。单击(函数(){
$.ajax({
类型:“POST”,
url:url,
数据:{someParameter:“某些值”},
contentType:“应用程序/json;字符集=utf-8”,
数据类型:“json”,
成功:功能(msg){
$(“#结果”).text(msg.d);
}
});
});
});

显然,语法突出显示很好,并且与我的
标记混淆:-PDid您检查此视图的HTML输出?它看起来如何,以及您希望它有什么不同?抛出了一个关于
条件编译的错误
,所以我看不到HTML--所以我相信它感觉这是C代码的一部分。它看起来像一个JavaScript错误:。确切的错误消息是什么?你从哪里得到的?我认为在这种情况下,试图将JS和C紧密地结合在一起会是一种阅读/维护的痛苦。我很高兴编译器不允许你使用此代码。:)为什么说“标记标记”,如果内容是,标记。@Max:虽然它看起来不像标记,但它是标记。(与服务器端代码相反)
@:
正是我想要的,太棒了!Razor在Javascript块中执行时可以很好地工作,但我讨厌语法突出显示如何变得各种各样的混乱。它突出显示所有Razor代码为无效语法,因为我相信它被困在Javascript模式中。如果这些代码是捆绑的呢??我可以在javascript文件中编写代码吗?在您想要检查一个变量是否小于另一个变量,并且razor变得精神错乱之前,它工作得非常好@若你们想把剃须刀捆绑在一起,那个就不要把你们的概念搞错了。Razor用于视图,而不是javascript。@ncubica这篇文章很旧,但您的问题的解决方案是:在JS文件中编写一个函数,用
脚本呈现它。呈现
,然后在
标记中调用该函数。虽然不是很优雅,但它适用于大多数(阅读:simple)用例。这很好,但也有一些我们需要混合的合法实例。但这是我使用的解决方案,因为它非常适合。请注意,这是混合语言。您有一个半JavaScript(“var data=”)半Razor/C#(“@Json.Encode(Model)”)的语句。这只是一种侵入性较小的混合,但它的混合程度不亚于使用剃刀/C#“foreach”,其身体会发出生成的JavaScript.:-)它返回
Uncaught SyntaxError:Unexpected token&
,因为模型类似于
[{“Id”:1,“Name”:“Name}]
这是最好、最简单的解决方案。一定要通过Html.Raw()将编码后的JSON输入,以摆脱
实体。”标记缺少上述答案请在选择“代码”对其进行格式化后使用反勾号或ctrl+k
<div id="Result">
</div>

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

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