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>

我收到设计时错误

enter image description here

Answer 1

您应该查看剃刀页面产生的输出。实际上，您需要知道server-side和client-side执行的内容。试试这个：

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

<script>

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

</script>

输出应该是这样的：

enter image description here

根据您使用的Visual Studio版本，它指出了剃须刀视图在设计时的一些亮点。

Answer 2

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

@{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

Answer 3

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

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

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

如果有人在没有剃刀语法错误的情况下有更好的方法，特别是保持var的类型，我很乐意看到它！

Answer 4

我已经看到了解决这个问题的几种方法，并且我运行了一些时序测试，看看哪种方法适用于速度（http://jsfiddle.net/5dwwy/）

的方法：

直接分配

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

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

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

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

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

步骤：

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

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

结果：

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

结论：

最清楚的代码是直接赋值。但是，由于Visual Studio中的错误，这会报告错误并可能导致Intellisense出现问题，并且模糊不清。

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

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

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

Answer 5

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

<script>

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

</script>

Answer 6

这不是一个警示故事的答案：这也困扰着我 - 我认为我有一个解决方案，预先挂起零并使用@(...)语法。你的代码应该是：

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

输出如下：

var nonId = 0123;

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

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

Answer 7

如果您这样做，它会起作用：

var proID = @proID + 0;

产生的代码类似于：

var proID = 4 + 0;

有点奇怪，但至少没有假的语法错误。遗憾的是，VS2013中仍然报告了错误，因此尚未正确解决（尚未）。

Answer 8

我一直在研究这种方法：

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

var itCameFromDotNet = getServerObject(@dotNetObject);

对我而言，这似乎让JS方面更安全......最糟糕的情况是你最终得到一个零变量。

Answer 9

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

在您的剃须刀.cshtml页面中尝试以下操作：

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

...your page code here

</body>

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

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

Answer 10

其中一个简单的方法是：

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

Answer 11

我使用非常简单的function来解决与JavaScript代码混合的Razor代码中的语法错误;）

function n(num){return num;}

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

Answer 12

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

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

Answer 13

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

<head>

</head>

<body>
  <div>
    <ul class="columns">
      <li class="hed">Elementary</li>
      <li>Maps: Primary: ELS</li>
      <li>Maps: Primary: Readiness</li>
      <li>Maps: Primary: Outline World Map</li>
      <li>Maps: Intermediate: Physical</li>
      <li>Maps: Intermediate: Political</li>
      <li>Maps: Intermediate: Continents and Oceans Thematic</li>
      <li>Maps: Intermediate: Wealth of Countries Thematic</li>
      <li>Maps: Intermediate: Precipitation Thematic</li>
      <li>Maps: Intermediate: Temperature Thematic</li>
      <li>Maps: Intermediate: Time Zones Thematic</li>
      <li>Maps: Intermediate: Land Use Thematic</li>
      <li>Maps: Intermediate: Population Thematic</li>
      <li>Maps: Intermediate: Outline World Map</li>
      <li>U.S. History: 1 Native Americans</li>
      <li>U.S. History: 2 Spanish Explorers</li>
      <li>U.S. History: 3 Explorers</li>
      <li>U.S. History: 4 The Great Exchange</li>
      <li>U.S. History: 5 European Settlements</li>
      <li>U.S. History: 6 Thirteen British Colonies</li>
      <li>U.S. History: 7 Slavery in the Americas</li>
      <li>U.S. History: 8 Revolutionary War</li>
      <li>State Map</li>
      <li class="hed">Secondary</li>
      <li>Maps: Intermediate: Physical</li>
      <li>Maps: Intermediate: Political</li>
      <li>Maps: Intermediate: Continents and Oceans Thematic</li>
      <li>Maps: Intermediate: Wealth of Countries Thematic</li>
      <li>Maps: Intermediate: Precipitation Thematic</li><span id="dots">... 
    </span>
      <span id="more">
		<li>Maps: Intermediate: Temperature Thematic</li>
		<li>Maps: Intermediate: Time Zones Thematic</li>
		 <li>State Map</li>
    		 </span>
    </ul>
    <button onclick="myFunction()" id="myBtn">Read more</button>
  </div>
</body>

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

13 个答案:

的方法：

步骤：

结果：

结论：