在 jQuery 对话框中时，asp.net 表单控件不可读，如何修复它？

Question

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

我到底该如何解决这个问题？

并不是说它确实对我的对话框代码有帮助，如下所示：

 $("#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>

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

Answer 1

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

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

更新版本的 jQuery：

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

    });

Answer 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();
        }
    },

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