JavaScript 中的 HTML 助手？

Posted 2023-04-12

【中文标题】JavaScript 中的 HTML 助手？

【英文标题】：HTML Helper in JavaScript?

【发布时间】：2013-01-05 09:31:38

【问题描述】：

在 Razor 中我可以这样做：

<p @html.MyCustomDataAttributeFor(person) >@person.Name</p>

渲染这样的东西：

<p data-custom-person-id="1234567890" >Fred</p>

我真的必须在（不显眼的）javascript 中执行此操作：

$('p[data-custom-person-id="1234567890"]').css('background-color','red');

当我更愿意这样做时：

$('p[@Html.MyCustomDataAttributeFor(person)]').css('background-color','red');

如果我可以的话，否则如果 HTML 助手生成的数据属性发生变化，我的客户端代码将不再为元素设置样式。

【问题讨论】：

这个 javascript 在视图文件中吗？您使用的是什么服务器端语言？如果 JS 在视图文件中（我假设你的 Razor 代码在其中），那么你应该能够做你想做的事。

它在一个单独的 .js 文件中

那我不相信你可以为所欲为。

【参考方案1】：

您能否将脚本指向一个 .cshtml 文件？

 <script type="text/javascript" src="/myscript.cshtml"></script>

我想我已经为 .php 和 .aspx 做了这个，所以我看不出它不应该工作的原因。 在这些情况下，它会让服务器首先处理文件。

否则，您可以使用客户HttpHandler 来解析服务器端所需的任何文本，然后再将其发送到客户端。

然而，最简单的方法是从 Razor 设置一些 Javascript 变量，即：

<script type="text/javascript">
    var customerId = '@Html.MyCustomDataAttributeFor(person)';
</script>

然后写：

$('p[' + customerId + ']').css('background-color','red');

【参考方案2】：

data-custom-person-id="1234567890" 在服务器将@Html.MyCustomDataAttributeFor(person) 转换为该值后呈现给浏览器。在客户端，您根本不会收到这些文本。因此，您不能将这些语句用于客户端样式。

【讨论】：

你的意思是剃刀输出是每个请求一次，但 JavaScript 被缓存，所以硬编码是唯一的方法？

@Grokodile 是的。 Razor 代码仅在服务器上转换为 Javascript 代码并发送到浏览器。所以，你只需要硬编码