How do I have 1 extender showing Countries and a Second with Cities in Panel.?

Question

Hello,

I am using AJAX Complete Extender. There is a drop down list with 2 items USA or EUROPE

If User selects Europe, then a Panel opens for Europe with textbox. That is bound to SQL table

of EU Countries x (42) They start typing the Country name and it shows the list of countries corresponding to input ect. That works.

What I want to do in the Panel is have a second textbox CITY - If user selects SPAIN for example, then in the second (extender) text box that is bound to a list of Cities within Spain.

how is the way to do this

Do I create another table of each Countries Cities, so I will have 42 tables in total.

How do I then get the extender CITY to know which Country has been selected. I do not want to create 42 panels in the aspx.

Here is my code for the first part.

thank you

 <asp:DropDownList ID="ddlHasPassport" class="form-control" runat="server" AutoPostBack="true" 
``` OnSelectedIndexChanged="DropDownList_Changed">

```xml
                <asp:ListItem Text="-- Select a Country --"></asp:ListItem>

                <asp:ListItem Text="USA" Value="USA"></asp:ListItem>


    

                <asp:ListItem Text="EUROPE" Value="Europe"></asp:ListItem>

            </asp:DropDownList></div>
```<asp:Panel ID="pnlEurope" runat="server" Visible="false">

```ruby
							<div class="form-group">
```   <asp:TextBox ID="County" placeholder="Start typing the County name" type="text" runat="server"  class="form-control" ></asp:TextBox>

```xml
    <asp:AutoCompleteExtender ID="AutoCompleteExtender1" ServiceMethod="getdata" TargetControlID="County" EnableCaching="false" CompletionInterval="1000" MinimumPrefixLength="1" CompletionSetCount="1" runat="server">  

    </asp:AutoCompleteExtender>  

							</div>
```<asp:Panel ID="pnlEurope" runat="server" Visible="false">

```ruby
							<div class="form-group">

---

Moderator: Moved from SQL Server Database Engine

Answer 1

To achieve the functionality you described, you can use a combination of a database structure and AJAX to dynamically load the cities based on the selected country. Here’s a step-by-step approach:

1. Database Structure: Instead of creating 42 separate tables for each country's cities, you can create a single table that contains all cities along with their corresponding country. For example, your Cities table could have the following columns:
   • CityID (Primary Key)
   • CityName
   • CountryName
   This way, you can store all cities in one table and filter them based on the selected country.
2. AJAX Call for Cities: You will need to create a web service method that retrieves cities based on the selected country. When a user selects a country from the first textbox, you can trigger an AJAX call to fetch the list of cities for that country.
3. AutoCompleteExtender for Cities: In your ASP.NET code, you can add another TextBox for cities and an AutoCompleteExtender that calls the web service method you created. This extender will populate the city textbox based on the user input and the selected country.

Here’s an example of how you can modify your existing code:

<asp:DropDownList ID="ddlHasPassport" class="form-control" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList_Changed">
    <asp:ListItem Text="-- Select a Country --"></asp:ListItem>
    <asp:ListItem Text="USA" Value="USA"></asp:ListItem>
    <asp:ListItem Text="EUROPE" Value="Europe"></asp:ListItem>
</asp:DropDownList>

<asp:Panel ID="pnlEurope" runat="server" Visible="false">
    <div class="form-group">
        <asp:TextBox ID="County" placeholder="Start typing the Country name" type="text" runat="server" class="form-control"></asp:TextBox>
        <asp:AutoCompleteExtender ID="AutoCompleteExtender1" ServiceMethod="getdata" TargetControlID="County" EnableCaching="false" CompletionInterval="1000" MinimumPrefixLength="1" CompletionSetCount="1" runat="server"></asp:AutoCompleteExtender>
    </div>
    <div class="form-group">
        <asp:TextBox ID="City" placeholder="Start typing the City name" type="text" runat="server" class="form-control"></asp:TextBox>
        <asp:AutoCompleteExtender ID="AutoCompleteExtenderCity" ServiceMethod="getCities" TargetControlID="City" EnableCaching="false" CompletionInterval="1000" MinimumPrefixLength="1" CompletionSetCount="1" runat="server"></asp:AutoCompleteExtender>
    </div>
</asp:Panel>

4. Code Behind: In your code-behind, implement the getCities method to fetch cities based on the selected country. You can use the ddlHasPassport selection to filter the cities accordingly.

This approach will allow you to dynamically load cities based on the selected country without creating multiple panels or tables, making your application more efficient and easier to maintain.