Click here to Skip to main content
14,921,361 members
Articles / Web Development / HTML
Posted 22 Aug 2007


89 bookmarked

Dynamic AJAX Modal Popup

Rate me:
Please Sign up or sign in to vote.
2.41/5 (16 votes)
4 Aug 2010CPOL5 min read
Dynamic AJAX Modal Popup control demonstration
Screenshot - AajxModalpopup.jpg


Asynchronous JavaScript and XML (AJAX) -- Jesse James Garrett was the creator of the term AJAX -- enables a rich user interface experience for web applications. I'm not going to tell you the plus and minus points about AJAX, but this will help you to inform yourself about AJAX's background.

Here I demonstrate the usage of the Modal Popup control, one of the AJAX controls that comes with AJAX Toolkit 3.5.40412.0. The reason that I was motivated to write this article about the Modal Popup control is that I came across a situation where, by selecting a dynamically populated list, it was desired to display more details about the selection as a modal dialog box. The challenge is that I was developing a web application and I had only two days to achieve this. Thanks to AJAX Modal Popup, I made it. Otherwise, I couldn't make it within two days because there would be too much researching and tons of JavaScript. I think this article will help those who are in the same situation.


The scenario is a real world scenario: when a user selects a court from the drop down list, he needs to view more information about that court without redirecting to a new page. Also, until he closes the dialog, he should not be able to edit background items on the form.

Using the Code

Before trying this demo, please do these prerequisites:

  1. Add the Microsoft SQL 2005 database by selecting Add New Item…
  2. Using the Server Explorer, add a new tale called Court
  3. Add the following table definition:
    Column Name            Data Type
    -----------            ---------
    CourtID (primary key)  int
    CourtName              varchar(100)
    Judge                  varchar(50)
    Info                   varchar(255)
  4. Find the stored procedure SP.txt in the demo project and execute it. This is optional because you can use any method to get data populated.
In order to fetch data to the popup control, you have to create a web service. In that web service, add the System.Web.Script.Services.ScriptService attribute to the web service class. It should look like this:
public class CourtService : System.Web.Services.WebService 

Create a web method that fetches the data. It should return a string and have a string parameter; this is mandatory. The string parameter is the dynamic key that is used to fetch data on demand. In our case, it's the dropdown's selected item.

public string GetCourt(string contextKey)
    //TODO. Method body

If this method returns a string, how are we going to get all the data that we want to display? It's simple, but tricky. On the popup control we are using a web server control, usually the Label control, to display data. Since this method returns a string, format your data to a line of string. As in the demo project I want to bold the column name, so I can wrap column the name with <b></b> HTML tags. Use the System.Text.StringBuilder class to format your string.

The completed method follows:

public string GetCourt(string contextKey)
    if (contextKey == "")
        return "";

    m_courtData = m_court.GetACourtByID(int.Parse(contextKey));
    DataSet1.CourtRow _courtRow = m_courtData.Rows[0] as DataSet1.CourtRow;
    System.Text.StringBuilder _sb = new System.Text.StringBuilder();

    _sb.Append("<b>Court Code: </b>").Append(_courtRow.CourtID);
    _sb.Append("<b>Judge Name: </b>").Append(_courtRow.Judge);
    _sb.Append("<b>Court More Info:</b><br/>");

    return _sb.ToString();

Pay attention to the following markup code in the Default.aspx page. Table 1 describes these properties respectively.

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

Table 1: Property Descriptions

OkControlIDThis refers to a button used to dismiss the Modal Popup. By setting this property, the dialog box will automatically close. This property doesn't show in the Properties window in the IDE. Use markup view to add this property. (Optional property)
PopupControlIDThis refers to the web server control ID that works as the Modal Popup, usually a panel control. This property doesn't show in the Properties window in the IDE. (Mandatory property)
TargetControlIDThis refers to the control that makes the dialog popup. Once we click on the target, the control pops up the modal dialog. As you can see, I set this to a button control. This is another trick. We can put a target control to our dropdown but, if we do so, once you click on the dropdown list it will popup the dialog. When that happens, you can't select an item. Since this is a mandatory property, I can't ignore this. To achieve our goal, I set this property to a button and hide it when the page is loaded, as follows.
btnDummy.Style.Add("display", "none");
DynamicServicePathThis refers to the web service path. This property doesn't show in the Properties window in the IDE.
DynamicServiceMethodAs its name implies, this refers to the web method of the service. This property doesn't show in the Properties window in the IDE.
DynamicControlIDThis refers to the control that displays strings returning from our web method. This property doesn't show in the Properties window in the IDE.
BackgroundCssClassThis does the actual thing to make the rest of the page non-editable. This property doesn't show in the Properties window in the IDE. It accepts a CSS class name, like below:
    background-color: Gray;
DropShadowThis is set to true if you want to show the shadow of the dialog. This property doesn't show in the Properties window in the IDE. (Optional property)

As you can see, we use an instance of button for TargetControlID of ModalPopupExtender. Since this button doesn't display on the page, you have to code Modal Popup to show it. For our scenario, we want to show the dialog when a user actually selects an item from the dropdown. The following code demonstrates this:

protected void drpCourt_SelectedIndexChanged(object sender, EventArgs e)
    if (drpCourt.SelectedIndex != 0)
        mpeCourt.DynamicContextKey = drpCourt.SelectedValue;
        // Display the dialog

Notice that DynamicCotextKey sets to SelectedValue of the dropdown, which is passing to the web method's parameter contextKey. Since the dropdown causes a post-back, the panel control PopupControlID will display on the page where that resides before Modal Popup gets centered to the browser. To avoid this issue, set this in the Page_Load event, as shown:

pnlPopup.Style.Add("display", "none");


  • 02 August, 2010 -- Updated demo project to VS 2008 and AjaxControlToolkit (3.5.40412.0)
  • 22 August, 2007 -- Original version posted


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kelum W. Ganegoda
Software Developer (Senior) Brandix Lanka Pvt Ltd.
Sri Lanka Sri Lanka
I’ve started my career in 2001 with Microsoft .net ver 1.0. I’m a MCSD for .net.

Currently, I’m working for Sri Lanka’s largest apparel exporter as a Software Engineer. All projects in .net, MS Sql Server, Biztalk Server, WCF and WPF. And also, I’m developing components to the ERP. In addition to that, I’ve involved to create architecture of ERP integration.

Comments and Discussions

GeneralMy vote of 1 Pin
mohitkhapra8-Jul-13 20:38
Membermohitkhapra8-Jul-13 20:38 
QuestionModal PopUp Pin
Balakrishna228-Feb-13 23:40
MemberBalakrishna228-Feb-13 23:40 
GeneralMy vote of 5 Pin
Member 28729781-Oct-11 13:26
MemberMember 28729781-Oct-11 13:26 
GeneralAjax versions make some differences Pin
luckyeagle5-Jul-10 13:39
Memberluckyeagle5-Jul-10 13:39 
GeneralRe: Ajax versions make some differences [modified] Pin
Kelum W. Ganegoda1-Aug-10 20:08
MemberKelum W. Ganegoda1-Aug-10 20:08 
Questionin your example the scrollbars of the:"Main page" are clearly still active. How can you disable them? Pin
jemer9911-May-10 13:48
Memberjemer9911-May-10 13:48 
Generalajax popup mous over Pin
vytla10-Jul-09 2:20
Membervytla10-Jul-09 2:20 
GeneralAccessing external webservice methods from Ajax popup Pin
mahesh kukkadapu24-Mar-09 10:49
Membermahesh kukkadapu24-Mar-09 10:49 
QuestionTroubleshoot issues with Windows SharePoint Services. Pin
S.Dhanasekaran4-Feb-09 0:05
MemberS.Dhanasekaran4-Feb-09 0:05 
QuestionAJAX Modal Popup OR DHTML Windows. Pin
Bobb19823-Sep-08 18:27
MemberBobb19823-Sep-08 18:27 
AnswerRe: AJAX Modal Popup OR DHTML Windows. Pin
Kelum W. Ganegoda9-Oct-08 19:01
MemberKelum W. Ganegoda9-Oct-08 19:01 
Generalhi Pin
manoj2218421-May-08 23:22
Membermanoj2218421-May-08 23:22 
QuestioncontextKey passed null in web method Pin
Member 27752042-Apr-08 1:47
MemberMember 27752042-Apr-08 1:47 
AnswerRe: contextKey passed null in web method Pin
Appreciative User12-Feb-09 8:23
MemberAppreciative User12-Feb-09 8:23 
QuestionHow to Fix the Example Code Pin
Member 396673820-Feb-08 10:38
MemberMember 396673820-Feb-08 10:38 
GeneralExample is broken Pin
Barbeque Source25-Oct-07 7:07
MemberBarbeque Source25-Oct-07 7:07 
GeneralRe: Example is broken Pin
Appreciative User12-Feb-09 8:25
MemberAppreciative User12-Feb-09 8:25 
GeneralIssues Pin
JonDays28-Sep-07 3:12
MemberJonDays28-Sep-07 3:12 
GeneralRe: Issues Pin
Kelum W. Ganegoda28-Sep-07 3:30
MemberKelum W. Ganegoda28-Sep-07 3:30 
JokeGood Idea .. Pin
Suresh Kojhani5-Sep-07 21:17
MemberSuresh Kojhani5-Sep-07 21:17 
QuestionKeep getting 'Web Service call failed: 12030' Pin
majhoos5-Sep-07 3:00
Membermajhoos5-Sep-07 3:00 
AnswerRe: Keep getting 'Web Service call failed: 12030' Pin
Kelum W. Ganegoda5-Sep-07 4:09
MemberKelum W. Ganegoda5-Sep-07 4:09 
GeneralRe: Keep getting 'Web Service call failed: 12030', or 500, or 12031 Pin
Jon Ebersole8-Nov-07 5:03
MemberJon Ebersole8-Nov-07 5:03 
GeneralRe: Keep getting 'Web Service call failed: 12030' Pin
thuongmaiinternet11-May-08 23:01
Memberthuongmaiinternet11-May-08 23:01 
Questionpostback Pin
toretang3-Sep-07 23:06
Membertoretang3-Sep-07 23:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.