Question

在使用MVC3剃刀做样本时，我写道：

<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”有什么作用？这是他们之间的转换吗？！我希望用简单的术语来理解它。

Answer 1

在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表单的视图中包含这两个脚本时，将根据您在模型上定义的数据注释规则执行验证。当您查看生成的视图HTML源代码时，您会注意到输入字段具有包含验证规则的HTML5 data-*属性。然后，Microsoft不显眼的验证脚本将读取这些规则并配置jquery validate插件。

不引人注目的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请求，然后根据{{{ 1}} attribute用data-ajax-mode属性选择器中包含的id替换某个容器的html。而这正是data-ajax-update的作用。它只是在一个单独的文件中，你的标记和javascript是独立的，这在以前的版本中并非如此。

与ASP.NET MVC 1和2相反，在ASP.NET MVC 3中，jQuery是默认的javascript框架，HTML帮助程序基于它。不再使用所有jquery.unobtrusive-ajax.js脚本。

Answer 2

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

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

添加行：

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

您正在添加与Ajax.BeginForm相同的行为而不会失去javascript行为。

我使用MVC4

对其进行了测试

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

2 个答案: