不显眼的 JavaScript 如何在 ASP.NET MVC3 中工作？

Question

是否有教程或解释 MVC3 如何使用 HTML5 数据标签实现不显眼的 javascript？我想知道如何为我自己的 javascript 扩展这种做法，特别是如何有效地解析数据标签以执行 javascript、附加事件处理程序等？

Answer 1

在 ASP.NET MVC 1 和 2 中，客户端验证和任何 AJAX 行为意味着 ASP.NET MVC 将自动生成用于验证或 AJAX 类的 javascript。结果是嵌入了 javascript 的

不显眼的 javascript 通过将所有必要的内容放置在元素的 data- 属性中，消除了在 HTML 页面中嵌入 javascript 的需要。完成此操作后，jquery.validate.unobtrusive 将根据输入控件的 data- 属性中的信息验证并执行 AJAX 类。

有关更多详细信息，请查看此 asp.net mvc 3 教程提供了一个快速示例。不引人注目的解释是在第二个启用客户端验证的末尾。

查看这篇博文，其中显示了差异用于不引人注目和正常验证的输出。

Answer 2

基本上，它只是使用 jQuery 附加事件处理程序，而不是将脚本直接放入 html 属性中。

例如，包含

$("#button1").click(DoStuff);

html 的

<button id="button1" />

文档就绪事件相当于

<button id="button1" onclick="DoStuff()" />

在本例中，这并不是一个巨大的差异，但对于更复杂的情况，它使代码更加清晰，特别是如果您想使用匿名回调函数。

Answer 3

查看不显眼的脚本文件（如 jquery.unobtrusive-ajax.js），您会发现这只是使用选择器查找具有数据属性的元素的情况。

例如：

 $("a[data-ajax=true]").live("click", function (evt) {
        evt.preventDefault();
        ...
 });

 $("form[data-ajax=true]").live("submit", function (evt) {
     ...           
 });

我已经开始使用自己的数据属性来连接自动完成和日期选择器等功能。例如，添加一个带有指向远程数据源的 data-autocomplete 属性的输入，然后使用 jQuery 以不显眼的方式将其连接起来。

$(":input[data-autocomplete]").each(function () {
        $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
    });

此处演示，如果您有兴趣： http://www.pluralsight-training.net/microsoft/players/PSODPlayer.aspx?author=scott-allen&name=mvc3-building -ajax&mode=live&clip=0&course=aspdotnet-mvc3-intro