How to add an <asp:button> to a jquery ui dialog containing an iframe?

@lizzie 

You can add an asp:Button to a jQuery UI dialog containing an iframe by first creating the dialog with an iframe as its content, and then adding the asp:Button to the content of the iframe.

Here's an example of how you can achieve this:

1. Create a jQuery UI dialog with an iframe as its content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

$(document).ready(function(){
  $("#dialog").dialog({
    autoOpen: false,
    width: 600,
    height: 400,
    modal: true,
    open: function() {
      $(this).find('iframe').attr('src', 'yourpage.aspx');
    }
  });
});

1. Add an asp:Button to the content of the iframe in yourpage.aspx:

1

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

1. Handle the click event of the asp:Button in your code-behind file:

1
2
3
4

protected void btnSubmit_Click(object sender, EventArgs e)
{
    // Add your code here
}

1. Open the dialog containing the iframe when needed:

1
2
3
4

<button onclick="$('#dialog').dialog('open');">Open Dialog</button>
<div id="dialog" title="Dialog Title">
  <iframe width="100%" height="100%"></iframe>
</div>

With these steps, you should now have a jQuery UI dialog containing an iframe with an asp:Button in it. When the asp:Button is clicked, the associated server-side code will be executed.