JavaScript 中的 HTML 辅助工具？

Question

在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助手生成的数据属性将会更改，那么我的客户端代码将不再为该元素设置样式。

- Grokodile

---

这是在视图文件中的JavaScript吗？你使用的是哪种服务器端语言？如果JS在视图文件中（我假设你的Razor代码在其中），那么你应该能够做到你想要的。 - matthewpavkov

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

那么我认为你不能做你想做的事情。 - matthewpavkov

Answer 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');

- Robert Fricke

Answer 2

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

- gurvinder372

---

你的意思是 Razor 输出是每个请求一次，但 JavaScript 是缓存的，所以硬编码是唯一的方法吗？ - Grokodile

@Grokodile 是的。Razor 代码只在服务器上转换为 Javascript 代码并发送到浏览器。因此，您只需要硬编码。 - gurvinder372