为什么UnobtrusiveJavaScriptEnabled = true禁用我的ajax工作？

Question

我正在使用MVC3剃刀做一个样本,并写道:

<p>
    Show me the time in:
    @Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" })
    @Ajax.ActionLink("BST", "GetTime", new { zone = "bst" }, new AjaxOptions { UpdateTargetId = "myResults" })
    @Ajax.ActionLink("MDT", "GetTime", new { zone = "mdt" }, new AjaxOptions { UpdateTargetId = "myResults" })
</p>
<div id="myResults" style="border: 2px dotted red; padding: .5em;">
    Results will appear here
</div>
<p>
    This page was generated at @DateTime.UtcNow.ToString("h:MM:ss tt") (UTC)
</p>

在web.config中更改此密钥之前,我的所有ajax调用都不起作用:

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

我在本文中读到的内容:http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx
但现在我所有的客户端验证不像以前一样工作.

我的问题是:如何在同一时间使ajax代码工作和客户端验证？什么是"UnobtrusiveJavaScriptEnabled"这个属性？它们之间是否有切换？!我希望用简单的语言更多地了解它.

Answer 1

在ASP.NET MVC 3中有两件事:客户端验证和不引人注目的javascript,它们由web.config中的相应值控制:

<add key="ClientValidationEnabled" value="true" /> 
<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

客户端验证基于jquery.validate.js插件以及jquery.validate.unobtrusive.jsMicrosoft 的脚本.当您在包含HTML表单的视图中包含这两个脚本时,将根据您在模型上定义的数据注释规则执行验证.当您查看生成的视图HTML源代码时,您会注意到输入字段具有data-*包含验证规则的HTML5 属性.然后,Microsoft不显眼的验证脚本将读取这些规则并配置jquery validate插件.

不引人注目的javascript是不同的.它基于jquery.当您在ASP.NET MVC 3中使用其中一个Ajax.*HTML帮助程序时Ajax.ActionLink,这些帮助程序也会data-*在相应的锚点上发出HTML5 属性.然后,这些属性由Microsoft jquery.unobtrusive-ajax.js脚本解释,您需要在页面中包含这些属性并对这些链接进行AJAX化.例如,当你写:

@Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" })

这将生成以下HTML:

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#myResults" href="/Home/GetTime?zone=utc">UTC</a>

如您所见,现在所有有关如何执行AJAX请求的信息都包含在DOM中.所以你可以有一个单独的javascript文件,你可以订阅click这个链接的事件,向href属性中包含的url发送一个AJAX请求,然后根据属性的值data-ajax-mode替换包含在id中的id的某个容器的html.data-ajax-update属性选择器.而这正是它的jquery.unobtrusive-ajax.js作用.它只是在一个单独的文件中,你的标记和javascript是独立的,这在以前的版本中并非如此.

因此,与ASP.NET MVC 1和2相反,在ASP.NET MVC 3中,jQuery是默认的javascript框架,HTML帮助程序基于它.MicrosoftAjax*不再使用所有脚本.