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

时间:2010-01-16 11:40:03

标签: jquery asp.net-mvc binding jquery-ui-dialog

我刚接过demo jquery UI dialog (model dialog) sample 并试图将它包含在我的asp.net mvc项目中,我发现了一些奇怪的东西。

如果你有一个jquery ui对话框div标签内的内容,默认模型绑定器在发布到服务器期间不会拾取它,因为它从表单中删除了这些元素

完整视图代码如下。如果您在底部看到,则会显示对话框内容的部分:

<div id="dialog"

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

jquery ui对话框js代码可以做什么,当代码在表单元素内部发布时,它会从默认模型绑定器“scope”中删除它?


Javascript代码:

<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>
                        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>

<% } %>

1 个答案:

答案 0 :(得分:2)

我发现这个其他Stackoverflow问题与类似的问题,它部分工作。

jQuery modal window removes elements from my form

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