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

Question

有人可以格式化下面的代码，以便我可以使用 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>

我收到设计时错误

在此处输入图像描述

score 43 · Accepted Answer

您应该查看剃刀页面产生的输出。实际上，您需要知道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 版本，它会在设计时为带有剃刀的视图指出一些亮点。

score 21 · Accepted Answer

由于在处理视图时可能会出现 razor 语法错误，因此我完全明白为什么要避免它们。这是其他几个选项。

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

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

如果有人有更好的方法来做到这一点而不会出现剃刀语法错误，特别是维护 var 的类型，我很乐意看到它！

score 20 · Accepted Answer

这就是我解决问题的方法：

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

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

它是自记录的，不涉及到文本的转换。

注意：小心使用Number()函数而不是创建new Number()对象 - 因为完全等于运算符可能会以不明显的方式表现：

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

score 13 · Accepted Answer

我已经看到了几种解决该错误的方法，并且我运行了一些计时测试以查看什么对速度有效（http://jsfiddle.net/5dwwy/）

方法：

直接赋值

在这种方法中，剃刀语法直接分配给变量。这就是引发错误的原因。作为基线，JavaScript 速度测试只是将数字直接分配给变量。
通过 `Number` 构造函数

在这种方法中，我们将 razor 语法包装在对“Number”构造函数的调用中，就像在“Number(@ViewBag.Value)”中一样。
解析整数

在这种方法中，剃刀语法放在引号内并传递给 `parseInt` 函数。
价值返回功能

在这种方法中，创建了一个函数，它简单地将剃刀语法作为参数并返回它。
类型检查功能

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

程序：

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

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

结果：

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

结论：

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

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

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

最重要的是，这些数字是通过 10M 次迭代生成的。单品上，速度小得不可估量。对于大多数人来说，简单地通过Number构造函数运行它可能是最易读的代码，尽管它是最慢的。

score 10 · Accepted Answer

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

<script>

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

</script>

score 5 · Accepted Answer

一种简单的方法是：

<input type="hidden" id="SaleDateValue" value="@ViewBag.SaleDate" />
<input type="hidden" id="VoidItem" value="@Model.SecurityControl["VoidItem"].ToString()" />

然后在javascript中获取值：

var SaleDate = document.getElementById('SaleDateValue').value;
var Item = document.getElementById('VoidItem').value;

score 4 · Accepted Answer

我找到了一个非常干净的解决方案，它允许单独的逻辑和 GUI：

在你的 razor .cshtml 页面中试试这个：

<body id="myId" data-my-variable="myValue">

...your page code here

</body>

在您的 .js 文件或 .ts （如果您使用 typeScript）中从您的视图中读取存储的值，放置一些像这样的内容（需要 jquery 库）：

$("#myId").data("my-variable")

score 3 · Accepted Answer

与其说是一个警示故事，不如说是一个答案：这也困扰着我——我认为我有一个解决方案，方法是在前面加上一个零并使用@(...)语法。即您的代码将是：

var nonID = 0@(nonProID);
var proID = 0@(proID);

获得如下输出：

var nonId = 0123;

我没有意识到这就是 JavaScript（版本 3）如何表示八进制/base-8 数字并且实际上正在改变值。此外，如果您使用该"use strict";命令，那么它将完全破坏您的代码，因为八进制数已被删除。

我仍在寻找适当的解决方案。

score 3 · Accepted Answer

如果您执行以下操作，它会起作用：

var proID = @proID + 0;

它产生的代码类似于：

var proID = 4 + 0;

肯定有点奇怪，但至少没有更多的假语法错误。遗憾的是，VS2013 中仍然报告了这些错误，所以这个问题（还没有）得到妥善解决。

score 3 · Accepted Answer

我一直在研究这种方法：

function getServerObject(serverObject) {
  if (typeof serverObject === "undefined") {
    return null;
  }
  return serverObject;
}

var itCameFromDotNet = getServerObject(@dotNetObject);

对我来说，这似乎使它在 JS 方面更安全......最坏的情况是你最终得到一个空变量。

score 2 · Accepted Answer

这应该涵盖所有主要类型：

public class ViewBagUtils
{
    public static string ToJavascriptValue(dynamic val)
    {
        if (val == null) return "null";
        if (val is string) return val;
        if (val is bool) return val.ToString().ToLower();
        if (val is DateTime) return val.ToString();
        if (double.TryParse(val.ToString(), out double dval)) return dval.ToString();

        throw new ArgumentException("Could not convert value.");
    }
}

在<script>标签内的 .cshtml 文件中：

@using Namespace_Of_ViewBagUtils
const someValue = @ViewBagUtils.ToJavascriptValue(ViewBag.SomeValue);

请注意，对于字符串值，您必须@ViewBagUtils在单（或双）引号内使用表达式，如下所示：

const someValue = "@ViewBagUtils.ToJavascriptValue(ViewBag.SomeValue)";

score 1 · Accepted Answer

我使用一个非常简单的方法来解决与代码混合的代码function体中的语法错误；）JavaScriptRazor

function n(num){return num;}

var nonID = n(@nonProID);
var proID= n(@proID);

score 0 · Accepted Answer

这直接从 web.config 定义的 appSetting 为我设置了一个 JavaScript var。

var pv = '@System.Web.Configuration.WebConfigurationManager.AppSettings["pv"]';

score 0 · Accepted Answer

和

var jsVar = JSON.parse(@Html.Raw(Json.Serialize(razorObject)));

您可以将任何 razor 对象解析为 JavaScript 对象。

它很长但普遍

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

14 回答 14

方法：

程序：

结果：

结论：

Related

Reference