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

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

从另一个方面，我成功地使我的表单（包含在部分视图中）在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>
}

@model shopServer1.Models.ViewModels.ItemDetailItemOptionViewModel
@使用（Ajax.BeginForm（“CreateItemOption”、“Item”，
新选择
{
InsertionMode=InsertionMode.Replace，
UpdateTargetId=“项目选项列表”，
HttpMethod=“POST”，
OnFailure=“handleError”，
}))
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true）
@LabelFor（model=>model.ItemOptionId）
@EditorFor（model=>model.ItemOptionId）
@Html.ValidationMessageFor（model=>model.ItemOptionId）
@LabelFor（model=>model.ItemOptionCode）
@EditorFor（model=>model.ItemOptionCode）
@Html.ValidationMessageFor（model=>model.ItemOptionCode）
//....
}

最后是我用来显示对话的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');
            });
        });
    });

$（文档）.ready（函数（）{
$（'#addItemOption'）。单击（函数（）{
var url=$（'#itemOptionModel'）。数据（'url'）；
$.get（url、函数（数据）{
$（'#itemOptionFormContainer'）.html（数据）；
$（'#itemOptionModel'）.model（'show'）；
});
});
});

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

itemdetailviewmodel

传递回部分视图，但这似乎不起作用

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

是的，你就快到了

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

真的吗

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

由于您正在使用AJAX调用

CreateItemOption

控制器操作，因此执行此操作有两种可能的结果：

模型是有效的=>做你的数据库工作（你说这很好，所以我不会在我的回答中提及），并返回一些JSON对象，指示操作成功，这样你就可以关闭模型并告诉用户一切都很好

模型无效=>重新显示包含表单的同一部分视图，以便向用户显示验证错误，用户有机会更正错误并重新提交表单

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

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

好的，我们已经涵盖了前面描述的两个案例。现在让我们转到客户端部分。我们需要修改

Ajax.BeginForm

helper并订阅回调，以便能够处理我在前面的回答中描述的两种情况：

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

很好，这个谜题的最后一部分显然是

handleSuccess

javascript函数，您可以在外部.js文件中托管该函数：

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

---

谢谢你的回答，但是我仍然有同样的问题。成功时我会收到警报，但是当模型无效时不会发生任何事情。我弹出了一个断点，可以看到调用了以下内容：

PartialView（“\u ItemOptionList”，model）但是视图上没有任何更改。也许我对验证消息有问题，但这些消息以其他形式显示，而这些形式不是AJAX，所以我认为这与此相关？！我希望
\u ItemOptionList
部分包含Ajax表单，是吗？在FireBug的
网络
选项卡中检查服务器发送的准确响应。另外，我希望DOM中只有一个元素具有
id=“item options list”
。因为这是下面一行将要做的：
$（“#项选项列表”）.html（结果）=>它将尝试注入此元素的部分视图。我将错误的对象类型传递回部分视图。FireBug很快就发现了这一点，所以谢谢你给我指路！现在全部工作：）