jquery - 如何使用带有验证功能的 jQuery 在 Modal 中创建 .NET MVC 表单

Question

我真的很难知道如何将这一切组合在一起。我在 .net MVC 页面中构建过很多次表单，无论是否经过验证。我使用 jQuery 构建了带有或不带有验证的表单。我已经在模式内部构建了表单，但从未使用 MVC。

我从我的original question中了解到因为这个表单位于模态中，所以我需要使用 jQuery 来处理提交。我正在花很长时间弄清楚如何将所有这些移动部件组合在一起。到目前为止，我还没有找到将所有这些内容组合在一起的教程(或教程组合)。

这是我需要的:

• 在我的 MVC View 内有一个打开模式的按钮。 (这很好用。)
• 模式打开后，它包含一个带有多个文本字段和下拉列表的表单。每一项都是必需的。 (为了使字段成为必填字段，我是否会像通常使用 MVC 表单那样在 View 模型中定义这些字段？还是在 jQuery 中创建需求？)
• 如果用户尝试提交表单但表单为空或无效，则模式将保持打开状态并显示验证消息。 (我从我的 original question 了解到，由于模式的原因，使用直接 MVC 是不可能的，并且需要一些 jQuery。我在这里迷失了。)
• 如果用户尝试提交表单并且所有字段都有效，则模式关闭，我们点击 Controller 并将字段保存到数据库。 (不知道如何逃离 jQuery 并直接点击普通 Controller 来处理最终逻辑。)

编辑:

谢谢杰森的帮助!根据您的建议，这就是我的工作方式。

父 View :

模态:

<div class="modal fade" id="AccountEditModal" tabindex="-1" role="dialog" aria-labelledby="AccountEditModalLabel">
    <div class="modal-dialog modalAccountEdit" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3><strong>Edit Account Profile - <span class="accountname"></span></strong></h3>
            </div>

            <div class="modal-body">
                <div id="formContent">
                    @Html.Partial("_AccountProfileEdit", new GEDCPatientPortal.Models.AccountProfileEditViewModel())
                </div>
            </div>
        </div>
    </div>
</div>

然后是脚本:

@section Scripts {
    <script>
        $(document).ready(function () {

            $('#AccountEditModal').on('shown.bs.modal', function () {
                $('#myInput').focus()
            })



        $("#AccountEditModal").on("submit", "#form-accountprofileedit", function (e) {
            e.preventDefault();  // prevent standard form submission

            var form = $(this);
            $.ajax({
                url: form.attr("action"),
                method: form.attr("method"),  // post
                data: form.serialize(),
                success: function (partialResult) {
                    $("#formContent").html(partialResult);
                }
            });
        });


        });

    </script>
}

部分 View (缩小):

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


    @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>
}

Controller :

    [HttpPost]
    public ActionResult AccountProfileEdit(AccountProfileEditViewModel model)
    {
        if (ModelState.IsValid)
        {
            // logic to store form data in DB
        }

        return PartialView("_AccountProfileEdit", model);

    }

Answer 1

您可以使用内置的 MVC 验证脚本以及模型上的数据注释

public class AccountProfileEditViewModel
{
    [Display(Name = "Address")]
    [Required()]
    [StringLength(200)]
    public string Address { get; set; }
}

制作部分 View 来保存模态表单。

_AccountProfileEdit.cshtml

@model AccountProfileEditViewModel

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

    @Html.LabelFor(m => m.Address)
    @Html.TextBoxFor(m => m.Address)
    @Html.ValidationMessageFor(m => m.Address)
    <button type="submit">Edit</button>
}

然后在模态框中引用它。如果您想要预先填充的模型，您需要渲染一个操作:

<div class="modal-body" id="form-container">
    @Html.Action("AccountProfileEdit", "Account", new { id=account.Id })
</div>

如果您只想要一个空白表单，那么您可以使用:

<div class="modal-body" id="form-container">
    @Html.Partial("_AccountProfileEdit")
</div>

该操作使用 id 参数来获取并填充模型

[HttpGet]
public ActionResult AccountProfileEdit(int id)
{
    AccountProfileEditViewModel model = db.GetAccount(id);  // however you do this in your app

    return PartialView("_AccountProfileEdit", model);
}

AJAX POST

现在您需要 AJAX 来提交此表单。如果您依赖标准表单提交，浏览器将离开您的页面(并关闭您的模式)。

$("#myModal").on("submit", "#form-accountedit", function(e) {
    e.preventDefault();  // prevent standard form submission

    var form = $(this);
    $.ajax({
        url: form.attr("action"),
        method: form.attr("method"),  // post
        data: form.serialize(),
        success: function(partialResult) {
            $("#form-container").html(partialResult);
        }
    });
});

提交事件需要使用事件委托(delegate) $(staticParent).on(event, target, handler)，因为表单内容稍后可能会被替换。

后操作

[HttpPost]
public ActionResult AccountProfileEdit(AccountProfileEditViewModel model)
{
    // Request.Form is model

    if (ModelState.IsValid)
    {
        // do work
        return PartialView("_AccountEditSuccess");
    }

    return PartialView("_AccountProfileEdit", model);
}

客户端验证脚本应该阻止它们提交。但是，如果不知何故失败或者您无法在客户端上验证某些内容，那么您就拥有了 ModelState.IsValid。您还可以手动使服务器端的某些内容无效。

_AccountEditSuccess.cshtml

以及“成功”部分 View 。

<div>Success! <button>Click to close</button></div>

无效就是失败，对吧？

从您的 AJAX 成功处理程序中您可以

success: function(partialResult) {
    $("#form-container").html(partialResult);
}

但这里的问题是我们不知道您是否获得“成功”或“验证失败”。添加 error: function(err){ } 处理程序不会有帮助，因为验证失败被视为 HTTP 200 响应。在这两种情况下，div 内容都会被替换，用户需要手动关闭模式。有方法可以传递附加数据来区分这两种情况，但这是另一篇很长的答案。