jQuery and ASP.NET

February 16, 2009

How to Create an ASP.NET AJAX ModalPopUp Extender Dynamically




You may need to create a ModalPopUpExtender dynamically. Here's some code on how to do so:

Add the following markup in your page:


<body>


<form id="form1" runat="server">


<asp:ScriptManager ID="ScriptManager1" runat="server">


</asp:ScriptManager>


<div>


<asp:Panel ID="Panel1" runat="server">


    <asp:Button ID="Button1" runat="server"


    Text="CreateModal" OnClick="Button1_Click" />


</asp:Panel>


<asp:Panel ID="ModalPanel" runat="server"


    Style="display: none"


    BackColor="Gray">


    Dynamic ModalPopup!


    <asp:Button ID="btnCancel" runat="server" Text="Close Me" />


</asp:Panel>


</div>


</form>


</body>




Then in the code behind, add the following code. On clicking the Button, we have added code to create another button dynamically which contains functionality to show and hide a ModalPopUp

C#


protected void Button1_Click(object sender, EventArgs e)


{


    Button btnNew = new Button();


    btnNew.ID = "Button2";


    btnNew.Text = "Click Me to Show PopUp";


 


    AjaxControlToolkit.ModalPopupExtender modalPop =


        new AjaxControlToolkit.ModalPopupExtender();


    modalPop.ID = "popUp";


    modalPop.PopupControlID = "ModalPanel";


    modalPop.TargetControlID = "Button2";


    modalPop.DropShadow = true;


    modalPop.CancelControlID = "btnCancel";


 


    this.Panel1.Controls.Add(modalPop);


    this.Panel1.Controls.Add(btnNew);


 


}




VB.NET


Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)


        Dim btnNew As New Button()


        btnNew.ID = "Button2"


        btnNew.Text = "Click Me to Show PopUp"


 


        Dim modalPop As New AjaxControlToolkit.ModalPopupExtender()


        modalPop.ID = "popUp"


        modalPop.PopupControlID = "ModalPanel"


        modalPop.TargetControlID = "Button2"


        modalPop.DropShadow = True


        modalPop.CancelControlID = "btnCancel"


 


        Me.Panel1.Controls.Add(modalPop)


        Me.Panel1.Controls.Add(btnNew)


 


    End Sub




'Like' us on our FaceBook page if you find this blog useful. Thanks!


Did you like this post?
kick it on DotNetKicks.com Save on Delicious
subscribe via rss subscribe via e-mail
print this post follow me on twitter


About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

5 Responses to "How to Create an ASP.NET AJAX ModalPopUp Extender Dynamically"
  1. Anonymous said...
    October 22, 2009 5:53 AM

    This code is not wirking man rather it shows error "Control 'popUp' of type 'ModalPopupExtender' must be placed inside a form tag with runat=server.
    So how can I assign runat=server to dynamically created modalpopup extender.

  2. Suprotim Agarwal said...
    October 23, 2009 7:05 AM

    You could alternatively add a PlaceHolder control to the page and then add these controls to it. Most of the times, it solves the issue.

  3. Shail Nautiyal said...
    October 27, 2010 5:25 AM

    Thanxx Man...!!!

    -----Shail Nautiyal

  4. Anonymous said...
    January 11, 2011 3:44 AM

    Good lord I wish this would work.

    I've been scouring the web for how to build a simple popup for hours already.

    I just want to display a few database details in a popup display.

    This just shows the Click Me To Show Popup button and when I click it, the button disappears.

    Never do I get to see a popup.

    I'm very disappointed with the sorry state that modern web development is in.

  5. Anonymous said...
    January 11, 2011 5:30 AM

    The example shown in the article works fine for me atleast. Are you creating the popup dynamically as this article suggests or the popup already exist in your code? If it exists, make sure not to put the panel that is bound on popupcontrol into an updatepanel. Instead put the panel outside of the updatepanel and the updatepanel should be inside this panel. That's a very common mistake developers make.

    -- Rick

 

Copyright © 2009-2011 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions