Open UserControl As PopUp on ImageButton_Click Or Whatever Else Will Work

Question

User1879451342 posted

I have an ASPX page.  On this ASPX page, there is an image button.  

I also have a user control (ASCX).

Upon clicking the image button, I would like the ASCX to pop-up in a modal dialog box.

I have the AjaxControlToolkit in my solution.

Is it possible to open an ASCX control from a button on an ASPX page?  

I've tried several approaches with no success and am looking for fresh ideas.

Thanks, cj

Answer 1

User1316246260 posted

Could we see your code.

Answer 2

User1644755831 posted

Hello Polymorphic,

Put this user control UCFilter.ascx in aspx page and call that page in the JS. Usercontrols cannot work alone independently. Now you can use that page to show in iframe and popup that iframe using jQuery.

var href= "path to your aspx";
$('body').after('<iframe id="iframepopup" style="padding:0;" src="' + href +    '"></iframe>');
 $dialog = $("#iframepopup")
   $dialog.dialog(
    {
      autoOpen: false,
      title: title,
      position: 'center',
      sticky: false,
      width: dimensions.DialogWidth,
      height: dimensions.DialogHeight, draggable: true,
      resizable: false,
      modal: true,
     close: function () {
        $(this).dialog('destroy');
        $("#iframepopup").remove();
    }
  });


    $dialog.load(function () {
     $dialog.dialog('open');
    $dialog.css("width", "100%"); // reset the width that is set by jquery UI
   });

Hope this helps.

With Regards,

Krunal Parekh

Answer 3

User1879451342 posted

What I ended up doing is creating a second user control that contains ONLY the image button.  I removed the image button from ASPX and replaced it with the new ASCX.  From the new ASCX, I was able to call the desired ASCX.

In main ASPX page, I reference the new ASCX:

<asp:UpdatePanel ID="dshupdatePanel8" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<uc1:LocSearcher2 runat="server" id="LocationSearch2" />
 </ContentTemplate>
</asp:UpdatePanel>

In the new ASCX, I reference the target ASCX:

<asp:ImageButton ID="btnLocSearch" runat="server" ImageUrl="~/img/label_locsearch.gif"></asp:ImageButton>
asp:Panel ID="loc_pnlManage" runat="server" Width="350" HorizontalAlign="center"
BackColor="LightGray" BorderStyle="Outset">
<uc1:LocSearcher runat="server" ID="lSearcher" />
</asp:Panel>
<AJAX:ModalPopupExtender ID="btnLocSearchExtender" runat="server" TargetControlID="btnLocSearch" PopupControlID="loc_pnlManage" X="600" Y="20" />