部分視圖表單通過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);
}

這是我編寫的用於捕獲提交事件，運行適當的控制器操作，然后將部分視圖放回ReviewPage的JavaScript：

$(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視圖添加到每個視圖的底部。 所以我真的在這里大吃一驚。 想什么？

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

我希望這可以幫助別人像昨晚一樣把頭撞在牆上！