Posting Form to Partial View via AJAX

Question

I am trying to post data from a partial view form (viewbag) to an action method on the main controller. I am using Jquery:

$.ajax({
    url: '@Url.Action("displaypreviewformactionmethod", "MyMainController")',
    type: 'post',
    dataType: 'json',
    data: $('form#realform').serialize(),
    success: function (data) {
        $('#DivTagWhereMyPartialViewIs').html(data);
        $('#DivTagWhereMyPartialViewIs').show();
    }

My Partial View with the Form looks like:

<div id="step-3" class="">
    @using (Html.BeginForm("displaypreviewformactionmethod", "MyMainController"))
    {
        foreach (var frm in Model)
        {
            <tr>
                <td>
                    @Html.LabelFor(model => model.FirstOrDefault().ELabel, frm.SomeText)
                </td>
                <td>
                    @Html.TextBox(frm.FieldName)<br />
                </td>
            </tr>
        }
        <input type="submit" name="Submit" value="Submit" />
    }
</div>

The action method in the main controller is:

public ActionResult displaypreviewformactionmethod(FormCollection form)
{
    if (form.Count > 0)
    {
        ViewBag.FormItems = form;
    }
    return PartialView("MyPartialView", form);
}

The action gets called, but it doesn't pass anything in the formcollection to the partial view- which leads me to believe that I'm not correctly identifying the form in the partial view. I tried adding <form id="realform"> before the in the partial view but that didn't work. Is there some other way I can identify the form in Jquery?

Any direction much appreciated.

You form does not have an `id="realform"` - but you can add it using `@using (Html.BeginForm("displaypreviewformactionmethod", "MyMainController", FormMethod.Post, new { id = "realform" }))`. And what is triggering that ajax call? And your `foreach` loop wont bind correctly anyway - refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) — , Jan 22 '18 at 03:52
Is there any reason why your partial view is not strongly-typed ? That would be easier to post your model to the controller.. — AlexB, Jan 22 '18 at 10:31
partial view had model with it.... OP has only put part of the partial view ... it is the controller which should not have had a formcollection — Rohit Kumar, Jan 22 '18 at 14:18
@StephenMuecke - your answer worked for what I was trying to do: (Html.BeginForm("displaypreviewformactionmethod", "MyMainController", FormMethod.Post, new { id = "realform" })) I would mark it as the answer but can't as it was a reply. — AMorrisey, Feb 03 '18 at 15:22

score 0 · Answer 1 · answered Jan 22 '18 at 14:32

@AMorrisey I understand you want to submit the form by ajax. But I am seeing a lot of suggestion in your code..

1. Razor can handle ajax form submits .. not need to write external ajax use

@using (Ajax.BeginForm("displaypreviewformactionmethod", "MyMainController",

insted of

@using (Html.BeginForm("displaypreviewformactionmethod", "MyMainController"))

here is a good article to understand difference between Ajax.BeginForm vs Html.BeginForm

2. Secondly your

$.ajax({
    type: 'post',..

won't have any effect because of <input type="submit" name="Submit" value="Submit" />

On clicking submit button it would directly hit the controller/action . So the $ajax part is useless

3. there should be proper model binding at the action

public ActionResult displaypreviewformactionmethod(FormCollection form)

should have been

public ActionResult displaypreviewformactionmethod(SomeModel model)

Clearly the `$.ajax()` **is working** since OP has stated its hitting the method (and to recommend using `Ajax.BeginForm()` over `$.ajax()` is awful advice) — , Jan 22 '18 at 22:47
Thanks Raja - I couldn't use a model because the form contents (fields and field values) were dynamically generated hence using ViewBag. — AMorrisey, Feb 03 '18 at 15:25

Posting Form to Partial View via AJAX

1 Answers1