Jquery UI Dialog Post to ASP.Net MVC Controller Action

Question

I have an MVC view that contains a JQuery UI dialog that can be opened and populated with data.

<div id="dialog">
.... Table of phone numbers
</div>
<div id="personData">
... Person model data
</div>

I am attempting to pass the data from the JQuery UI dialog along with the rest of the MVC View data to a controller action.

public ActionResult Save(Person person, List<PhoneNumber> phoneNumbers)
{
}

In this example the Person type is not part of the dialog and is posted fine. The phone numbers is in the div of the JQuery UI dialog and does not post.

The elements in the dialog are defined in the View and can be seen in the DOM but for some reason something is preventing the data to post along with the rest of the View data. If I remove the .dialog() declaration from the the "dialog" div (now the div is visible on the form), the data (phoneNumbers) will post.

So my question is how do you post the JQuery UI dialog data along with the View data from the form to a controller action? (I know how to post the UI dialog data using a button within the dialog, but I need to post it alongside my main View because of the state issues around this data).

Answer 1

Chances are the dialog box moves the div outside of the form so the fields aren't submitted. You might just link the fields to hidden ones outside of the div or increase the span of the form.

Answer 2

Just as stimms said, you will need to put the data into some fields inside the form you'll be submitting to the action.

Do something like this inside the dialog click function (using jQuery .val())

$("#formFieldName").val() = $("#dialogFieldName").val();

Repeat this for each field.

After that, the fields (probably hidden fields) inside your form will contain the data when you submit the form.