javascript - 部分 View 表单通过ajax提交返回部分 View

Question

我有一个难题。请发送帮助!

我正在构建一个 MVC 4 Web 应用程序，当加载来自另一个局部 View 的表单时，无法将局部 View 加载到页面的一部分。这是我到目前为止所做的:

在基本页面 (ReviewPage) 上，我有一个部分在加载页面时加载部分 View 。像这样:

@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>

这是最初由 Controller 中的 _CompanyNotes 操作加载的部分 View (_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 分部 View 中单击添加注释按钮时， Controller 中的 _CompanyNotesEditGet 操作返回分部 View (_NotesForm)，它替换页面上 #company_notes div 中的 _NoNotes。这工作正常。这是 _NotesForm 局部 View :

@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>

接下来我希望发生什么:当文本输入到注释字段并按下提交时，我希望将数据传递给 Controller ​​，以便将其保存到数据库并用一个新的局部 View 替换页面上的 _NotesForm 局部 View 。

当前发生的情况:当文本输入到注释字段并按下提交时， Controller 接收数据并开始工作。但是，不是局部 View 替换刚刚提交的表单，而是替换整个页面。从字面上看，整个页面都替换为该部分 View 的内容。

我尝试使用我在此处和其他地方找到的各种表单提交技术，但似乎没有任何效果符合我的预期。

这是应该返回部分 View 的 Controller 操作 _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，用于捕获提交事件、运行适当的 Controller 操作，然后将部分 View 放回 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 代码捕获提交事件，相反，提交操作直接进入我的 Controller ，这导致了问题。但是，我已确保将我的 js 脚本添加到通过 _Layout View 添加到每个 View 底部的脚本包中。所以老实说，我在这里大吃一惊。有人想过吗？

Answer 1

我尝试了事件传播方法，但仍然得到相同的结果。不是 js 捕获事件，而是直接提交到 Controller 并使用局部 View 刷新整个页面。

我在部分 View _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;
});

我希望这能帮助其他人像我昨晚那样用头撞墙!