通过Ajax提交局部视图表单以返回局部视图。

Question

我有个困境，请帮忙！

我正在构建一个MVC 4 Web应用程序，在另一个部分视图加载表单时，无法将部分视图加载到页面的某个部分。 我目前已经完成以下步骤：

在基本页面（ReviewPage）上，当页面加载时有一部分会加载一个部分视图，就像这样：

@model AppV4.Models.NewCompanyRequest

@{
    ViewBag.Title = "ReviewNewRequest";
}

<h2>New Sign Up Review</h2>


<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-8">
            <div id="company_notes">
                 @Html.Action("_CompanyNotes")
            </div>
        </div>
    </div>
</div>

这里是在控制器中通过_CompanyNotes动作最初加载的部分视图（_NoNotes）：

@model AppV4.Models.ViewModels.NotesOnCompanyViewModel

<h4>Notes on Company</h4>

<div class="row text-center col-sm-6 col-sm-offset-6">
    <div class="text-center">
        <div class="primary-action-bttn-border">
            <div class="primary-action-bttn-bkg">
                @Ajax.ActionLink("Add Note", "_CompanyNotesEditGet", Model, new AjaxOptions { UpdateTargetId = "company_notes", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, new { @class = "btn btn-default primary-action-bttn" })
            </div>
        </div>
    </div>
</div>

<div class="row text-center padding-25-top">
    <p>There are no notes for this company.  Do you want to add some?</p>
</div>
 @Html.HiddenFor(item => Model.RequestId)

当在_NoNotes的局部视图中单击“添加备注”按钮时，控制器中的_CompanyNotesEditGet操作返回了局部视图(_NotesForm)，它替换了位于#company_notes div中的_NoNotes。这个操作是正确的。这是_NotesForm的局部视图：

@model AppV4.Models.ViewModels.NotesOnCompanyViewModel

<form data-gp-ajax="true" action="@Url.Action("_CompanyNotesEditPost", "NewSignUpRequestReview")" method="post" data-gp-target="#company-notes">
    <div class="form-horizontal">
        <h4>Notes On Company</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.NotesId)
        @Html.HiddenFor(model => model.CompanyId)

        <div class="form-group">

            @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2 text-left" })
            <div class="col-md-12">
                @Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

希望发生的事情: 当在“Notes”栏中输入文本并按下提交按钮时，我希望数据被传递到控制器，以便保存到数据库，并有一个新的局部视图替换页面上的“_NotesForm”局部视图。

目前发生的事情: 当在“Notes”栏中输入文本并按下提交按钮时，控制器接收数据并进行处理。但是，替换的不是刚刚提交的表单，而是整个页面。实际上，整个页面都被替换为这个局部视图的内容。

我尝试使用我在这里和其他地方找到的各种表单提交技术，但好像没有任何一种方法能按照我想要的方式工作。

这是应该返回局部视图_CompanyNotes的控制器操作：

[HttpPost]
public ActionResult _CompanyNotesEditPost(NotesOnCompanyViewModel notesOnCompanyViewModel)
{
    //code that reviews the notes and places it into the db//

    return PartialView("~/Views/NotesOnCompany/_CompanyNotes.cshtml", notesOnCompanyViewModel);
}

这是我编写的 JavaScript 代码，用于捕获提交事件，执行相应的控制器操作，然后将部分视图放回 ReviewPage 页面：

$(function () {
    $('form[data-gp-ajax=true]').submit(function () {

        var $form = $(this);

        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize(),
            success: function (viewHTML) {
                $("#company_notes").show();
                $("#company_notes").html(viewHTML);
            };
        })

        return false;
    };
});

我的理论是，我以某种方式没有使用我的js代码捕捉到提交事件，而是直接进入了我的控制器，这导致了问题。但是，我确保我的js脚本已添加到通过_Layout视图添加到每个视图底部的脚本包中。所以，我真的感到非常困惑。有什么想法吗？

- Nicholas Chivers

---

你的 $('form[data-gp-ajax=true]') 不正确（需要在 true 周围加上引号），但如果你只是使用一个 id 属性，那将会更容易。但由于该表单是在页面首次渲染后加载的，因此你需要使用 事件委托 - 例如 $(document).on('.submit', '#yourFormId', function() {... - user3559349

既然您已经在使用$.ajax()方法，我建议您摆脱Ajax.ActionLink()并同样使用$.ajax()方法。 - user3559349

你也无法在表单上获得任何验证（当添加动态内容时，您需要重新解析验证，并且在进行ajax调用之前需要检查valid()）。 - user3559349

从您之前的问题和这个问题中，我推断出这个目的是编辑一个公司（或者仅仅是显示公司的详细信息），并且动态地添加（也许还有删除和编辑）与其相关联的新的CompanyNotes对象？ - user3559349

Answer 1

我尝试了事件传播方法，但仍然得到了相同的结果。与其让js捕获事件，提交直接进入控制器并使用部分视图刷新整个页面。

我在部分视图_NotesForm的表单标记中添加了id="edit-company-notes"。

我编写了以下用于事件传播的js：

$('div#company_notes').on('.submit', '#edit-company-notes', function () {

        var $form = $(this);

        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize(),
            success: function (viewHTML) {
                $("#company_notes").show();
                $("#company_notes").html(viewHTML);
            }
        });

        return false;
    });

完全搞砸了，使用了'.submit'而不是'submit'！那个句号导致整个东西被跳过了！

以下是事件处理程序的正确js代码：

$('div#company_notes').on('submit', '#edit-company-notes', function () {

    var $form = $(this);

    $.ajax({
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize(),
        success: function (viewHTML) {
            $("#company_notes").show();
            $("#company_notes").html(viewHTML);
            }
    });

    return false;
});

我希望这能帮助到其他像昨晚的我一样在编程方面遇到困难的人！

- Nicholas Chivers