为什么 jquery ui 对话框会破坏 asp.net mvc 的默认模型绑定。

Question

我刚拿了demo jquery UI dialog (model dialog) sample 并试图将它包含在我的 asp.net mvc 项目中，我观察到一些奇怪的东西。

如果您在 jquery ui 对话框 div 标记中包含内容，则默认模型绑定器在发布到服务器期间不会拾取它，因为如果从表单中删除了这些元素

完整的视图代码如下。如果您在底部看到，则有对话框内容所在的部分：

<div id="dialog"

问题在于，在“div 对话框”内的表格中，还有许多输入映射到我的绑定数据对象字段。当我在调试过程中查看我的控制器操作时，这些在发布后都是空的。

由于代码位于表单元素内，jquery ui 对话框 js 代码在发布时会从默认模型绑定器“范围”中删除它吗？

---

Javascript 代码：

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

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

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

---

HTML 代码

    <% 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>
                        john.doe@example.com
                        <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

我发现这个其他 Stackoverflow 问题有类似的问题，它部分有效。

jQuery modal window removes elements from my form

它在提交之前将对话框元素推回表单并修复问题