MVC Partial Page Submit from JQuery UI Dialog

Question

I am trying to submit an ajax form that is loaded via a partial page. The submit comes from a button that is created on a JQuery UI Dialog. The form data is included in the request but when I step through the code on the server side the view model is not being populated with the data.

Javascript that loads the partial and after load is complete creates the dialog.

$('#test').load('@Url.Action("NewIntegrationLevel", "IntegrationLevelConfig", null, Request.Url.Scheme)', 
                        function() {
                            var dialog = $('#addEditForm');
                            dialog.dialog({
                                resizable: false,
                                modal: true,
                                width: 500,
                                title: 'New Integration Level',
                                buttons: [{
                                    text: 'Save',
                                    click: function(e) {
                                        e.preventDefault();
                                        $('#addEditForm').submit();
                                        dialog.dialog('close');

                                    },
                                    type: 'submit',
                                    form: 'addEditForm'
                                },
                                    {
                                        text: 'Close',
                                        click: function(e) {
                                            e.preventDefault();
                                            dialog.dialog('close');
                                        }
                                    }                               
                                ]
                            });
                        });

My partial page:

@model Zodiac.Cmt.UI.Models.IntegrationLevelConfigViewModel


@using (Ajax.BeginForm("Save", "IntegrationLevelConfig", FormMethod.Post, null, new { id = "addEditForm" }))
{

<div id="addEdit-integration-dialog">
    <div>
        <div>
            @Html.LabelFor(model => model.Name)
            @Html.TextBoxFor(model => model.Name)
        </div>
    </div>
</div>

}

Server side code:

[HttpPost]
    public ActionResult Save(IntegrationLevelConfigViewModel viewModel)
    {
        return PartialView("_AddEditIpl", viewModel);
    }

Since the JQuery dialog creates the submit button outside the form I am using the "form" attribute on the button so that it knows which form to submit.

This is what the request looks like after submitting the page:

web request

So, why doesn't the viewmodel get populated with the form data on the server side???

ViewModel:

public class IntegrationLevelConfigViewModel
{
    [Description("Name")]
    public string Name;
}

Use $.ajax instead of $.load, then in your success handler $("#test").html(responseData); see http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor — Mardoxx, Sep 11 '14 at 16:31
Are you saying the data binding does not populate viewModel so that in `Save(IntegrationLevelConfigViewModel viewModel)` where `viewModel` properties are null? What does your `IntegrationLevelConfigViewModel` look like? — Jasen, Sep 11 '14 at 17:54
@Mardoxx - nope, that doesn't work either. My problem is that the data isn't binding to the model. If I use Request.Form["Name"] the data is there. So it's getting returned, its just not binding. — dcinadr, Sep 11 '14 at 17:55

score 1 · Answer 1 · answered Sep 11 '14 at 18:20

1

I figured it out.

In my view model

public string Name;

needs to change to:

public string Name {get;set;}

answered Sep 11 '14 at 18:20

dcinadr

665
2
7
24

MVC Partial Page Submit from JQuery UI Dialog

1 Answers1