jquery - 将 Microsoft MVC ajax 和验证助手与 native jquery ajax 混合

Question

简介

这篇文章是关于将 Microsoft MVC 帮助程序与 native jquery ajax 混合在一起的。我一路上遇到的主要问题是:

1. 双重帖子提交
2. @Html.ValidationMessageFor 不输出
   属性

要求

1. 我需要验证并发布表单 (id = "my-form")

2. 表单绑定(bind)到用验证属性装饰的模型，因此我想利用 @Html.ValidationMessageFor 等辅助方法来利用不显眼的好处

3. 我需要客户端和服务器端验证(服务器端我对数据库进行唯一名称检查)

4. 提交表单时我需要进行一些客户端处理以添加其他表单数据。

迭代步骤

第 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。这会导致双重帖子。使用 fiddler 我可以看到该帖子发生了两次。 (一次用于 micosoft 表单声明，一次用于 jquery post) 这是因为已经连接了 2 个处理程序。做了一些谷歌搜索，我发现有些人正在使用 jquery 删除一个处理程序，但这一切看起来有点困惑。

第 3 步

所以我将 @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”参数都是多余的，因为我的自定义事件处理程序接管了表单提交过程。

已解决

现在一切似乎都正常

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

我的问题。

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

问候

菲尔

Answer 1

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

我通常遵循经验法则，该 View 必须具有简单明了的 HTML 或帮助程序，我尝试减少嵌套的 div 和其他内容。

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