部分视图验证中的Ajax表单

Question

我在局部视图中有一个表单，它可以工作，但是如果出现服务器端验证错误，它将仅显示局部视图。 因此，我决定使用ajax进行提交（实际上，这是有意义的，因为它正在插入联系人，并且主视图中有一个列表）。

问题是，如果发布的代码中有这些错误之一，它将正确显示在视图中（我需要再次使部分可见，但这是另一回事），但是如果没有错误，它将仅在列表中显示部分视图。 我可以反过来做，在没有错误的情况下正确显示，但随后无法正确显示验证错误。

我想了解什么是最好的方法，或者至少是什么可能性：也许更改控制器中的代码或在成功回调中进行某种检查...

我编辑了以前的内容，因为当没有错误时，我应该返回列表，而不是我以前发布的整个视图，但是无论如何，我仍然不确定如何彼此区分，因为两者都成功调用了post操作

谢谢

观点是这个

@model ContactListViewModel

@{
    ViewBag.Title = " My Contacts"
}

<div id="ContactList">
    <h2>My Contacts</h2>
    <hr />
    <div id="addContainer">
        @{ Html.RenderAction("AddContact"); }
    </div>
    <div id="editContainer" data-amp-url="@Url.Action("Edit", "Contacts")" class="initiallyHidden"></div>
    @foreach (var group in Model.Contacts)
    {
        <div class="PlanContacts">
            <div class="PlanName">@group.Key</div>
            @foreach (var contact in group.Values)
            {
                <div class="Preview">
                    @Html.DisplayFor(m => contact, "Contact")
                </div>
            }
        </div>
    }
</div>

@section PageJavascript
{
    <script src="~/Scripts/AMPContacts.js"></script>
}

控制器后动作

[HttpPost]
public ActionResult AddContact(AddContactViewModel viewModel)
{
    var partyId = (int) Session["PartyId"];
    if (ModelState.IsValid)
    {
        _contactsManager.AddContact(viewModel, partyId);
        // Here I should return the updated list
    }
    var newViewModel = _createBuilder.Rebuild(viewModel, partyId);
    return PartialView("_AddContact", newViewModel);
}

较长的AMPContact.js中的ajax提交代码

$('#addForm').submit(function (e) {
    e.preventDefault();
    var addContainer = $(document.getElementById('addContainer'));
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            addContainer.html(result);
        }
    });
});

Answer 1

我知道这个答案远非是一个好主意，但对于缩小搜索范围可能对某人有用。 由于它最终会变得很大，因此我宁愿将此更新发布为我自己的问题的答案，不确定该更新是否符合良好的举止。

解释的问题不是我面临的唯一问题，在表单重置以及特别是连续的错误提交时也遇到了困难（一旦我尝试重新提交错误时遇到错误），所以我最终陷入困境出于不同问题的不同解决方案。 希望我能够清理它

谢谢

我现在使用的视图

<div id="myContacts">
<h2>My Contacts</h2>
<hr />

<div id="addContainer">
    <div class="toggler">
        Add Contact
    </div>
    <div id="addToggling" class="initiallyHidden">
        @{ Html.RenderAction("AddContact"); }
    </div>
</div>

<div id="editContainer" data-amp-url="@Url.Action("Edit", "Contacts")" class="initiallyHidden"></div>

<div id="list">
    @{ Html.RenderPartial("_ContactList", Model); }
</div>

在.js中

$('#addContainer').on('submit', '#addForm', ajaxCall);

function ajaxCall(e) {
    e.preventDefault();
    var addToggling = $(document.getElementById('addToggling'));
    var contactList = $(document.getElementById('contactList'));

    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            if (result.passedValidation == true) {
                // Json is returned with flag, we get the list from the server and update the list element
                $.get(result.action, function (partial) {
                    contactList.html(partial);
                });

                // Add some effects and clear the form
                $(document).scrollTop(0);
                setTimeout(function () {
                    addToggling.slideUp(300, resetAddForm);
                }, 500);
                setTimeout(function () {
                    contactList.effect("highlight", {}, 3000);
                }, 1000);
            }
            else {
                // The form partial view is returned and displayed in the same element when there are validation errors
                $(document).scrollTop(0);
                addToggling.html(result);
                $.validator.unobtrusive.parse('#addForm');
            }
        }
    });
}

function resetAddForm() {
    var addForm = $(document.getElementById('addForm'));

    // Hhide the error messages
    addForm.find("span.field-validation-error").hide();
    addForm.find("div.validation-summary-errors").hide();

    // Removes the class associated to errors
    addForm[0].reset();

    // Clear the inputs
    addForm.find('input:text, input:password, input:file, select, textarea').val('');
    addForm.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}

控制器与现有的动作方法略有不同，并且有了新的方法

public ActionResult ContactList()
{
    var partyId = (int)Session["PartyId"];
    var viewModel = _displayBuilder.Build(partyId);
    return PartialView("_ContactList", viewModel);
}

[HttpGet]
public ActionResult AddContact()
{
    var partyId = (int) Session["PartyId"];
    var viewModel = _createBuilder.Build(partyId);
    return PartialView("_AddContact", viewModel);
}
[HttpPost]
public ActionResult AddContact(AddContactViewModel viewModel)
{
    var partyId = (int) Session["PartyId"];

    if (ModelState.IsValid)
    {
        _contactsManager.AddContact(viewModel, partyId);

        if (Request.IsAjaxRequest())
            return Json(new { passedValidation = true, action = Url.Action("ContactList")});

        return RedirectToAction("Index");
    }

    var newViewModel = _createBuilder.Rebuild(viewModel, partyId);
    return PartialView("_AddContact", newViewModel);
}