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

Please install Silverlight or click download to watch video locally.

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    Video   |   Download    Video   |   VB Code    C# Code

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

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

Comments : 33

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" %>

">www.w3.org/.../xhtml11.dtd">

">www.w3.org/.../xhtml">

   

   Untitled Page

   

   

   

   

       

       

           Now is the time for all good men to come to the aid of their country.

       Check to change the style

       

       

           

               choose the style you like

           

           

               "Choose this style."

           

           

               "Choose this style."

           

           

               "Choose this style."

           

           

               "Choose this style."

               

           

           

           

           

     

           

               TargetControlID="LinkButton1" PopupControlID="Panel1"

               BackgroundCssClass="modalbackground" CancelControlID="cancelButton"

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

           

       

   

   

------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" %>

                 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" %>

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

How Do I: Use the ASP.NET AJAX Popup Control Extender? : The Official Microsoft ASP.NET Site

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

Please install Silverlight or click download to watch video locally.

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    Video   |   Download    Video   |   VB Code    C# Code

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

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

Comments : 33

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" %>

">www.w3.org/.../xhtml11.dtd">

">www.w3.org/.../xhtml">

   

   Untitled Page

   

   

   

   

       

       

           Now is the time for all good men to come to the aid of their country.

       Check to change the style

       

       

           

               choose the style you like

           

           

               "Choose this style."

           

           

               "Choose this style."

           

           

               "Choose this style."

           

           

               "Choose this style."

               

           

           

           

           

     

           

               TargetControlID="LinkButton1" PopupControlID="Panel1"

               BackgroundCssClass="modalbackground" CancelControlID="cancelButton"

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

           

       

   

   

------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" %>

                 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" %>

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.

jirizarry : On May 20, 2008 10:13 AM said:

I am using the pop control extender in a masterpage file in a vb.net web application.  The popup control extender works fine in all pages except in a page I have for viewing reports which uses a Crystal Report Viewer.

In this particular page, the pop control extender does not work.  I am not able to see the popups when I click the corresponding links.

Is there a reason for this?  Does it have a fix or is it just that they do not work together?

Thanks,

Jamie

alexdinu : On June 03, 2008 9:54 AM said:

Thanks for the video. I was wondering if there is a way to display the panel by different events like mouseover.

Thanks

Alex

MarkRobinson : On July 04, 2008 12:29 AM said:

wondering if graphis could also be displayed

blackoutslo : On July 17, 2008 1:35 PM said:

I downloaded the code and ran it on winsows vista with iis, and it works like the example withouth ajax..when I click on the button all three labels refresh

higanesh2003 : On July 18, 2008 6:43 AM said:

I am getting an error called cannot assign to '[string]'..

I am using C# and i followed your video

cv_vikram : On August 06, 2008 1:27 PM said:

It is simple and good....

sonalbagdiya : On August 06, 2008 7:08 PM said:

its nice video

BrickellCoder : On August 09, 2008 10:30 PM said:

I'm having problems with the popupcontrolextender when I use the < and > characters as part of the value inside the textbox. If I take those characters out, it works fine.

Here's the ASP code:

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

   

       

           

               

                   

                   

               

               

           

       

   

   

       PopupControlID="Panel1" CommitProperty="value" CommitScript="" Position="Bottom">

   </ajaxToolkit:PopupControlExtender>  

Here's the VB code

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

   Function getlistselections(ByVal emailList As CheckBoxList) As String

       Dim result As String = ""

       For Each lst As ListItem In emailList.Items

           If lst.Selected AndAlso lst.Value.ToString <> "" Then

               result = result + lst.Value.ToString + ","

           End If

       Next

       getlistselections = result

   End Function

   Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click

       Dim selections As String = GetListSelections(CheckBoxList1)

       If Not (String.IsNullOrEmpty(selections)) Then

           PopupControlExtender.GetProxyForCurrentPopup(Me.Page).Commi t(selections)

       Else

           PopupControlExtender1.Cancel()

       End If

       CheckBoxList1.ClearSelection()

   End Sub

dead_zone2006 : On August 10, 2008 8:53 AM said:

i want ot ask something if i have text and value for RadioButtonList and i want to get the value that user selected in variable and use it in vb code

grin93 : On August 13, 2008 8:18 PM said:

Thank for great demos It helps a lot.

But for some reason on one of my computers I have no audio.

What should I do to fix it? I am using Media Player 11 on Windows XP on both machines.  One has audio of demos working

fine another one is silent.

Thanks again

adeel2083 : On September 25, 2008 2:34 AM said:

Hi

I m very new to web application. I use your demo to make a popup application.

I have a question

I have a textbox and an OK button when user click the ok button the value in the textbox will store in a variable.

u can mail answer on adeel2083@yahoo.com

printmaker : On October 11, 2008 8:51 AM said:

Thank you for the popup control extender demo. However, can you use the control for Gridviews, listviews, etc. in Visual Studio 2008; is there code for that?

KuntalShah : On October 24, 2008 1:05 AM said:

Thats a very good example. But my requirements are something different. 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 with Yes/No buttons based on a certain condition and executes the remaining code based on the Yes/No button clicked. I went through your code, but this didn’t helped much since it only shows popup when I click the submit button on my asp page.Can you share some thoughts on this.

SwooshMojo : On November 06, 2008 6:43 PM said:

KuntalShah I believe I have an answer to your comment.

First, Make a dummy button to use for the okControlId. In this button set the style ="display :none"

Next, Add another button. In this button do your logic in the code behind and afterwards set your extender.show()

This will allow you to condition the popup extender.

Also, you can hide your extender like this extender.hide()

Here is an example:

HTML

<asp:Button id ="btnTestNew" runat ="server" Text ="OKFAKE" style="display :none"  />

<asp:Button id ="btnTest" runat ="server" Text ="OKREAL"/>

CODE

Protected Sub btnTest_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnTest.Click

       Dim test As String

       test = "WHOOPIE IT WORKED"

       Me.ModalPopupExtender1.Show()

   End Sub

dmurphy7299 : On December 01, 2008 1:34 PM said:

Great Demos!  I'm using the popup extender control in a gridview.  I have an image in each row that displays a panel on mouseover.  It works fine until I try to use it on a user control.  I think it's failing on the javascript Find method.  It can't find the control using the behaviorID that I set for the image control.  Do you know how I can get around this?

amitranjan : On December 05, 2008 3:50 AM said:

can i open any existing page in popup extender....???

djibril_chimere_DIAW : On December 30, 2008 3:19 AM said:

Thanks! Jërëjëf!

panand : On December 31, 2008 4:29 PM said:

Hi Joe,

This is a great Demo! Unfortunately the PopUpExtender fails to pass the value to the text box when the RadioButtonList is dynamically built from a database source.

I compared the source code of the pages, but I do not see any noticeable differences between this example and the one that I created.

When I debugged the code, SelectedValue returned empty. And when I tried to use SelectedItem.Value instead and the application threw an exception.

I disabled the database code and hard-coded the radiobutton list and the app worked!!!

Any help is appreciated.

thanks,

Andy

panand : On December 31, 2008 5:39 PM said:

Hi again Joe,

I figured 2 ways out.

I forgot to close the DataReader using the Close() method.

But, the one below was something that I tried first.

I explicitly iterate thro' the DataReader Object and added ListItem Objects to the RadioButtonList control.

In Short, I replaced this code:

makeReader = sqlCmd.ExecuteReader()

rblMake.DataSource = makeReader

rblMake.DataBind()

With this:

Try

While makeReader.Read()

Dim tempMake As String, tempMakeID As Integer

tempMakeID = CInt(makeReader("MakeID"))

tempMake = CStr(makeReader("MakeName"))

Dim lstItem As New ListItem

lstItem.Text = tempMake

lstItem.Value = tempMakeID

rblMake.Items.Add(lstItem)

End While

Catch ex As Exception

Finally

makeReader.Close()

End Try

The application works using either of the 2 fixes.

Thanks!

-Shanthanu

bidware : On January 03, 2009 4:38 AM said:

How exactly can we use this ajax control to popup an .aspx page with it's own controls on it.  I don't necessarily want to embed all the functionality of the popup window in the original page, so that's why I want to just show an .aspx page with all it's own functionality.

Thanks!

t_prabhu : On January 07, 2009 3:45 AM said:

The below link will help you on what you exactly want

www.codeplex.com/.../ProjectReleases.aspx

cyge : On January 09, 2009 4:09 PM said:

I have a modalpopupextender that when it displays the background creates scrollbars (vertical & horizontal) and extends the the background beyond the visible page.  Any thoughts?

btech_saurabh : On March 02, 2009 11:36 AM said:

Hi ....

any body tell me....

can we dynamically load usercontrol in this popup extender??

kind regards

Saurabh

Mr D : On April 13, 2009 9:26 PM said:

Hi, keep up the good work! I followed this tutorial and created a popup to an imagebutton for editing a field. In the popup I have a textbox and a button. When I click on the button I get a jscript postback error (this._postBackSettings.async is null or not an object). The weird thing is that I never used to get it when I was using vs2005 but when I upgraded to vs2008 and ajax 3.5 I have this problem now. Can anybody help me?

nirupamatalele : On July 08, 2009 5:40 PM said:

Hi,

I want to capture the closing event of the popupcontrol extender, so that whenever the user clicks somewhere else and the popup disappears a javascript function can be called.

Please let me know how can that be done.It would be really of great help if you can provide some input on how I can approach this. Thanks in advance.

nirupamatalele : On July 08, 2009 5:40 PM said:

Hi,

I want to capture the closing event of the popupcontrol extender, so that whenever the user clicks somewhere else and the popup disappears a javascript function can be called.

Please let me know how can that be done.It would be really of great help if you can provide some input on how I can approach this. Thanks in advance.

Leave a Comment

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