AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1509&pId=-1
Working with ModalPopup Ajax Control
page
by Electronic Screw
Feedback
Average Rating: 
Views (Total / Last 10 Days): 120474/ 121

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.

Displaying the Master information

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--%>
<asp:Label ID="lblCountries" runat="server" Text="Countries"
    SkinID="Heading"></asp:Label><br />
<asp:UpdatePanel ID="upCountries" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" 
            AutoGenerateColumns="False" DataKeyNames="Id"
            DataSourceID="ObjectDataSource1" 
            OnSelectedIndexChanging="GridView1_SelectedIndexChanging">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" 
                   SortExpression="Name">   
                    <ItemStyle HorizontalAlign="Left" Width="80%" />
                    <HeaderStyle HorizontalAlign="Left" Width="80%" />
                </asp:BoundField>
                <asp:TemplateField>
                    <ItemStyle HorizontalAlign="Center" Width="20%" />
                    <HeaderStyle HorizontalAlign="Center" Width="20%" />                    
                    <ItemTemplate>
                        <asp:ImageButton ID="showCities" CommandName="Select" 
                           runat="server" ImageUrl="~/images/add_details.gif" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>                
    </ContentTemplate>
</asp:UpdatePanel>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCountries" 
    TypeName="ModalPopupTableAdapters.CountriesTableAdapter">
</asp:ObjectDataSource>

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--%>
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
<cc1:ModalPopupExtender ID="mdlPopup" runat="server" 
    TargetControlID="btnShowPopup" PopupControlID="pnlCities"
    CancelControlID="btnClose" 
    BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>
<asp:Panel ID="pnlCities" runat="server" style="display:none;" 
  SkinID="PopUpPanel">
    <asp:UpdatePanel ID="upCities" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="lblCities" runat="server" Text="Cities" 
                SkinID="Heading"></asp:Label><br />
            <asp:GridView ID="GridView2" runat="server" 
              AutoGenerateColumns="False" DataKeyNames="Id" Width="50%">
                <Columns>
                    <asp:BoundField DataField="Name" HeaderText="Name" 
                        SortExpression="Name">
                        <ItemStyle HorizontalAlign="Left" />
                        <HeaderStyle HorizontalAlign="Left" />
                    </asp:BoundField>
                </Columns>
            </asp:GridView>
            <asp:ObjectDataSource ID="odsCities" runat="server" 
                OldValuesParameterFormatString="original_{0}"
                SelectMethod="GetCitiesByCountryId" 
                TypeName="ModalPopupTableAdapters.CitiesTableAdapter">
                <SelectParameters>
                    <asp:Parameter Name="countryId" Type="Int32" />
                </SelectParameters>
            </asp:ObjectDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>            
    <div style="text-align: right; width: 100%; margin-top: 5px;">
        <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
    </div>
</asp:Panel>

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

<cc1:ModalPopupExtender ID="mdlPopup" runat="server" 
    TargetControlID="btnShowPopup" PopupControlID="pnlCities" 
    CancelControlID="btnClose" 
    BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>

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.

Downloads
Notes

(1) In order to run the sample application on SQL Server 2005 Developer Edition, you should attach the database file provided with the above ZIP file and change your web.config "connectionStrings" section accordingly.

(2) The following error message will be shown inside web.config file if you use Visual Studio 2005.

The 'requirePermission' attribute is not declared

In order to fix the error, you should install Visual Studio 2005 SP1. Alternatively, you can also resolve it by opening dotnetconfig.xsd file located inside c:\Program Files\Microsoft Visual Studio 8\XML\Schemas\ folder and giving the following declaration around line 40 - 50.

<xs:attribute name="requirePermission" type="boolean_Type" use="optional" />
Conclusion

In this article you have seen the usage of ModalPopup Extender control available in the ASP.NET Ajax Toolkit.



©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-07-21 1:03:52 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search