How Do I: Use the ASP.NET AJAX Popup Control Extender?

This video demonstrates the use of the Popup control extender that ships with the ASP.NET AJAX Control Toolkit. Learn how to extend a TextBox control so that, when it receives focus, a popup dialog will appear with a list of options.

Presented by Joe Stagner

Duration: 8 minutes, 51 seconds

Date: 26 January 2007

Watch the video   |   Download the video   |   Get VB code  or  C# code

Video downloads: WMV | Zune | iPod | PSP | MPEG-4 | 3GP

Audio downloads: AAC | WMA | MPEG-4 | MPEG-3 | MPEG-2

Comments : 7

Leave a Comment

alejorom : On March 12, 2008 5:33 PM said:

Im having problems with AJAX update panels and accented words like á,é,í,ó,ú. AJAX update panel change them to another character.

Any help about that

JoeStagner : On March 15, 2008 12:44 PM said:

Feel free to email me and we can look at your code.

jmsides : On March 16, 2008 6:27 PM said:

Joe,

I am getting and error from your AJAX Control Modal Popup Extender Demo; Microsoft JScript runtime error: Object expected

www.asp.net/.../video-84.aspx

I have try to get this to work in two different ways;

First my code as percieved from your demo -

----------------------------------------------------------- ----------------------------------------

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/.../xhtml11.dtd">

<html xmlns="www.w3.org/.../xhtml">

<head runat="server">

   <link href="project.css" rel="stylesheet" type="text/css" />

   <title>Untitled Page</title>

   <script type="text/javascript">

      var styleToSelect;

      function onOk() {

      document.getElementById('Paragraph1').className = styleToSelect;

      }

      </script>

</head>

<body>

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

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

   <div style="height: 411px">

       <br />

       <p id="Paragraph1">

           Now is the time for all good men to come to the aid of their country.</p>

       <asp:LinkButton ID="LinkButton1" runat="server">Check to change the style</asp:LinkButton>

       <br />

       <asp:Panel ID="Panel1" runat="server"  Height="204px" Style="display: none" CssClass="modalPopup">  --Style="display: none "Width="233px"

           <p>

               choose the style you like</p>

           <input id="RadioA" type="radio" name="Radio" onclick="styleToSelect" />

           <label class="sampleStyleA" for="RadioA">

               "Choose this style."</label><br />

           <input id="RadioB" type="radio" name="Radio" onclick="styleToSelect" />

           <label class="sampleStyleB" for="RadioB">

               "Choose this style."</label><br />

           <input id="RadioC" type="radio" name="Radio" onclick="styleToSelect" />

           <label class="sampleStyleC" for="RadioC">

               "Choose this style."</label><br />

           <input id="RadioD" type="radio" name="Radio" onclick="styleToSelect" />

           <label class="sampleStyleD" for="RadioD">

               "Choose this style."</label><br />

               <br />

           <div align="center">

           <asp:Button ID="okButton" runat="server" Text="OK" />

           <asp:Button ID="cancelButton" runat="server" Text="Cancel" />

           </div>      

           <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

               TargetControlID="LinkButton1" PopupControlID="Panel1"

               BackgroundCssClass="modalbackground" CancelControlID="cancelButton"

               DropShadow="True" OkControlID="okButton" onokscript="onOK()">

           </cc1:ModalPopupExtender>

       </asp:Panel>

   </div>

   </form>

</body>

</html>

------css code------------------------------------------------------- ----------------------------------------------------------- ------------------

div#DIV1

{

position: relative;

float: right;

background: yellow;

padding: 1px;

}

.asplinkbutton

{

background-color: green;

}

.watermark

{

background: #FFAAFF;

}

.popupControl{

border: 2px solid Black;

background-color: #AAD4FF;

position:absolute;

visibility:hidden;

border-color:Black;

border-width:2px;

}

.modalPopup

{

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:250px;

}

.sampleStyleA

{

background-color:#FFF;

}

.sampleStyleB

{

background-color:#FFF;

font-family:Monospace;

font-size:10pt;

font-style:italic;

font-weight:bold;

}

.sampleStyleC

{

background-color:#ddffdd;

font-family:sans-serif;

font-size:10pt;

font-style:italic;

}

.sampleStyleD

{

background-color:blue;

color:white;

font-family:Arial;

font-size:10pt;

}

.modalBackGround

{

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

----------------------------------------------------------- ----------------------------------------------------------- ----------------------------

When I could not get my code to work I copy/past'd Jonathan Shen's post into a new ajax web site (download from your demo site is a diffent project).

forums.asp.net/.../1762667.aspx

This code gives me the same error; Microsoft JScript runtime error: Object expected

I did need to make two changes to the code;

Johan's code looks like ---------------------------------------  

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1"

                 PopupControlID="PanelContainer" BackgroundCssClass="modalBackground" DropShadow="true"

                  OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton"  />

My code in the new project looks like -----------------------------------------

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

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

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

TargetControlID="LinkButton1" PopupControlID="Panel1"

BackgroundCssClass="modalbackground" CancelControlID="cancelButton"

DropShadow="True" OkControlID="okButton" onokscript="onOK()">

</cc1:ModalPopupExtender>

I do love your viedo's.  Please keep'm coming.

Thanks

salman_sulaiman_1979 : On April 20, 2008 4:01 AM said:

Greetings Joe!

this is a great demo, I am going to give it a try, I am downloading the video now. To be able to have popups in a web application is really fantastic!

Mainly, I would need a popup after I excute a certain server side code, and then return  the results for the user in case of an error in a popup.

There is something else I wonder if it can be done with Ajax, or maybe SilverLight SDK which I haven't had a look at, It is when the whole web pages gets shaded out and then once the user clicks on the popup message, then the page goes back to normal state and becomes accessable. I tried to look for any demos for that on the Ajax videos page, but couldn't find anything for shading the page.

~salman~

salman_sulaiman_1979 : On April 20, 2008 4:04 AM said:

ohh! I don't see my picture next to my comment, I did upload my photo when I was editing my profile the first time, so weird it is not visible here. I'll probably have to try to upload it again.

~salman~

salman_sulaiman_1979 : On April 20, 2008 4:38 AM said:

Dear Joe,

I have been trying to find a way to control the popup from my server side code, what I need to do is display the popup based on a certain condition, so far  the popup panel will come out whenever I click the submit button.

any suggestions Joe?

thanks mate!

~salman~

anil.rayapudi@pbsystems.com : On May 15, 2008 1:37 AM said:

How to use the popup extender dynamically in our web page  i want to keep popupextender as a tooltip for the grid.

Leave a Comment

You must be logged in to leave a comment. Click here to log in.