Load User Control in Pop up after its load

Question

I'm trying to load a user control in a popup but after its firing to decrease the home page loading time, is that possible use the Ajax ModalPopUp Extender or is there any other suggested popups. Can I use frames instead of user control or its same ?

Answer 1

Being that you're using ASP.NET, one easy option is to use jQuery UI and a simple div/iframe as a popup.

JavaScript:

<script type="text/javascript">
    function showPanel(panelID, pageUrl) {
        $panel = $('#' + panelID);

        $panel.html('<iframe src="' + pageUrl + '"></iframe>');
        $panel.dialog();
    }
</script>

ASPX:

<asp:LinkButton runat="server" id="lbtn1" OnClientClick="showPanel('dialog', '/myControlPage.aspx');return false;">
  Show Popup
</asp:LinkButton>
<div id="dialog">
</div>

If your ASPX control is display-only, you could use AJAX to retrieve the content of the page:

<script type="text/javascript">
function showPanel(panelID, pageUrl) {
    $panel = $('#' + panelID);

    $.ajax({
        url: pageUrl,
        type: "GET",
        dataType: "html",
        async: false,
        data: {},
        success: function (obj) {
            $panel.html(obj).html();
            $panel.dialog();
        }
    });
}
</script>

But this limits the ability of your embedded page to post back "correctly." Any postbacks will display ONLY the inner page, and completely remove the "parent" page when returning from the postback.

Answer 2

You could use an updatePanel to achieve this.

Here is an introduction to update panels

Envelope your user control within an updatepanel and set it to visible false. Setting a control to visible false makes sure not to render it and thus it will not affect your load time.

You can then use a Postback trigger on the update panel to make the control visible true and show its contents.

You can use a timer as a trigger to the load after a few miliseconds. Disable the timer on postback. Here is a tutorial on refreshing an update panel using a timer.

Postbacks on update panels are fired via ajax. All the javascript needed for this is generated by the update panel control itself.

Advantage of using this is that the user control is still on the same page and can interact with the other controls on the page.