我啥时候应该使用“隐藏文本框”，啥时候应该使用（html 5）“数据属性”？

Posted 2023-04-13

【中文标题】我啥时候应该使用“隐藏文本框”，啥时候应该使用（html 5）“数据属性”？

【英文标题】：When should I use a "Hidden TextBox" and when should a use a (html 5) "data-attribute"?我什么时候应该使用“隐藏文本框”，什么时候应该使用（html 5）“数据属性”？

【发布时间】：2011-08-05 17:28:48

【问题描述】：

我需要将一些数据从我的控制器传递到我的视图。 jQuery 将使用这些数据来做一些事情。数据是一个短字符串。我可以把它放在一个隐藏的文本框中，并使用 jQuery 访问该文本框的值。我还可以在数据关注的 html 元素上放置一个数据属性。我想知道最好的方法是什么。

举一个我必须做出这个选择的特定情况：我有一个通用的局部视图，它需要执行 ajax 调用来更新视图上的一些数据。但是，ajax 调用的目的地取决于局部视图的上下文。因此，我将链接传递给局部视图的视图模型。我在哪里存储这些数据以供 jQuery 访问？

我觉得数据属性在某种程度上更好，因为我觉得隐藏输入字段的目的更多地与将信息与表单的其余部分一起发回。

对此是否有普遍共识？

提前致谢。

【问题讨论】：

你能不能只将 javascript 变量的值从你的控制器设置到你的视图中？我们使用此过程在我们的一个项目中设置 javascript currentLang 值，该项目与应用程序中的语言切换一起使用。

如果您只有一个值，我同意@Bertard，但如果您需要在文档中的不同元素上设置不同的值，那么 data 属性通常更简单。与往常一样，这取决于。

我不想在我的 MVC 视图代码中编写任何 javascript。我想如果它只是最小的，它可能会做到。但总的来说，我更愿意避免它。

【参考方案1】：

如果我打算通过表单将数据发送回服务器，我只会使用隐藏的表单输入。如果这不是必需的，那么使用数据属性会简单得多。它不需要表单，您可以通过 jQuery（或纯 JavaScript）从相关元素的事件处理程序中更轻松地访问该值。

【参考方案2】：

使用模型并将此模型传递给视图。该模型将包含所有必要的数据。然后利用这些数据为某些 DOM 元素生成 HTML5 data-* 属性，您将不显眼地进行 AJAXify。示例：

<div id="someDiv" data-remote-url="@Model.SomeModelPropertyContainingTheUrl"></div>

然后：

var url = $('#someDiv').data('remote-url');
...

如果您在页面上已经有一个要进行 AJAX 化的表单，您可以使用此表单的 action 属性，如果值不同，则可以使用隐藏字段。

【讨论】：

我不知道我可以访问这样的 data-* 属性，直到现在我还在使用.attr("data-remote-url")。