Creating a dropdown control with Ajax

To the date of this post I have spent more than 10 dyes but couldn't solve my problem :(

I have a db table locations it has 3 fileds LocID, locName, locParent.

I want to create a DropDownList containing al开发者_JS百科l main location for example countries . then when the user selects a location (for example a country) all cities in that countries are reloaded in a dynamically created dropdown list.

this page must have unlimited subcategories. also the solution must be in Ajax and C#.

You will need the AjaxExtensions (comes with .net 3.5) can be added to .net 2.0 apps http://www.asp.net/ajax

This will require a ToolKitScriptManager on the page

Place three dropdowns on the page. Name them ddlCountry, ddlCity, and ddlMainLocation.

Optionally place the two "sub" drop down lists in panels that are set to invisible.

On Page Load, pull the location information from the database using a SqlDataBase Reader

With the reader, iterate through the records and add the items to the dropdown

E.g.

    // Create a command object and set it to run a stored procedure that gets the countries from the database
SqlDataReader rdr = cmd.ExecuteQuery();
try
{
    ddlCountries.items.clear();
    While (rdr.read())
    {
        // Text to display, Common Data Item
        ddlCountries.items.add(new ListItem(rdr("CountryName").toString(),rdr("CountryCode").ToString());
    }
}
catch()
{
    // do something with your error
}

To the ddlCountries dropdown add the following attributes:

1. OnSelectedINdexChanged =" ddlCountries_SelectedIndexChanged"
2. AutoPostback = "true"

(1) will execute a command on the index being changed (2) will fire a postback when the item is changed

the ddlCountries_SelectedIndexChanged event method will then query the database for the related cities that belong to the country code that was selected (or make the value the foreign key for the table that contains cities)

Now test the code to make sure that the post back causes the city list to be populated with data. At this point, it is a normal ASP.Net page with postbacks. To accomplish the partial postbacks, in markup, add a updatepanel around the dropdowns. It would look like the following:

<asp:UpdatePanel runat="server" id="upnlDropdowns" UpdateMode="Conditional">
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddlCountries" EventName="OnSelectedIndexChanged" />
                        </Triggers>
<ContentTemplate>
<!--... Your Drop downs and any code to be Ajaxified .../-->
</ContentTemplate>
</asp:UpdatePanel>

Test again and make sure that all is still working. If so, then you can add the third dropdown. This time it will be filled by the selected index changed event of the cities dropdown.

Once it is all working, you can add the wow factor to it by adding a updateprogress that extends the updatePanel to show a working image.

Good Luck!