JavaScript 代码块中的 Razor 语法

Question

我想知道在 JavaScript 代码中使用 razor 是否是一种好习惯。例如：

<script type="text/javascript">
   var variable = @some.Id
</script>

或者最好是创建隐藏值，然后用 JavaScript 来获取，像这样？

<input type="hidden" id="someId" value"@some.Id" />

<script type="text/javascript">
   var variable = $('#someId').val();
</script>

编辑：

@{
var formVariables = serializer.Serialize(new
                                             {
                                                 id = Model.Id, 
                                                 name = Model.Name, 
                                                 age = Model.Age
                                             });

<input type="hidden" id="header_variables" value="@formVariables"/>
<script type="text/javascript" src = "/Scipts/..."></script>
}

这是好的解决方案吗？

Answer 1

我个人会选择第二个选项的扩展并创建一个单独的 .js 文件。原因是，如果您将工作委托给第 3 方来处理 UI 的 jquery/javascript 部分，那么他们不需要看到任何后端功能。

有多种方法可以在输入上使用 html5 属性（即 data-attribute='foo'），这将允许您使用可以在外部 .js 中解析的大量属性“装饰”您的输入文件。

一个非常简短的例子：

在你看来：

<input type='text' id='myId' data-action='@Url.Action("MyAction")' class='myClass' />

在您的 .js 文件中：

var targetAction = $('#myId').attr('data-action');

这完全分离了 .js 和视图。当然，这确实需要一定程度的计划。

希望对你有帮助

Answer 2

Razor 将在服务器端解析并替换为相关输出。因此，在我看来，如果你把它放在 Javascript 或 HTML 中，这完全无关紧要——在客户端，只有输出值是可见的。因此，在上面的示例中，我会选择第一个选项（直接放在 JS 中），因为您将没有其他不必要的隐藏输入字段。

Answer 3

我认为这个问题没有正确答案；只有优点和缺点。

在 Javascript 中使用 Razor 的优点

• 脚本绑定到您的视图模型；因此模型更改会自动获取，并且会在编译时发现错误。

缺点

• 脚本与标记混合在一起，这与网页设计最佳实践相反（将脚本放在底部，这样它就不会破坏您的页面）。
• 无法编译/缩小脚本，因为它再次与您的标记混合在一起。