Partial view form submit via ajax to return partial view

Question

I have a dilemma. Please send help!

I'm building an MVC 4 web application and cannot get a partial view to load onto a section of the page when a form from another partial view is loaded. Here is what I have done so far:

On the base page (ReviewPage), I have a section that loads a partial view when the page is loaded. Something like this:

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

Here is the partial view (_NoNotes) that is loaded initially by the _CompanyNotes action in the controller:

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

When the Add Note button is clicked in this _NoNotes partial view, the _CompanyNotesEditGet action in the controller returns the partial view (_NotesForm) which replaces _NoNotes on the page in the #company_notes div. THIS works correctly. Here is the _NotesForm partial 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>

WHAT I WOULD LIKE TO HAPPEN NEXT: When text is entered to the Notes field and the submit is pressed, I would like the data to be passed to the controller so that it can be saved to the database and have a new partial view replace the _NotesForm partial on the page.

WHAT CURRENTLY HAPPENS: When text is entered to the Notes field and submit is pressed the controller receives the data and does it's work. However, instead of the partial view replacing the form that was just submitted, it replaces the whole page. Literally the whole page is replaced with the contents of this partial view.

I tried using various form submitting techniques that I found on here and elsewhere but nothing seems to be working the way I want it to.

Here is the controller action that should return the partial view _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);
}

Here is the JavaScript I've written to catch the submit event, run the appropriate controller action, and then place the partial view back on the 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;
    };
});

My theory is that I'm not catching the submit event with my js code somehow and instead, the submit action is going directly into my controller which is causing the issue. However, I've made sure that my js script is added to the script bundle that is added to the bottom of every view via the _Layout view. So I'm honestly flabbergasted here. Thoughts anyone?

Answer 1

I tried the event propagation method but was still getting the same result. Instead of the js catching the event, the submit is going directly to the controller and refreshing the entire page with the partial view.

I added id="edit-company-notes" to the form tag on the partial view _NotesForm.

And wrote the following js I wrote for the event propagation:

$('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;
    });

Totally goofed though with using '.submit' instead of 'submit'! That one period was causing the whole thing to be skipped!

Here is the correct js for the event handler:

$('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;
});

I hope this helps someone else banging their head against the wall like I was doing last night!