在 jQuery 对话框中时，asp.net 表单控件不可读，如何解决？答案

【问题标题】：asp.net form controls are unreadable when in a jQuery dialog, how do you fix it?在 jQuery 对话框中时，asp.net 表单控件不可读，如何解决？
【发布时间】：2011-11-27 08:12:53
【问题描述】：

我有一个带刺的。我有一个 asp.net 网页表单页面。在页面中，我有一个 div 标签，我已将它设置为用作 jQuery 对话框。在 div 中是一些 jQuery 控件。我打开对话框并单击其中一个按钮开始回发。当页面回发时，代码隐藏并没有读取控件中的值。当然，稍微深入研究一下 html 就会发现该对话框将我的 div 移到我的 asp.net 表单标记之外的 html 页面底部。哎呀！

我该如何解决这个问题？

并不是说我的对话代码对这种情况有帮助：

 $("#dialog-copy").dialog({
        autoOpen: false,
        height: 200,
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
            'Cancel': function () {
                $(this).dialog('close');
            },
            'Yes': function () {
                $(this).dialog('close');
                $("[id*=btnCopy]")[0].click();
            }
        },
        open: function () {
            $(":button:contains('Yes')").addClass("blue");
        }
    });
     $("[id*=btnCopy]").live('mousedown', function (e) {
        e.preventDefault();
        $("#dialog-copy").dialog('open');
     });

一个典型的 div 标签（移到我的表单标签之外）是这样的：

<div id="dialog-copy" style="DISPLAY: none" title="Copy Schedule">
    <p>Please enter a schedule number:</p>
    <asp:Textbox runat="server" id="txtSchNo"></asp:Textbox>
</div>

单击“是”会触发调用回发的按钮。

【问题讨论】：

标签： jquery asp.net jquery-dialog

【解决方案1】：

这是一个已知问题，您必须将其附加到这样的表单中，并且您的普通 .NET 控件可以回发：

    open: function () {
        $(this).parent().appendTo("form");
        $(":button:contains('Yes')").addClass("blue");
    }

更新 jQuery 版本：

   $('#yourDIv').dialog({
        .....,
        appendTo: $('form'),        
       ....

    });

【讨论】：

【解决方案2】：

让您的对话框按钮功能以正确的名称向表单添加一个隐藏字段，即在提交表单之前使用对话框本身中的输入作为参考。

    buttons: {
        'Cancel': function () {
            $(this).dialog('close');
        },
        'Yes': function () {
            $(this).dialog('close');
            $('#dialog-copy').find('input').each( function() {
                var $this = $(this);
                $('form').append('<input type="hidden" name="'
                                   + $this.attr('name')
                                   + '" value="'
                                   + $this.val() + '" />');
            });
            $("[id*=btnCopy]")[0].click();
        }
    },

【讨论】：

从客户端添加的新输入将再次对服务器端 .NET 代码不可见。不是吗？
@FloydPink - 如果它与表单上的现有输入具有相同的名称，则不是。它应该被重建，就好像它一开始没有从表单中删除一样。当它被回发时，它不知道它来自哪个实际的 DOM 元素。
啊，好吧。然后它需要从原始输入中复制 id 属性。
@FloydPink - 不，回发时不使用 id 属性。唯一重要的是属性的名称。
好的。谢谢你耐心的解释。 +1 :)

【解决方案3】：

你可以试试这个。在对话框中保留常规的 html 输入，并在单击回发按钮之前将 html 文本输入中的值移动到 asp:TextBox 或就此而言，甚至是 asp:HiddenInput。

喜欢：

$("#dialog-copy").dialog({
        autoOpen: false,
        height: 200,
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
            'Cancel': function () {
                $(this).dialog('close');
            },
            'Yes': function () {
                $(this).dialog('close');
                $('input[id$=_txtSchNo').val($('#dummy').val());
                $("[id*=btnCopy]")[0].click();
            }
        },
        open: function () {
            $(":button:contains('Yes')").addClass("blue");
        }
    });
     $("[id*=btnCopy]").live('mousedown', function (e) {
        e.preventDefault();
        $("#dialog-copy").dialog('open');
     });

还有标记：

<form>
....
<asp:Textbox runat="server" id="txtSchNo"></asp:Textbox>
...
</form>
<div id="dialog-copy" style="DISPLAY: none" title="Copy Schedule">
    <p>Please enter a schedule number:</p>
    <input type="text" id="dummy" />
</div>

【讨论】：