为什么设置 UnobtrusiveJavaScriptEnabled = true 会阻止 ajax 工作？

Why does setting UnobtrusiveJavaScriptEnabled = true prevent ajax from working?

提问by Amr Elgarhy

While doing a sample using MVC3 razor, I wrote:

在使用 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>

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

直到我在 web.config 中更改了这个键，我的 ajax 调用才起作用：

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

我在这篇文章中读到：http: //weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx
但现在我的客户端验证不像以前那样工作。

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.

我的问题是：如何使 ajax 和客户端验证同时工作？“UnobtrusiveJavaScriptEnabled”有什么作用？是他们之间的切换吗？！我希望通过简单的术语来了解更多。

回答by Darin Dimitrov

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:

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

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

Client side validation is based on the jquery.validate.jsplugin alongside with the jquery.validate.unobtrusive.jsscript 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.

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

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.jsscript which you need to include in your page and AJAXify those links. So for example when you write:

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

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

this would generate the following HTML:

这将生成以下 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 clickevent of this link, send an AJAX request to the url contained in the hrefattribute and then based on the value of the data-ajax-modeattribute replace the html of some container with id contained in the data-ajax-updateattribute selector. And that's exactly what the jquery.unobtrusive-ajax.jsdoes. 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.

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

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.

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

回答by MrMins

I resolved that using this code:

我使用以下代码解决了这个问题：

@using (Ajax.BeginForm("Index2","Home", 
    new AjaxOptions
        {
            UpdateTargetId = "result", 
            HttpMethod = "POST"
        }, 
    new
        {
            onclick = "Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));",
            onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'POST', updateTargetId: 'result' });"
        }))
{
    <input type="hidden" name="id" value='1'/>
    <input type="submit" value="OK" />
}

Adding the lines:

添加行：

new
        {
            onclick = "Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));",
            onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'POST', updateTargetId: 'result' });"
        }))

You're adding the same behavior than the Ajax.BeginFormwithout loses the javascript behavior.

您添加的行为与Ajax.BeginForm不丢失 javascript 行为的行为相同。

I tested that, with MVC4

我测试过， MVC4