Ajax 表单提交 w/preventDefault() 总是成功答案

【问题标题】：Ajax Form Submit w/ preventDefault() always hits SuccessAjax 表单提交 w/preventDefault() 总是成功
【发布时间】：2015-07-09 16:58:53
【问题描述】：

我有一个 .NET MVC 应用程序。在其中一个视图中，有一个模态。在模态框内，有一个表单。

一些笔记...

由于表单位于模态框内，我尝试使用一点 ajax 来阻止表单进行默认提交。
表单本身位于局部视图中
我正在使用标准的内置 MVC 验证脚本以及局部视图模型中的数据注释。示例：
```
[Display(Name = "Address")]
[Required()]
[StringLength(200)]
public string Address { get; set; }
```

这是我试图用来阻止默认提交的脚本：

        $(function () {
            var frm = $('#form-accountprofileedit');
            frm.submit(function (ev) {
                ev.preventDefault();
                $.ajax({
                    type: frm.attr('method'),
                    url: frm.attr('action'),
                    data: frm.serialize(),
                    success: function (data) {
                        alert('ok');
                    }
                });
            });
        }

单击提交按钮且必填字段为空时，我需要显示验证消息。但是，会弹出“确定”对话框，表明验证成功。

我做错了什么？

（如果需要，我可以发布更多代码。）

之后编辑：

这是表格（精简版）：

@using (Html.BeginForm("AccountProfileEdit", "Account", FormMethod.Post, new { id = "form-accountprofileedit", @class = "full-form" }))
    {
    @Html.ValidationSummary(true)

    @Html.CustomTextboxFor(model => model.Address)

    <div style="text-align:right;">
        <button type="submit" id="accountprofileedit-submit" name="accountprofileedit-submit" value="Edit Account" class="btn btn-primary" style="margin-left:5px;">Edit Account</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
    </div>
}

【问题讨论】：

你的 cshtml 看起来像只构建表单？这个问题目前无法回答。
我用表单编辑了 OP。谢谢！
什么是 CustomTextboxFor？我在您的表单上没有看到任何验证，只有验证摘要。这个 CustomTextboxFor 助手会发出什么样的 HTML？
它只是一个 HTML Helper。与普通的 TextBox For 几乎相同。
当您说“我在您的表单上看不到任何验证”时，我不明白。验证在模型中。标准 MVC。没有？

标签： ajax asp.net-mvc form-submit

【解决方案1】：

问题在于，无论ModelState 是否有效，当您从 Post 操作返回部分视图时，控制器总是会返回 200(OK) 状态。您可以通过设置响应状态代码来覆盖它。

if (!ModelState.IsValid)
{
    Response.StatusCode = 400;
    return PartialView("_FormBody", model);
}

然后您需要将表单正文替换为来自服务器的响应以显示验证消息。

$(function () {
    var frm = $('#form-accountprofileedit');
    frm.submit(function (ev) {
        ev.preventDefault();
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            },
            error: function (xhr, status, error) {
            $('#form-accountprofileedit').html(xhr.responseText);
        }
        });
    });
}

注意：不要替换整个表单元素，否则您将删除您的提交处理程序。

【讨论】：