asp.net form controls are unreadable when in a jQuery dialog, how do you fix it?

问题

I've got a prickly one. I have an asp.net web forms page. In the page I have a div tag that I've set to be used as a jQuery dialog. In the div is some jQuery controls. I get the dialog to open up and clicking on one of the buttons commences postback. When the page was posting back the code-behind hasn't been reading the values in the controls. Of course a little delving into the html reveals that the dialog takes my div and moves it to the bottom of the html page OUTSIDE my asp.net form tag. Urk!

How the hell do I get around this?

Not that it really helps the situation by my dialog code is here:

 $("#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');
     });

And a typical div tag (that is moved to outside my form tag) is looking like this:

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

Clicking 'Yes' fires the button that calls the postback.

回答1:

It's a known issue, you have to append it to the form like this and your normal .NET controls can postback:

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

UPDATE for newer versions of jQuery:

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

    });

回答2:

Have your dialog button function add a hidden field to the form with the correct name, i.e., using the input in the dialog itself for reference, before it submits the form.

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

回答3:

You could try this. Keep a regular html input within the dialog and just before clicking the postback button move the value within the html text input to the asp:TextBox or for that matter even a asp:HiddenInput.

Like:

$("#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');
     });

And the markup:

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

来源：https://stackoverflow.com/questions/7591601/asp-net-form-controls-are-unreadable-when-in-a-jquery-dialog-how-do-you-fix-it

标签

jquery

ASP.NET

jquery-dialog