如何使用 MVC4 和 Razor 设置 javascript 变量

IT技术 javascript c# asp.net-mvc asp.net-core .net-core
2021-02-16 08:13:47

有人可以格式化下面的代码,以便我可以使用 razor 用 c# 代码设置 srcript 变量吗?

下面的方法不起作用,我已经知道这样做很容易让某人提供帮助。

@{int proID = 123; int nonProID = 456;}

<script type="text/javascript">
    @{

     <text>  

    var nonID =@nonProID;
    var proID= @proID;
    window.nonID = @nonProID;
    window.proID=@proID;

    </text>
}
</script>

我收到设计时错误

在此处输入图片说明

6个回答

您应该查看 razor 页面产生的输出。实际上,您需要知道server-sideand执行了什么client-side试试这个:

@{
    int proID = 123; 
    int nonProID = 456;
}

<script>

    var nonID = @nonProID;
    var proID = @proID;
    window.nonID = @nonProID;
    window.proID = @proID;

</script>

输出应该是这样的:

在此处输入图片说明

根据您使用的 Visual Studio 版本,它指出了带有 razor 的视图在设计时的一些亮点。

@FelipeOriani 将其包裹在<text/>标签中:例如:var nonID = @nonProID<text>;</text>
2021-04-18 08:13:47
你是对的,VS 会产生误导性的错误。谢谢
2021-04-22 08:13:47
在设计时,Visual Studio 说这是语法错误,但它呈现了正确的输出。看看我的编辑。
2021-05-09 08:13:47
是的,VS 会在脚本标签内给你误导性的错误,但代码会正常工作。
2021-05-14 08:13:47

由于 razor 语法错误在您处理视图时可能会成为问题,我完全理解您为什么要避免它们。这里有几个其他选项。

<script type="text/javascript">
    // @Model.Count is an int
    var count = '@Model.Count';
    var countInt = parseInt('@Model.ActiveLocsCount');
</script>

引号充当分隔符,因此 razor 解析器很高兴。但是当然你的 C# int 在第一条语句中变成了一个 JS 字符串。对于纯粹主义者来说,第二种选择可能更好。

如果有人在没有剃刀语法错误的情况下有更好的方法来做到这一点,特别是维护 var 的类型,我很乐意看到它!

对我来说,这是唯一的解决方案,效果很好:D
2021-05-03 08:13:47

我是这样解决问题的:

@{int proID = 123; int nonProID = 456;}

<script type="text/javascript">
var nonID = Number(@nonProID);
var proID = Number(@proID);
</script>

它是自我记录的,不涉及与文本的转换。


注意:小心使用Number()函数 not create new Number()objects - 因为完全等于运算符可能以不明显的方式运行:

var y = new Number(123); // Note incorrect usage of "new"
var x = new Number(123);
alert(y === 123); // displays false
alert(x == y); // displays false
@hectorct 非常正确,我想我必须进行测试,var y = new Number(123)因为那会产生错误。已更新答案。感谢您的提醒!
2021-05-06 08:13:47

我已经看到了几种解决该错误的方法,并且我进行了一些计时测试以查看哪些方法可以提高速度(http://jsfiddle.net/5dwwy/

方法:

  1. 直接分配

    在这种方法中,razor 语法直接分配给变量。这就是引发错误的原因。作为基准,JavaScript 速度测试只是将数字直接分配给变量。

  2. 通过`Number`构造函数

    在这种方法中,我们将 razor 语法包装在对 `Number` 构造函数的调用中,如 `Number(@ViewBag.Value)`。

  3. 解析整数

    在这种方法中,razor 语法被放在引号内并传递给 `parseInt` 函数。

  4. 返回值函数

    在这种方法中,创建了一个函数,该函数仅将 razor 语法作为参数并返回它。

  5. 类型检查功能

    在这种方法中,该函数执行一些基本的类型检查(基本上是查找 null),如果它不为 null,则返回该值。

程序:

使用上面提到的每种方法,a 将for-loop每个函数调用重复 10M 次,从而获得整个循环的总时间。然后,该 for 循环重复 30 次以获得每 10M 操作的平均时间。然后将这些时间相互比较,以确定哪些动作比其他动作更快。

请注意,由于它是 JavaScript 运行的,其他人收到的实际数字会有所不同,但重要的不是实际数字,而是数字与其他数字的比较。

结果:

使用直接分配方法,处理 10M 分配的平均时间为 98.033 毫秒。使用Number构造函数每 10M 产生 1554.93ms。同样,该parseInt方法花费了 1404.27 毫秒。简单函数的两个函数调用耗时 97.5 毫秒,更复杂的函数调用耗时 101.4 毫秒。

结论:

最容易理解的代码是直接赋值。但是,由于 Visual Studio 中的错误,这会报告错误并可能导致 Intellisense 出现问题并给人一种模糊的错误感觉。

最快的代码是简单的函数调用,但幅度很小。由于我没有做进一步的分析,我不知道这个差异是否有统计学意义。类型检查函数也非常快,仅比直接赋值稍慢,并且包括变量可能为空的可能性。但是,这并不实用,因为如果参数未定义(剃刀语法中的 null),即使是基本函数也会返回 undefined 。

将 razor 值解析为 int 并通过构造函数运行它非常慢,比直接赋值慢 15 倍。很可能Number构造函数实际上是在内部调用parseInt,这可以解释为什么它比简单的parseInt. 然而,它们确实具有更有意义的优点,不需要执行外部定义的(即文件或应用程序中的其他地方)函数,Number构造函数实际上最小化了整数到字符串的可见转换。

最重要的是,这些数字是通过 1000 万次迭代生成的。在单个项目上,速度小得无法估量。对于大多数人来说,简单地通过Number构造函数运行它可能是最易读的代码,尽管它是最慢的。

这个答案很棒。研究性能的伟大工作。
2021-05-09 08:13:47
@{
int proID = 123; 
int nonProID = 456;
}

<script>

var nonID = '@nonProID';
var proID = '@proID';
window.nonID = '@nonProID';
window.proID = '@proID';

</script>