Why does the jquery ui dialog break the default asp.net mvc binding model binding?

Question

I just took the jQuery UI dialog demo dialog (sample model) and tried to include it in my asp.net mvc project, and I noticed something strange.

If you have content in the div tag of the jquery ui dialog box, the middleware does not select it by default when publishing to the server, as it removes these elements from the form

The full view code is provided. if you see below, there is a section where the contents of the dialog box are:

<div id="dialog"

The problem is that in my table, inside the "div" dialog box, there are also several inputs that are mapped onto the fields of the linked data objects. when I look at the action of my controller during debugging, they all remain empty after posting.

What can jquery ui dialog js code do that will remove it from the default binding area of ​​the model when publishing when the code is inside 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>
                        [e-mail]
                        <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 a similar problem and it partially works.

jQuery modal window removes elements from my form