Question

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

Answer 1

在ASP.NET MVC 1和2中，客户端验证和任何AJAX行为意味着ASP.NET MVC会自动生成用于验证的javascript或AJAX类。结果是嵌入了javascript的<script>标记，将在HTML页面上输出，或输入的事件处理程序中的数据（如onclick）。

不显眼的javascript消除了在HTML页面中嵌入javascript的需要，方法是在元素的data-属性中放置所有必要的东西。有了这个，jquery.validate.unobtrusive将根据输入控件的data-属性中的信息验证并执行AJAX类。

有关详细信息，请查看此asp.net mvc 3 tutorial，其中提供了一个快速示例。不引人注意的解释是在第二个Enabling Client-Side Validation下结束。

看看this blog post，它显示了不显眼和正常验证的输出差异。

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

如何不引人注目的JavaScript在ASP.NET MVC3中工作？

3 个答案: