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控制器操作，因此执行此操作可能会产生两种结果：

模型有效=＆gt;做你的数据库的东西（你说这工作正常，所以我不会在我的答案中覆盖它）并返回一些JSON对象，表明操作成功，以便你可以关闭模态并告诉用户一切都很好
模型无效=＆gt;重新显示包含表单的同一部分视图，以便向用户显示验证错误，并且他有机会更正它们并重新提交表单。

太好了，现在让我们来看看：

[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回调，以便我们能够处理我在前面的答案中描述的2个案例：

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

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

1 个答案: