3

介绍

这篇文章是关于将 Microsoft MVC 助手与本机 jquery ajax 混合使用。一路上我遇到的主要问题是：

  1. 双重投稿
  2. @Html.ValidationMessageFor 不输出
    属性

要求

  1. 我需要验证和发布表单（id = "my-form"）

  2. 该表单绑定到一个装饰有验证属性的模型，因此我想使用诸如 @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。这会导致双重职位。使用提琴手我可以看到帖子发生了两次。（一次用于 micosoft 表单声明，一次用于 jquery 帖子）这是因为已连接了 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. 客户端和服务器端验证

我的问题。

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

问候

菲尔

4

1 回答 1

0

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

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

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

于 2013-01-09T10:27:05.063 回答