什么时候应该使用“隐藏文本框”，什么时候应该使用（html 5）“data-attribute”？

Question

我需要将一些数据从我的控制器传递到我的视图，并且这些数据将被jQuery用于执行某些操作。这些数据是一个短字符串。我可以将其放在隐藏的文本框中，并使用jQuery访问该文本框的值，也可以在与数据相关的html元素上放置data-attribute属性。不知道哪种方式最好。

具体来说，在我不得不做出这个选择的情况下：我有一个通用的部分视图，需要通过ajax调用来更新视图上的一些数据。但是，ajax调用的目标取决于部分视图的上下文。因此，我将链接传递给了部分视图的视图模型。我应该把这些数据存储在哪里以便jQuery访问呢？

我感觉data-attribute更好，因为我认为隐藏输入字段的目的更多地与将信息与表单的其余部分一起提交有关。

对此是否有一般共识呢？

提前致谢。

- Matthijs Wessels

---

你不能直接从控制器将Javascript变量的值设置到视图中吗？我们在一个项目中使用这个过程来设置Javascript的currentLang值，与应用程序中的语言切换一起使用。 - Betard Fooser

如果您只有一个值，我同意@Bertard的观点，但是如果您需要在文档中的不同元素上设置不同的值，则数据属性通常更简单。像往常一样，这取决于具体情况。 - Drew Noakes

我更倾向于不在我的MVC视图代码中编写任何JavaScript。我想，如果只是很少量的话，可能会这样做。但总的来说，我更喜欢避免这种情况。 - Matthijs Wessels

Answer 1

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

- Drew Noakes

Answer 2

使用模型并将此模型传递给视图。该模型将包含所有必要的数据。然后利用这些数据来生成HTML5 data-*属性，并将其添加到某个DOM元素上，您可以通过AJAX方式来处理。例如：

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

然后：

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

如果您已经在页面上有一个表单需要使用AJAX，则可以使用该表单的action属性或隐藏字段（如果值不同）。

- Darin Dimitrov

---

我之前不知道可以这样访问data-*属性，一直在使用.attr("data-remote-url")。 - Matthijs Wessels