Search code examples
c#asp.netajaxmodalpopupextender

ModelPopupExtender not showing from code behind on pageLoad

I need to display popup when page loads. I have used ModelPopupExtender. It does shows on it's TargetControlID click but not showing on page load from code behind. I have check many solutions on stack but none of them are working for me.

protected void Page_Load(object sender, System.EventArgs e)
{
    this.mpOTP.Show();
}

 <asp:Button ID="activateMpOtp" runat="server" Text="Open" ClientIDMode="Static"/>
    <asp:ModalPopupExtender ID="mpOTP" runat="server" BackgroundCssClass="popup-overlay" PopupControlID="pnlOTP" CancelControlID="closeOTP" TargetControlID="activateMpOtp"></asp:ModalPopupExtender>

    <asp:Panel ID="pnlOTP" runat="server" CssClass="popup-dialogue">
    </asp:Panel>

Getting this error in console enter image description here

Solution

  • Your markup is not correct.

    First of all, you need to register AjaxControlToolKit controls by using the following directive at the top of your page markup, just after the page directive.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act %>

    Then, your markup should look like the following. Problems with your markup are listed below.

    • You have not included markup for the cancel button
    • and also your control prefix is wrong since it should not be asp which is the prefix is for ASP.Net Microsoft controls and not for AJAXControlToolKit (NOTE: you give this prefix in your register directive for AjaxControl,Toolkit, which is act in code sample given, but you could give any prefix and use it for modalpopuextender)

    Correct markup for ModalPopupExtender

    <asp:Button ID="activateMpOtp" runat="server" Text="Open" ClientIDMode="Static"/>
<act:ModalPopupExtender ID="mpOTP" runat="server" BackgroundCssClass="popup-overlay"
         PopupControlID="pnlOTP" CancelControlID="closeOTP"
         TargetControlID="activateMpOtp"></act:ModalPopupExtender>

<asp:Panel ID="pnlOTP" runat="server" CssClass="popup-dialogue">
  <div class="header">
    Modal Popup
  </div>
  <div class="body">
    Your content goes here
    <br />
    <asp:Button ID="closeOTP" runat="server" Text="Close" />
 </div>
</asp:Panel>