对话中的 AJAX 表单未显示验证

Question

我正在尝试创建一个“添加新”链接，该链接会打开一个包含 AJAX 表单的模式窗口，该表单会发布到服务器并使用新数据更新我的表。

从另一个question 我设法让我的表单（包含在部分视图中）在 jQuery 对话中打开并成功提交。但是，如果模型无效，我不知道如何将验证错误显示给用户。

我的控制器：

    public ActionResult AddItemOptionForm()
    {
        return PartialView("_AddItemOption");
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult CreateItemOption(ItemDetailItemOptionViewModel model)
    {
        model.ItemId = 1;
        if (ModelState.IsValid)
        {
           //.....
           //Code here to save to the DB - this bit works as expected
           //.....

           return PartialView("_ItemOptionList", itemdetailviewmodel);

        }

        return View(model);
    }

_AddItemOption 局部视图：

@model shopServer1.Models.ViewModels.ItemDetailItemOptionViewModel

@using (Ajax.BeginForm("CreateItemOption", "Item", 
    new AjaxOptions
    {
        InsertionMode=InsertionMode.Replace,
        UpdateTargetId="item-options-list",
        HttpMethod="POST",
        OnFailure = "handleError",
    }))
    {

@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>

    <div class="editor-label">
        @Html.LabelFor(model => model.ItemOptionId)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ItemOptionId)
        @Html.ValidationMessageFor(model => model.ItemOptionId)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.ItemOptionCode)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ItemOptionCode)
        @Html.ValidationMessageFor(model => model.ItemOptionCode)
    </div>

    //....

    <input type="submit" value="Create" />

</fieldset>
}

最后是我用来显示对话的 javascript：

<script type="text/javascript">
    $(document).ready(function () {
        $('#addItemOption').click(function () {
            var url = $('#itemOptionModal').data('url');

            $.get(url, function (data) {
                $('#itemOptionFormContainer').html(data);

                $('#itemOptionModal').modal('show');
            });
        });
    });

我想我的问题有两个方面。首先，我是否以正确的方式处理这个问题？仅在弹出窗口中显示部分视图并处理表单帖子似乎有点过于复杂。如果这是一个好方法，我该如何处理验证？我已经尝试将itemdetailviewmodel 传递回部分视图，但这似乎并没有奏效。

Answer 1

首先我是否以正确的方式处理这个问题？

是的，你快到了。

仅在弹出窗口中显示部分视图并处理表单发布似乎有点过于复杂。

真的吗？

如果这是一个好方法，我该如何处理验证？

由于您使用 AJAX 调用 CreateItemOption 控制器操作，因此执行此操作有两种可能的结果：

1. 模型是有效的 => 做你的数据库工作（你说这很好，所以我不会在我的回答中介绍它）并返回一些 JSON 对象，指示操作成功，以便你可以关闭模​​式和告诉用户一切都很好
2. 模型无效 => 重新显示包含表单的相同局部视图，以便向用户显示验证错误，并让他有机会更正错误并重新提交表单。

太好了，现在让我们开始吧：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CreateItemOption(ItemDetailItemOptionViewModel model)
{
    model.ItemId = 1;
    if (ModelState.IsValid)
    {
       //.....
       //Code here to save to the DB - this bit works as expected
       //.....

       // everything went fine so we could return a JSON result to the calling AJAX
       return Json(new { success = true });
    }

    // Some validation error occurred => we need to redisplay the same partial
    return PartialView("_ItemOptionList", model);
}

好的，我们已经介绍了前面描述的 2 个案例。现在让我们转到客户端部分。我们需要修改 Ajax.BeginForm 帮助器并订阅 OnSuccess 回调，以便我们能够处理我之前在回答中描述的两种情况：

@using (Ajax.BeginForm("CreateItemOption", "Item", 
    new AjaxOptions
    {
        OnSuccess = "handleSuccess"
        HttpMethod = "POST",
    }))
{
    ..
}

太好了，这个难题的最后一块显然是您可以在外部 .js 文件中托管的 handleSuccess javascript 函数：

var handleSuccess = function(result) {
    if (result.success) {
        // The controller action returned a JSON result => everything went fine at the database level
        // so here we could go ahead and close the modal dialog

        alert('Thanks for submitting the form. Your request has been successfully processed'); // well, you could do something more fancy than an alert here, but my designer's skills are pretty much limited to an alert

        // hide the modal
        $('#itemOptionModal').modal('hide');
    } else {
        // some validation error occurred => we need to redisplay the form and show the validation
        // error
        $('#item-options-list').html(result);
    }
};