为什么jQuery UI的对话框突破asp.net MVC的默认模型绑定。 [英] why does jquery ui dialog break asp.net mvc's default model binding .

问题描述

我刚接过演示jQuery用户界面对话框（模型对话框）样品
并试图把它列入我的asp.net mvc的项目，我已经观察到一些奇怪的。

如果您有一个jQuery UI的对话框div标签内内容中，默认模式粘结剂不发布到服务器，因为它在如果从表格中删除这些元素把它捡起来

在众目睽睽code如下。如果您在底部看到，有部分地方对话框的内容：

 ＆LT; D​​IV ID =对话
 

问题是，在我的DIV对话框中的表里面，也有一些映射到我的绑定数据对象的字段输入。当我在调试期间看我的控制器操作，这些都是空后发布

为code发帖时什么可以在jQuery UI的对话框JS code做将从默认的模型粘合剂范围中删除它是表单元素里面呢？

---

的Javascript code：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{        $（＃对话）。对话框（{
            bgiframe：真实，
            的AutoOpen：假的，
            高度：500，
            宽度：500，
            模式：真实，            纽扣： {
                创建帐户：功能（）{
 

---

HTML code

 ＆LT;使用％（Html.BeginForm（UpdateTester，应用程序，FormMethod.Post））
       {％GT;        ＆LT;表ID =用户级=UI小部件的UI控件内容＆GT;
            ＆LT;＆THEAD GT;
                ＆LT; TR类=UI小部件头＆GT;
                    ＆LT;第i个姓名和LT; /第i
                    ＆LT;第i个电子邮件和LT; /第i
                    ＆LT;第i个;详情＆LT; /第i
                ＆LT; / TR＆GT;
            ＆LT; / THEAD＆GT;
            ＆LT;＆TBODY GT;
                ＆所述; TR＆GT;
                    ＆所述; TD＆GT;
                        ＆LT;输入类型=隐藏的名字='peopleUpdater.person [0] .C'值=1/＆GT;
                        ＆LT;输入类型=隐藏的名字='peopleUpdater.person [0] .b.Id'值=1/＆GT;
                        ＆LT;输入类型=隐藏的名字='peopleUpdater.person [0] .A [0] .ID'值=1/＆GT;李四
                        ＆LT;输入类型=隐藏的名字='peopleUpdater.person [0]。名称'值=乔/＆GT;
                    ＆LT; / TD＆GT;
                    ＆所述; TD＆GT;
                        [e-mail]
                        ＆LT;输入名称='peopleUpdater.person [0] .email'类型='隐藏'值=电子邮件/＆GT;
                    ＆LT; / TD＆GT;
                    ＆所述; TD＆GT;
                        位置：
                        ＆LT;％= Model.BusinessLocations.Length％GT;＆LT;输入类型=按钮值=详细信息ID =showDetails/＆GT;
                    ＆LT; / TD＆GT;
                ＆LT; / TR＆GT;
            ＆LT; / TBODY＆GT;
        ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
    ＆LT;输入类型=提交ID =Button1的阶级=UI按钮的UI状态默认UI的角落里所有/＆GT;提交    ＆LT; D​​IV ID =对话称号=创建新用户＆GT;
        ＆LT;％= ApplicationHTMLHelper.BuildTableLocations（AA，Model.Application.BusinessLocations，真的，peopleUpdater.person [0]）％GT;
     ＆LT; / DIV＆GT;＆LT;％}％GT;
 

解决方案

我发现了类似的问题，这个其他问题＃1，这部分工作。

<一个href=\"http://stackoverflow.com/questions/567637/jquery-modal-window-removes-elements-from-my-form\">http://stackoverflow.com/questions/567637/jquery-modal-window-removes-elements-from-my-form

它猛推的对话框元素放回形式提交之前，并修复该问题。

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

<% } %>

解决方案

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

这篇关于为什么jQuery UI的对话框突破asp.net MVC的默认模型绑定。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！