English German Spanish French Chinese

Sign In
Join

Home › Learn › ASP.NET AJAX Videos › How Do I: Use the ASP.NET AJAX Popup Control Extender?

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

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

Comments : 17

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

<title>Untitled Page</title>

var styleToSelect;

function onOk() {

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

}

</script>

</head>

<body>

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

<br />

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>

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

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

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

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

<br />

<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.

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:

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

<asp:TextBox ID="emailToTextBox" runat="server" Width="800"></asp:TextBox>

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:CheckBoxList ID="CheckBoxList1" runat="server">

<asp:ListItem Text="Email1" Value="'First Last' <email1@microsoft.com>"></asp:ListItem>

<asp:ListItem Text="Email2" Value="'First Last' <email2@microsoft.com>"></asp:ListItem>

</asp:CheckBoxList>

<asp:Button ID="Button3" runat="server" Text="Button" UseSubmitBehavior="false" />

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="emailToTextBox"

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

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

Leave a Comment

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

Advertise here

Advertise on ASP.NET

About this Site