在使用MVC3 Razor 做样本时,我写道:
<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”做什么?是它们之间的切换吗?我希望以简单的方式了解更多信息。
最佳答案
在ASP.NET MVC 3中,有两件事:客户端验证和不引人注意的javascript,它们由web.config中的相应值控制:
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
客户端验证基于
jquery.validate.js
插件以及Microsoft的jquery.validate.unobtrusive.js
脚本。当您在包含HTML表单的 View 中包含这两个脚本时,将根据您在模型上定义的数据注释规则执行客户端验证。当您查看 View 的生成的HTML源代码时,您会注意到输入字段具有HTML5 data-*
属性,其中包含验证规则。然后,Microsoft的非侵入式验证脚本将读取这些规则并配置jquery验证插件。简洁的javascript是不同的。它基于jquery。当在ASP.NET MVC 3中使用
Ajax.*
HTML帮助程序之一(例如Ajax.ActionLink
)时,这些帮助程序还会在相应的 anchor 上发出HTML5 data-*
属性。然后,这些属性由Microsoft jquery.unobtrusive-ajax.js
脚本解释,您需要将其包含在页面中并AJAXify这些链接。因此,例如,当您编写:@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替换某些容器的html包含在data-ajax-update
属性选择器中。这就是jquery.unobtrusive-ajax.js
所做的。只是它在一个单独的文件中,并且您的标记和javascript是独立的,而在以前的版本中情况并非如此。因此,与ASP.NET MVC 1和2相反,在ASP.NET MVC 3中,jQuery是默认的javascript框架,HTML帮助器基于该框架。不再使用所有
MicrosoftAjax*
脚本。
关于ajax - 为什么设置UnobtrusiveJavaScriptEnabled = true阻止ajax工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5208247/