为什么设置 UnobtrusiveJavaScriptEnabled = true 会阻止 ajax 工作? [英] Why does setting UnobtrusiveJavaScriptEnabled = true prevent ajax from working?

问题描述

在使用 MVC3 razor 做一个示例时，我写道:

显示时间:@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;">结果将显示在此处

<p>此页面是在 @DateTime.UtcNow.ToString("h:MM:ss tt") (UTC) 生成的</p>

直到我在 web.config 中更改了这个键，我的 ajax 调用都没有工作:

我在这篇文章中读到: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="UnobtrusiveJavaScriptEnabled" value="true"/>

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

不显眼的 javascript 是不同的.它基于jquery.当您在 ASP.NET MVC 3 中使用 Ajax.* HTML 帮助程序之一(例如 Ajax.ActionLink)时，这些帮助程序还会发出 HTML5 data-* 对应锚点上的属性.然后，这些属性由 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 属性的值用 data-ajax-update 属性选择器中包含的 id 替换某些容器的 html.而这正是 jquery.unobtrusive-ajax.js 所做的.只是它在一个单独的文件中，并且您的标记和 javascript 是独立的，这在以前的版本中并非如此.

与 ASP.NET MVC 1 和 2 不同，在 ASP.NET MVC 3 中，jQuery 是默认的 javascript 框架，而 HTML 助手基于它.不再使用所有 MicrosoftAjax* 脚本.

While doing a sample using MVC3 razor, I wrote:

<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>

None of my ajax calls worked until I changed this key in web.config:

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

I read in this article: http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx
But now my client-side validation is not working as before.

My question is: how do I make both the ajax and client-side validations work at the same time? What does the "UnobtrusiveJavaScriptEnabled" do? Is it a switch between them?! I hope to understand more about it in simple terms.

解决方案

In ASP.NET MVC 3 there are 2 things: client side validation and unobtrusive javascript which are controlled by their corresponding values in web.config:

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

Client side validation is based on the jquery.validate.js plugin alongside with the jquery.validate.unobtrusive.js script from Microsoft. When you include those two scripts inside a view which contains a HTML form client side validation will be performed based on the data annotation rules you have defined on your model. When you look at the generated HTML source code of the view you will notice that input fields have HTML5 data-* attributes which contain the validation rules. The Microsoft unobtrusive validation script would then read those rules and configure the jquery validate plugin.

The unobtrusive javascript is different. It is based on jquery. When you use one of the Ajax.* HTML helpers such as Ajax.ActionLink, in ASP.NET MVC 3, those helpers also emit HTML5 data-* attributes on the corresponding anchor. Those attributes are then interpreted by the Microsoft jquery.unobtrusive-ajax.js script which you need to include in your page and AJAXify those links. So for example when you write:

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

this would generate the following HTML:

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

As you can see now all the information about how to perform the AJAX request is contained in the DOM. So you could have a separate javascript file where you would subscribe for the click event of this link, send an AJAX request to the url contained in the href attribute and then based on the value of the data-ajax-mode attribute replace the html of some container with id contained in the data-ajax-update attribute selector. And that's exactly what the jquery.unobtrusive-ajax.js does. It's just that it is in a separate file and your markup and javascript are independent which wasn't the case in previous versions.

So contrary to ASP.NET MVC 1 and 2, in ASP.NET MVC 3 jQuery is the default javascript framework and HTML helpers are based on it. All MicrosoftAjax* scripts are no longer used.

这篇关于为什么设置 UnobtrusiveJavaScriptEnabled = true 会阻止 ajax 工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！