We are proud to present to you the GeoDataSource World Major Cities package. All your requests and feedbacks have culminated in this one package that encompasses usability and easy of deployment for your Country/State/City drop down lists.
In this package, you will find all of the countries and their states along with their major cities. By using this data, you can now easily create the Country/State/City drop down lists that you have wanted to create for so long.
No more sifting through millions of cities that you will never need. To make this package easier to deploy, we have generously included sample codes in various programming languages which implements the Country/State/City drop down lists for you. All you have to do is just customize the codes a bit and you are on your way. Fast and easy deployment is what you will get when you purchase this package.
Below we have included a slightly more advanced sample code which uses ASP.NET 2.0 and Microsoft AJAX to implement the Country/State/City drop down lists.
Before we get started, in case any of you are not familiar with AJAX, maybe a little explanation would be in order.
What is AJAX?
AJAX stands for Asynchronous JavaScript and XML. AJAX allows web applications to retrieve data from the server asynchronously in the background without reloading the page. With a traditional web page, for the content to be refreshed, the page would have to be reloaded every time. However, by using AJAX, a web application can request only the necessary data which can then be updated on the current page without reloading or refreshing the page. AJAX brings to the web page the interactivity, richness and responsiveness of a windows application. The web server bandwidth will also be greatly reduced as only the necessary data is requested from the server.
Now that you have an idea what is AJAX and what it is capable of, let’s get started.
Introduction to cascading drop down lists
What we will be doing are called cascading drop down lists. This because, when you select a different value in one of the drop down lists, another one will automatically reload with related values. For instance, when you select United States in the Country drop down list, the State drop down list will display all the States in the United States.
If you don’t want to see the tutorial below and just want to download the codes, you just go to here. Just make sure you fulfil the essentials first.
Essentials
ASP.NET 2.0 does not come with the AJAX Extensions so you will have to download and install the ASP.NET 2.0 AJAX Extensions 1.0 which you can get from http://www.asp.net/ajax/downloads/archive/.
Next, download the AJAX Control Toolkit for ASP.NET 2.0 from http://www.asp.net/ajax/downloads/. Extract all files from inside the zip file to a temporary folder and then locate the AjaxControlToolkit.dll file which should be in the SampleWebsite\Bin folder. You will need to copy this file to the Bin folder of your application later on.
Using Visual Studio 2005 to create an AJAX-Enabled Web Application project
Now that we have done all the prerequisites, let us run Visual Studio 2005.
Click on Create Project. You should see the New Project dialog box come up like below. In Project types, select Visual Basic. Under Templates, select ASP.NET AJAX-Enabled Web Application. In the Name field, type CountryStateCityDropDownLists. Then press OK.
Your project should now have been created successfully and you should see the Default.aspx like below:
Take note of the <asp:ScriptManager ID="ScriptManager1" runat="server" /> which is required to activate the ASP.NET AJAX and the Control Toolkit.
Integrate the AjaxControlToolkit library into your project
After the Page tag, add the following line:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
Before we continue, copy and paste the AjaxControlToolkit.dll file from the Essentials section into the Bin folder of your application. Then right click on your project name in the Solution Explorer and click on Add Reference. Click on the Browse tab and then look for the AjaxControlToolkit.dll file in the Bin folder of your application. Select it and then click OK.
Adding the codes for the Countries, States and Cities drop down lists
Next, we will add the codes for the 3 drop down lists which we will call Countries, States and Cities like below:
Adding the codes for the CascadingDropDown extender
Then, we add the CascadingDropDown extender from the Control Toolkit for the 3 drop down lists.
The extender will send an asynchronous request to a web service which will then return a list of entries to be displayed in the list. For this to work, the following CascadingDropDown attributes need to be set:
- ServicePath: URL of a web service delivering the list entries
- ServiceMethod: Web method delivering the list entries
- TargetControlID: ID of the dropdown list
- Category: Category information that is submitted to the web method when called
- PromptText: Text displayed when asynchronously loading list data from the server
Creating the web service which the extender will query for information
To add a web service, right-click on the project name, select Add and then select New Item. You should see the Add New Item dialog box come up. Select Web Service and in the Name field, key in CountryStateCity.asmx and then press Add.
You should now be able to see the codes for the CountryStateCity.asmx. Select all the codes and delete them.
Now, add in the import statements like below:
Next, add the class called CountryStateCity and also the database connection string.
Database and table structures
The database table that we are using is called countrystatecity and the Microsoft SQL Server 2008 database is called countrystatecitydb. The table structure is as follow:
CREATE TABLE [dbo].[countrystatecity](
[country_code] [nvarchar](2) NULL,
[country_name] [nvarchar](200) NULL,
[state] [nvarchar](200) NULL,
[city_name] [nvarchar](200) NULL,
[latitude] [nvarchar](50) NULL,
[longitude] [nvarchar](50) NULL
) ON [PRIMARY]
Creating the web method which will populate the Countries drop down list
Now we are going to add the GetCountries web method for the CountryStateCity class. This web method will populate the Countries drop down list when the page loads.
Note that the method needs to return an array of type CascadingDropDownNameValue (defined by the ASP.NET AJAX Control Toolkit). In the CascadingDropDownNameValue contructor, first the list entry’s text and then its value must be provided, just as NAME would do in HTML.
Creating the web method which will populate the States drop down list
The next web method we add is the GetStates web method which is called whenever the Countries drop down list changes.
The following code will check the list of selected values in the 3 drop down lists and puts them into a dictionary object:
Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
CountryCode = Convert.ToString(kv("Cat1"))
Next, we just grab the value based on the Category that we set earlier which was Cat1 for the Countries drop down list. With this CountryCode, we can get a list of matching States which we return in an array of CascadingDropDownNameValue.
Creating the web method which will populate the Cities drop down list
The last web method is the GetCities web method which is triggered whenever the States drop down list changes.
This web method works similar to the last one by getting the value of the parent drop down lists and then getting a list of matching Cities.
Downloading the codes and live demo
You can download the ZIP file containing the codes here. For the data and a live demo of the drop down lists, you can visit the GeoDataSource World Major Cities package page.
