C# .NET - How can i call a popupextender in code

Working with Modal Popup extender control.

This blog discusses about the ASP.NET AJAX ModalPopupExtender control. In this blog we will see how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, showing/displaying/calling the modal popup from a hyper link control within the gridview control and finally some important javascript methods of the ASP.NET AJAX ModalPopupExtender control. So first lets see how to use the ModalPopupExtender control.

How to use the ASP.NET AJAX ModalPopupExtender control?

Drag and drop a ASP.NET button/LinkButton/ImageButton or any control to an aspx page. To add a ModalPopupExtender control, drag and drop the control from the toolbox or Select the any of the ASP.NET controls like (button/LinkButton/ImageButton or any other control) and click the button with a greater than symbol as shown below.

When you click the arrow you will get a menu with an “Add Extender” option as shown below.

Click the “Add Extender” menu option and select “ModalPopupExtender” from “Extender Wizard” popup. Once you have added the ModalPopupExtender control you need an ASP.NET panel control. This is because the ModalPopupExtender control will show the content of the Panel control as a popup. Add ASP.NET Panel control and the content which you want to display as popup into the ASP.NET Panel control. Sample code with all the above requirement is pasted below. Don’t forget to drag and drop the ScriptManager control to the page.

From the above code one can see I have a ScriptManager, an asp:Button control, an asp:Panel control, some contents inside the panel control and then we have the ModalPopupExtender control. Normally when you attach an ASP.NET panel control to a ModalPopupExtender control it will become invisible in the HTML rendered to the browser and if due to some reason if the panel control is being displayed in the page then just set the "Style" property' “display” attribute to “none” as in the above e.g. Now when you click the button you will see a popup as shown below.

So it should look something like

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register TagPrefix="cc2" TagName="AddressList" Src="~/SelectAddressControl.ascx" %>

<!-- This update panel is vital else the codebehind cannot show the modal dialog -->
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
   <asp:Label ID="LabelPostcode" runat="server" Text="Postcode" AssociatedControlID="Postcode"></asp:Label>
   <asp:TextBox ID="Postcode" runat="server" MaxLength="9"></asp:TextBox>

    <!-- The button  with the code behind -->
    <asp:Button ID="FindAddressButton" runat="server" Text="Find Address" CausesValidation="false" OnClick="FindAddress_Click" />
   

   <!-- The modal panel -->
   <asp:Panel ID="ModalPanel" runat="server" CssClass="modalPopup" >
      <!-- Inside we have a user control -->
      <cc2:AddressList ID="AddressList" runat="server" />
   </asp:Panel>

        <!-- We have to have a dummy control to hold the start event we handle in code behind -->
        <asp:Button ID="MpeFakeTarget" runat="server" CausesValidation="False" Style="display: none" />

        <!-- We have to use the long name for the cancel button as we have a user control-->
        <cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="MpeFakeTarget"
          PopupControlID="ModalPanel" DropShadow="true" CancelControlID="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$AddressList$CancelButton"
          BackgroundCssClass="modalBackground"  />
      </ContentTemplate>
    </asp:UpdatePanel>

Server side events do work with the ModalPopupExtender. What you need to do is to create a button with a display style set to none. Then set the TargetControlID property of the ModalPopupExtender to the hidden button ID.

<asp:Button ID="btnShowModal" runat="server" Text="Show" OnClick="btnShowModal_Click" />
<asp:Button ID="btnHidden" runat="server" Style="display: none" />
<ajaxControlToolkit:ModalPopupExtender ID="modalExtender" runat="server"
TargetControlID="btnHidden" PopupControlID="divId" />

In the OnClick handler show the modal:

modalExtender.Show();

PopupControlID="Panel1" CancelControlID="LinkButton4" PopupDragHandleControlID="btnMsg"

ID="ModalPopupExtender1" runat="server" />

<asp:Button ID="Button3" runat="server" Text="Take Input" />

<asp:Panel ID="Panel1" runat="server" Height="80" CssClass="ModalWindow">

<%--Take textboxes here--%>

<asp:LinkButton ID="LinkButton4" runat="server" Text="X" />

Records updated

</asp:Panel>

 protected void Button2_Click(object sender, EventArgs e)
  {
    ModalPopupExtender2.Show();
  }