为什么UnobtrusiveJavaScriptEnabled = true来禁用我的AJAX工作吗？ [英] Why UnobtrusiveJavaScriptEnabled = true disable my ajax to work?

问题描述

我在做用MVC3剃刀样本，并写这样的：

I was doing a sample using MVC3 razor, and wrote this:

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

我所有的Ajax调用没有工作，直到我改变了这种关键在web.config中：

All my ajax calls didn't work until i changed this key in web.config:

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

这是我在这篇文章中读到：<一href="http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx">http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx
但现在我所有的客户端CIDE验证无法正常工作了。

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

我的问题是，：如何让阿贾克斯code工作和客户端验证，在同一时间？而这是什么属性关于UnobtrusiveJavaScriptEnabled？是它在它们之间的开关？我希望更多地了解它用简单的话。

My question is: how to make the ajax code work and the client side validations in the same time? and what is this property about "UnobtrusiveJavaScriptEnabled"? is it a switch between them?! I hope to understand more about it in simple words.

推荐答案

在ASP.NET MVC 3有2件事情：客户端验证和不显眼的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 插件旁边的 jquery.validate.unobtrusive.js 脚本微软。如果包括其中包含一个HTML表单，客户端验证将根据您已经在模型中定义的数据标注规则进行一个视图中这两个脚本。当你看到的视图生成的HTML源代码code，你会发现，输入字段具有HTML5 数据 - * 属性包含验证规则。微软不引人注目的验证脚本将改为这些规则和配置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的。当您使用的阿贾克斯之一。* HTML辅助，例如 Ajax.ActionLink ，在ASP.NET MVC 3，这些助手也发出HTML5 数据 - * 上相应的锚属性。这些属性然后由微软 jquery.unobtrusive-ajax.js 脚本，你需要在你的页面，AJAXify这些链接包括PTED除$ P $。因此，例如，当你写的：

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文件，在那里你会认购点击这个链接事件，发送一个AJAX请求包含在的href链接属性，然后根据数据AJAX模式的价值属性替换一些容器的id包含在<$ C $的HTML C>数据AJAX更新属性选择器。而这正是 jquery.unobtrusive-ajax.js 一样。只是，它是在一个单独的文件和你的标记和JavaScript是独立这是不是在previous版本的情况。

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