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.
