34

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

在我更改 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”有什么作用？难道是他们之间的切换？！我希望用简单的术语来更多地了解它。

4

2 回答 2

85

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

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

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

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

@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此链接的事件，向属性中包含的 url 发送 AJAX 请求，href然后根据属性的值将data-ajax-mode某些容器的 html 替换为包含在data-ajax-update属性选择器。这正是它jquery.unobtrusive-ajax.js所做的。只是它位于一个单独的文件中，并且您的标记和 javascript 是独立的，而在以前的版本中并非如此。

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

于 2011-03-06T08:22:36.910 回答
0

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

@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

于 2015-02-18T14:00:23.553 回答