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

问题描述

在使用MVC3剃须刀进行采样时，我写道：

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>

直到我在web.config中更改此键之前，我的ajax调用均无效：

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

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

我在本文中阅读： http://weblogs.asp.net/owscott/archive/2010 /11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx

但是现在我的客户端验证无法像以前那样工作。

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.

我的问题：我如何使ajax和客户端验证同时工作？ UnobtrusiveJavaScriptEnabled是做什么的？是它们之间的切换吗？我希望以简单的术语了解更多信息。

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.

推荐答案

在ASP.NET MVC 3中，有两件事：客户端验证和不受干扰的javascript，它们由web.config中的相应值控制：

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

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

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.

非侵入式javascript是不同的。它基于jquery。当您在ASP.NET MVC 3中使用 Ajax。* HTML帮助器之一（例如 Ajax.ActionLink ）时，这些帮助程序还会在相应的锚点上发出HTML5 data-* 属性。然后，这些属性由Microsoft jquery.unobtrusive-ajax.js 脚本解释，您需要将该脚本包含在页面中并AJAXify这些链接。因此，例如，当您编写以下内容时：

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" })

这将生成以下HTML：

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>

您现在可以看到，有关如何执行AJAX请求的所有信息都包含在DOM中。因此，您可以拥有一个单独的JavaScript文件，在该文件中，您可以订阅此链接的 click 事件，向A < href中包含的网址发送AJAX请求属性，然后根据 data-ajax-mode 属性的值，将某些容器的html替换为 data-ajax-update 属性选择器。这正是 jquery.unobtrusive-ajax.js 的工作。只是它在一个单独的文件中，并且您的标记和javascript是独立的，而在以前的版本中不是这种情况。

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.

因此与ASP.NET MVC 1和2，在ASP.NET MVC 3中，jQuery是默认的javascript框架，HTML帮助器基于该框架。所有 MicrosoftAjax * 脚本都不再使用。

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