Control Panel Forum Hosting Help ASP.NET 3.5 & SQL 2008 Web Hosting Resources

Total members: 88776
Average new registrations per day (in last 7 days): 89

New Registration: Open

Register Now

Home » Resources » Working with ModalPopup Ajax Control

ASP.NET	ADO.NET	Web Services	Remoting	Visual Studio 2005
Error Bank	Interview Questions	Tips & Tricks	XML	HTML
Jscript/Javascript	IIS	Windows		General

Submit Resource or code snippet ... and get surprise gifts ASP.NET web hosting

Win Digital camera, ASP.NET Books, Free softwares!!

Working with ModalPopup Ajax Control

21 Apr, 2008

Author: Amit Kumar

Summary
display a simple popup window to the user with the ModalPopup Extender available in the ASP.NET Ajax Toolkit

.NET Classes used :

Create a new ASP.NET AJAX-Enabled website. Using a TableAdapter (available in the source with this article), ObjectDataSource and a GridView we display all the countries available in the database. The ASP.NET source for this is given below.

Listing 1: ASP.NET code for displaying the Country information in a GridView

<%--Countries Display--%>
    SkinID="Heading">


    
                    AutoGenerateColumns="False" DataKeyNames="Id"
            DataSourceID="ObjectDataSource1" 
            OnSelectedIndexChanging="GridView1_SelectedIndexChanging">
            
                                   SortExpression="Name">   
                    
                    
                
                
                    
                                        
                    
                                                   runat="server" ImageUrl="~/images/add_details.gif" />
                    
                
            
                        
    

    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCountries" 
    TypeName="ModalPopupTableAdapters.CountriesTableAdapter">

In the GridView1 we have a templatefield with an ImageButton (ID "showCities"). To use this button to show the cities for the corresponding country row, we set the CommandName="Select" and use the OnSelectedIndexChanging event of the GridView1.

First we will look at the .aspx source that we need to add to display the Cities in ModalPopup.

Listing 2: ASP.NET code to display cities

<%--Cities Popup Display--%>

    TargetControlID="btnShowPopup" PopupControlID="pnlCities"
    CancelControlID="btnClose" 
    BackgroundCssClass="modalBackground">
  SkinID="PopUpPanel">
    
        
                            SkinID="Heading">

                          AutoGenerateColumns="False" DataKeyNames="Id" Width="50%">
                
                                            SortExpression="Name">
                        
                        
                    
                
            
                            OldValuesParameterFormatString="original_{0}"
                SelectMethod="GetCitiesByCountryId" 
                TypeName="ModalPopupTableAdapters.CitiesTableAdapter">

In the above code, the first line of markup is a normal ASP.NET button control with display style set to "none." I will tell you why I hide this button after explaining the next mark up.

Listing 3

    TargetControlID="btnShowPopup" PopupControlID="pnlCities" 
    CancelControlID="btnClose" 
    BackgroundCssClass="modalBackground">

Note: Make sure you have added a reference to AjaxControlToolkit.dll in your project and registered it in you page with directive

Listing 4


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

In the ModalPopup extender control, the TargetControlID is the control which activates the ModalPopup. Since we want to activate the ModalPopup from the ImageButton button in the Countries GridView and cannot access the ClientID of the control at design time, I created a dummy button and set its display style to none. The code for showing the modal popup is in OnSelectedIndexChanging event of the GridView1 which will be explained later.

The PopupControlID is the control that we want to display as Popup. In the above markup, it is set to "pnlCities" which contains the GridView2 to display the Cities.

The CancelControlID is the id of the control that will cancel the modal popup. Inside the panel we have an asp:Button with ID "btnClose" that will cancel the modal popup. (Try to find why I kept the "btnClose" outside the UpdatePanel "upCities").

BackgroundCssClass is the css style that will be applied to the background when the Modal Popup is displayed.

We have all the ASP.NET code, so now we need to write the OnSelectedIndexChanging event of the Countries GridView to show the Cities in ModalPopup.

Listing 5: Code for GridView SelectedIndexChanged

protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
  int _countryId = Convert.ToInt32(GridView1.DataKeys[e.NewSelectedIndex].Value);
  odsCities.SelectParameters["countryId"].DefaultValue = _countryId.ToString();
  GridView2.DataSource = odsCities;
  GridView2.DataBind();
  upCities.Update();
  mdlPopup.Show();
}

In the above code, find the selected countryId through the datakeys at NewSelectedIndex and set it as parameter value to ObjectDataSource. After binding the grid, update the updatePanel upCities and show the modal popup. That is it. Run the application to see the action.

Feedbacks about this page from members:

- No Feedbacks yet !! -

Submit Feedback View All Feedbacks