混合 Razor 和 Javascript 代码

我对如何将剃须刀和 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#>

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

207854 次浏览
小开

在代码块(例如 @foreach)中，您需要标记标记 与 ABC1或 <text>标签(在本例中是 Javascript)。

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

小开
最佳答案

使用 <text>:

<script type="text/javascript">


var data = [];


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

你也可以简单地使用

<script type="text/javascript">


var data = [];


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

注 @:

小开

当在 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]);
}

万一有问题，你也可以试试

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

可以使用 <text>标记来处理 javascript 中的 cshtml 代码

小开

将 javascript 从视图中分离出来的一种非传统方法是，在其中使用剃刀，即创建一个 Scripts.cshtml文件，并将您的 javascript/剃刀混合放置在该文件中。

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

这是我黑进 Razor 并使用 Javascript 的方法，同时又不会吓坏 Intellisense。

显然，您应该使用 <text>，但是应该使用一个“权宜之计”: 在此之前使用两个大括号。

下面是使用单个大括号时的情况:

enter image description here

如果使用两个大括号，会发生下面的情况:

enter image description here

现在常量和变量已经被识别出来了。 好点了，但不好！ 还有一个“小于”符号使智能感知混淆，使它认为 following 是标记的名称。“ less than”符号表示为错误，从这里开始会出现解析错误，如“ console.log”所示。 您需要添加一些安静的智能感知，并且不会在编译时在最终的 JS 代码中返回。

解决方案: 在“小于”之后使用这个注释: /*>*/

这就是结果

enter image description here

虽然看起来很奇怪，但它确实有效。


提交答案