Using the ASP.NET AJAX ModalPopup in an ASP.NET 3.5 Application

Posted by: Malcolm Sheridan , on 3/12/2009, in Category ASP.NET AJAX
Views: 221826
Abstract: The following article demonstrates how to use the Microsoft Ajax Control Toolkit’s Modal Popup with an ASP.NET 3.5 application.
Using the ASP.NET AJAX ModalPopup in an ASP.NET 3.5 application
 
When developing an ASP.NET application, one important aspect that is difficult to code against is stopping users clicking controls on a page when they have already submitted a request. There are several ways to do this, the most common being a JavaScript function to disable control elements after an event has been raised. Thankfully this task is a lot easier thanks to the Ajax Control Toolkit and the ModalPopup control. The Ajax Control Toolkit is a separate download that is built on top of the Microsoft ASP.NET Ajax framework. The toolkit allows you to create extenders and controls to enhance the current ASP.NET server controls.
The toolkit can be downloaded from http://tinyurl.com/ajax-toolkit.   Information on how to install the toolkit can be found at http://tinyurl.com/toolkit-info.
Let’s write some code. Open Visual Studio 2008 and choose File > New > Web > ASP.NET Web Application. Because the ModalPopup uses cascading style, I’m adding an ASP.NET Theme folder to the project. Right click the project and choose Add > Add ASP.NET Folder > Theme. Name the theme ‘Modal’. Under the theme add a new cascading style sheet. Your project should look like the following:
Modal Pop1
Open the Styles.css file and add the following code:
.modalBackground
{
      background-color: Yellow;
      filter: alpha(opacity=60);
      opacity: 0.6;
}
 
.modalPopup
{
      background-color:#ffffdd;
      border-width:3px;
      border-style:solid;
      border-color:Gray;
      padding:5px;
      width: 350px;
      height:300px;
}
The classes above will be used to style the ModalPopup control. For the theme to be available to the project, you need to update the web.config file with the following code:
<pages theme="Modal">
This instructs the website to use the Modal theme throughout the website. This is a simple way to centrally manage styles in a website.
The next step is to add a reference to the Microsoft Ajax Control Toolkit.   To do this right click on the Toolbox and select Choose Items. The following dialog box will appear:
Choose Toolbox Items
Browse to where you have installed the Microsoft Ajax Control Toolkit and click OK. This will add the Microsoft Ajax Control Toolkit to the Toolbox.
Open the Default.aspx page. Add the following code to the page:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
    Are you sure you want to know the answer?.
    <asp:Button ID="btnYes" runat="server" Text="Yes!" />
    <br />
    <asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
        sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
        ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
        quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
        velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
        voluptas nulla pariatur?
        <br />
        <asp:Button ID="btnClose" runat="server" Text="Close" />
    </asp:Panel>
For any of the toolkit controls to work, the page must contain a ScriptManager control. The ScriptManager manages client scripts for ASP.NET Ajax pages. Switch to the design view for the page. By hovering your mouse over the Panel control, you’ll see the smart tag appear. Click the smart tag and choose Add Extender:
Panel Modal
A new dialog will appear with the list of extenders that are available in the toolkit. Select ModalPopup Extender:
Extender Wizard
This will add the following code to the Panel control:
<asp:ModalPopupExtender TargetControlID="btnYes" ID="pnlModal_ModalPopupExtender"
        runat="server" DynamicServicePath="" Enabled="True" BackgroundCssClass="modalBackground"
        PopupControlID="pnlModal" CancelControlID="btnClose" DropShadow="true">
    </asp:ModalPopupExtender>
The properties that must be configured are:
·         PopupControlID – The ID of the control that will be displayed as modal popup
·         TargetControlID – The ID of the control that activates the modal popup
·         CancelControlID – The ID of the control that cancels the modal popup
·         BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
The code is almost complete. The last thing you need to do is ensure the Panel control that is being used as the modal popup is hidden until the user clicks the Yes! button. Update the Panel control with the following code:
<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" Style="display: none;">
The hard work is done. Run the website and when you click on the button to answer the question, a modal popup will appear, disabling the controls in the background.
Modal Popup
The ModalPopup is a great way to stop users clicking on controls when you don’t want them to. It provides greater control, which in turn will lead to increased accuracy and integrity of the data captured. The source code of this article can be downloaded from here. To see how to use the ModalPopup in a Master-Detail GridView scenario, take a look at this article by Suprotim Display Master-Detail Data with the ModalPopup Extender and GridView
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by aaa on Wednesday, April 8, 2009 4:44 PM
Code doesnt work,
Comment posted by Malcolm Sheridan on Friday, April 10, 2009 8:30 PM
@aaa
The code was tested on Firefox 3 and IE 8 and it worked.  What exactly isn't working?
Comment posted by xxx on Tuesday, August 4, 2009 4:41 AM
What an approch........... Walk when you talk
Comment posted by Aditya Barve on Thursday, November 26, 2009 9:28 AM
For me code is not working....
I am working on Windows Server 2003 and IE 6
Comment posted by Mansi on Thursday, February 4, 2010 5:17 AM
Can anyone tell me ....modal popupextender is not working on yes button bt an error is displaying on explorer - $common is null or not an object???
Comment posted by vishal on Friday, May 21, 2010 4:10 AM
I need to apply the theme through button click in asp.net through web applications on the hyperlink control .But i am not getting the solution to my working in web applications a well a on the internet....
Please give me the solutions to this problem  and send me the mail ....Full working  show... thanks to regards..  
Comment posted by Blasyo on Tuesday, November 23, 2010 2:51 AM
This is done in asp.net 3.5? Then why, Visual Studio 2008 says that filter and opacity are not known CSS property names?
Is there a way to set two CancelControls? I mean, I have a panel containing two buttons, "Yes" and "No", that pops after clicking the cancel button. I want both those buttons two close the panel. Tahnks.
Comment posted by Mr_PhongTran on Wednesday, March 9, 2011 3:19 AM
hj ! cam on moi nguoi nhe
Comment posted by jai vishwakrma on Tuesday, April 19, 2011 1:27 AM
bakwas ekdum bakwas code hai..chal hi nahi rha hai
Comment posted by Arunkumar on Friday, September 30, 2011 11:39 AM
Can i get the Code behind (.cs file) file for the btn_click(). The code is not working without it. When i click on the Yes! button, the popup panel is not displayed.
Comment posted by Thank You on Wednesday, January 4, 2012 3:29 PM
You method is highly effective.
Thank you for sharing your knowledge.
Comment posted by bindu on Monday, March 26, 2012 12:29 AM
Hi,
Thanks for the cool article but it is not working. Tried with both IE and Mozilla.
Getting warning: "Visual Studio 2008 says that filter and opacity are not known CSS property names".
Also, The code is not working. When i click on the Yes! button, the popup panel is not displayed.
Comment posted by PKSpence on Thursday, June 21, 2012 6:11 PM
Don't know why most folks are complaining this code doesn't work. It worked for me right "out of the box". Thanks for posting!
Comment posted by ARGH on Wednesday, December 5, 2012 1:26 PM
Argh!  I wish I could get this to work!
Comment posted by sss on Thursday, February 14, 2013 10:29 PM
s
Comment posted by Sainey on Friday, March 15, 2013 12:24 PM
Good job!  Thanks.
Comment posted by Manikandan on Monday, June 10, 2013 1:04 AM
Good Post! This was really helpful.  But still looking forward for a well designed dialog box.
Comment posted by Markus on Wednesday, August 7, 2013 8:24 AM
Very nice. Thanks!
Comment posted by laxmi on Thursday, August 22, 2013 11:22 PM
thanks
Comment posted by Shubham on Friday, December 6, 2013 4:29 AM
really nice sir ...
you can try another example of it here this is also very helpful...
http://www.alltechmantra.com/2013/12/how-to-use-pop-up-control-in-asp.net.html

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel