why does jquery ui dialog break asp.net mvc's default model binding . .

Question

i just took the demo jquery UI dialog (model dialog) sample and tried to include it in my asp.net mvc project and i have observed something weird.

If you have content inside a jquery ui dialog div tag, the default model binder doesn't pick it up during posting to the server as it if removed these elements from the form

the full view code is below. if you see at the bottom, there is the section where the content of the dialog:

<div id="dialog"

The issue is that in my table inside the "div dialog", there is also a number of inputs that map onto my binding data objects fields. when i look at my controller action during debugging these are all null after posting.

What could the jquery ui dialog js code be doing that will remove it from the default model binders "scope" when posting as the code is inside the form elements?

---

Javascript Code:

<script type="text/javascript">
    $(function() {

        $("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 500,
            width: 500,
            modal: true,

            buttons: {
                'Create an account': function() {

---

HTML CODE

    <% using (Html.BeginForm("UpdateTester", "Applications", FormMethod.Post))
       {%>

        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Name</th>
                    <th>Email </th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type='hidden' name='peopleUpdater.person[0].c' value="1" />
                        <input type='hidden' name='peopleUpdater.person[0].b.Id' value="1" />
                        <input type='hidden' name='peopleUpdater.person[0].a[0].Id' value="1" />                            John Doe
                        <input type='hidden' name='peopleUpdater.person[0].name' value="joe" />
                    </td>
                    <td>
                        [email protected]
                        <input name='peopleUpdater.person[0].email' type='hidden' value="email" />
                    </td>
                    <td>
                        Locations:
                        <%=Model.BusinessLocations.Length %><input type="button" value="Details" id="showDetails" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <input type="submit" id="Button1" class="ui-button ui-state-default ui-corner-all" />Submit

    <div id="dialog" title="Create new user">
        <%=ApplicationHTMLHelper.BuildTableLocations("aa", Model.Application.BusinessLocations, true, "peopleUpdater.person[0]")%>
     </div>

<% } %>

Answer 1

i found this other Stackoverflow question with the similar issue and it partially works.

http://stackoverflow.com/questions/567637/jquery-modal-window-removes-elements-from-my-form

it shoves the dialog elements back into the form before submit and fixes the issue