Working with ModalPopup Ajax Control: ASP Alliance

Print Add To Favorites Email To Friend Rate This Article
Working with ModalPopup Ajax Control

page 1 of 5

Published: 14 Dec 2007

Abstract
In this article the author shows how to display a simple popup window to the user with the ModalPopup Extender available in the ASP.NET Ajax Toolkit. After giving a few example cases of when to use the ModalPopup, the author walks through how to use this AJAX Extender control using source code snippets and a source download.

by Electronic Screw
Feedback

Average Rating:

Views (Total / Last 10 Days): 39884/ 887

Article Contents:

Introduction

This article explains using the ModalPopup Extender available in the ASP.NET Ajax Toolkit. ModalPopup Extender comes in handy when you want to display information on the page modally. I have used it in a couple of sites to display:

1. Tip of the day information

2. Login dialog box (display the login box modally and prevent the user from accessing the links before he signs in to the system)

3. Displaying Master-Child info

In this article I will explain how to display master-child information (Country - Cities) using ModalPopup Extender. The countries list will be displayed in a grid, and selecting a country row in the grid will open a modalpopup with all the cities available with the country. This example is taken to explain the concept, but in real-time you will be doing something useful like displaying all the employees in a GridView, and clicking on an employee row will display the employee information like Contact Details, Salary Details, etc.

All the necessary files, database, stylesheet and images used in this article are available for download from the link provided at the end of the article.

Note: The solution provided with this application is developed using ASP.NET AjaxToolkit version 1.0.11119.0 for ASP.NET AJAX version 1.0 and .NET Framework 2.0

A working example of this functionality can be seen at http://bg.analysterp.com. Click on the property images in the first page and you will see the detailed information about the selected property in a ModalPopup dialog. Ignore any errors if found, as the site is still under development.

View Entire Article

(Page 2) »

Article Feedback

Comment:
Title:
Name:
Url:	( Optional )

Please add 2 and 3 and type the answer here:

User Comments

Title: Ignore previous post on asynch callbacks
Name: Michael W
Date: 11/20/2008 7:24:34 PM
Comment:
Hi again,

Sorry, the page refresh issue was my fault - I had not put an update panel around the parent grid view. Having done so, it works beautifully. Thanks for a great tutorial that shows you just the right amount of code to get a solution working!

Title: Asynchronous callback?
Name: Michael W
Date: 11/20/2008 8:52:34 AM
Comment:
Hi,

This works great, except that my whole page refreshes when the popup gets populated with data. Is there a way round this? I want the popup to do an asynchronous call back, presumably, so that the whole page does not have to be refreshed when I click the link button in my grid view...

Title: 3
Name: 3
Date: 8/9/2008 2:39:50 AM
Comment:
This article explains using the ModalPopup Extender available in the ASP.NET Ajax Toolkit. ModalPopup Extender comes in handy when you want to display information on the page modally. I have used it in a couple of sites to display:

1. Tip of the day information

2. Login dialog box (display the login box modally and prevent the user from accessing the links before he signs in to the system)

3. Displaying Master-Child info

In this article I will explain how to display master-child information (Country - Cities) using ModalPopup Extender. The countries list will be displayed in a grid, and selecting a country row in the grid will open a modalpopup with all the cities available with the country. This example is taken to explain the concept, but in real-time you will be doing something useful like displaying all the employees in a GridView, and clicking on an employee row will display the employee information like Contact Details, Salary Details, etc.

All the necessary files, database, stylesheet and images used in this article are available for download from the link provided at the end of the article.

Note: The solution provided with this application is developed using ASP.NET AjaxToolkit version 1.0.11119.0 for ASP.NET AJAX version 1.0 and .NET Framework 2.0

A working example of this functionality can be seen at http://bg.analysterp.com. Click on the property images in the first page and you will see the detailed information about the selected property in a ModalPopup dialog. Ignore any errors if found, as the site is still under development.

Title: Scroll bar goes down with no limit
Name: JeffR
Date: 8/7/2008 2:41:42 PM
Comment:
I had the issue with the scrollbar growing to no limit and the dialog was not displaying correctly, it was showing up where it appeared in the page html and not centered in the browser. The solution I found was you must use the XHTML doctype with this. The older HTML Transitional doctype does not play well with it. We were using the older doctype on pages because it was better with IE6 when scrolling came into play but hopefully most of our clients are not on IE6 anymore.

Title: Scroll bar goes down with no limit
Name: MikeF
Date: 7/23/2008 9:49:44 PM
Comment:
Looks like a lot of people have this problem. Someone must have a clue??????
HELP!

Title: Developer
Name: Rahul Tiwari
Date: 4/30/2008 3:34:47 AM
Comment:
Master page Dosn't work

Title: Doesnt Work
Name: Chetan Mulay
Date: 4/23/2008 9:07:06 AM
Comment:
The Code doesn't work.It gives a error as:This name contains Upper case Letters.

Title: Doesnt Work
Name: Chetan Mulay
Date: 4/23/2008 9:05:40 AM
Comment:
\
\
\
\
\
\
\
\
\

Title: Sample & Download
Name: Joe Stagner
Date: 4/16/2008 12:59:00 PM
Comment:
FYI - The download link appears to be broken and the authors on-line demo throws a SQL Server error.

Title: Master page doesn't work
Name: Pranil
Date: 4/16/2008 12:19:22 PM
Comment:
I am also facing the same problem as Nelson. I have a master page with a treeview and four pages. On one of the pages i have a gridview where i need to popup an image on click of a column.
I tried implementing the way given here, but when the modalpopup is displayed, the page becomes large and can be scrolled down unendingly.

Any idea what is the problem?

Title: Developer
Name: Tim
Date: 3/30/2008 4:47:50 PM
Comment:
I get a database erro when trying the the 1509_Working_with_ModalPopup_Ajax_Control example on http://bg.analysterp.com

Title: Master page doesn't work
Name: Nelson
Date: 1/11/2008 2:15:28 PM
Comment:
I downloaded the code provided. I add a master page. I created a default2 page that used the master page. I created the events in the code behind. I ran the web application and go to the default2 page that I created. An error is received: Sys.ArgumentIndefinedException:Value cannot be undefined. Paramter name: type.
Can you reproduce this on your machine?I would like to know if the problem is my development environment or is something else. Thanks,
Nelson

Title: Master page doesn't work
Name: Electronic Screw
Date: 1/9/2008 4:21:36 AM
Comment:
The working example I have provided (online) is infact done with MasterPage. If the page gets into a loop, a look into your code is needed.

Title: Master page doesn't work
Name: Nelson
Date: 1/8/2008 10:43:09 AM
Comment:
I tried it with a Master Page scenario and it doesn't work. The page gets into a loop trying to do something and the scroll bar starts to go down with no limit. Do you have any idea why is this happening?