将 Microsoft MVC ajax 和验证助手与本机 jquery ajax 混合答案

【问题标题】：Mixing Microsoft MVC ajax and validation helpers with native jquery ajax将 Microsoft MVC ajax 和验证助手与本机 jquery ajax 混合
【发布时间】：2012-04-30 07:52:36
【问题描述】：

简介

这篇文章是关于混合 Microsoft MVC 助手和原生 jquery ajax。在此过程中我遇到的主要问题是：

双帖提交
@Html.ValidationMessageFor 不输出
属性

要求

我需要验证和发布表单 (id = "my-form")
表单绑定到一个装饰有验证属性的模型，所以我想利用 @Html.ValidationMessageFor 等辅助方法来利用不显眼的好处
我需要客户端和服务器端验证（服务器端我对数据库进行唯一名称检查）
我在提交表单时需要做一些客户端处理以添加额外的表单数据。

迭代步骤

第 1 步

我从没有原生 jquery 开始，并使用 Microsoft 助手来创建 ajax 表单：

@using (Ajax.BeginForm( ...

一切都像宣传的那样工作。这给了我不显眼的验证，但它没有满足我的自定义表单数据发布要求。

所以我想我会覆盖提交过程。

第 2 步

在我准备好的文档中，我连接了新的事件处理程序：

$(document).ready(function () 
{
    // Rebind validators
    $.validator.unobtrusive.parse('#my-form');

    // Hook up submit event
    $("#my-form").submit(SubmitForm);
});

在我的提交功能中，我可以自己处理表单数据：

function SubmitForm(e) 
{
    // Suppress normal event behaviour
    e.preventDefault();

    // Validate the form
    var valid = $("#my-form").validate();
    if (valid.errorList.length > 0)
        return;

    // Collect up form data manually
    var formData =  ...(code removed for clarity)

    // Display animated gif
    $("#ajax-loader").css("display", "inline")

    // Post Form
    $.post(
            '@Url.Action("MyAction", "MyController")',   // url
            formData,                                   // data
            SuccessFunction                             // success
        )
        .error(ErrorFunction);                         // error
}

好的，现在场景设置好了。

问题

一个问题是我混合了两种类型的 ajax。这会导致双重职位。使用提琴手我可以看到帖子发生了两次。（一次用于 micosoft 表单声明，一次用于 jquery 帖子）这是因为已经连接了 2 个处理程序。做了一些谷歌搜索，我发现有些人正在使用 jquery 删除一个处理程序，但看起来有点乱。

第三步

所以我把@using (Ajax.BeginForm( ... 语法变成了一个简单的表单标签：

<form id = "my-form">
   ...
</form>

问题

现在@Html.ValidationMessageFor 没有做它的事情。使用 firebug 我可以看到我的表单输入不再应用验证属性。

@Html.ValidationMessageFor 似乎只能与表单助手一起使用。

我不能使用 Ajax.BeginForm(... 因为我得到了双重提交。

第 4 步

所以我接下来使用：

 @using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "my-form" })) 
 {....

我使用 Html.BeginForm 纯粹是为了让我的 @Html.ValidationMessageFor 完成他们的工作。 “MyAction”和“MyController”参数都是多余的，因为我的自定义事件处理程序接管了表单提交过程。

已解决

现在似乎一切正常

不得重复提交
使用@Html.ValidationMessageFor 进行不显眼的验证
自定义表单处理/提交
客户端和服务器端验证

我的问题。

这是正确的方法吗？我很想听听其他人的这些经历。

问候

菲尔

【问题讨论】：

标签： jquery ajax asp.net-mvc validation mixing

【解决方案1】：

通常在这种情况下，我喜欢Fluent Validation 中建议的方法。现在，第一件事它将在客户端为您生成验证，可以使用 JQuery 进行检查，您也可以在服务器端创建/生成强制验证。意味着您在类中定义规则，如示例所示，然后使用该类检查验证。因此，它将在服务器端进行检查。我通常使用 ajax 只是不写 html，大多数时候我会忘记右括号和一些东西，所以助手很好，但我不支持 Ajax.Beginform。简单的 Beginform 很好。

我通常遵循拇指规则，该视图必须具有简单明了的 HTML 或 Helpers，我尝试减少嵌套的 div 和其他内容。

如果需要有关此主题的更多详细信息，请告诉我。您可以通过网络找到一些关于此的好文章。如果你愿意，我可以分享。

【讨论】：