CascadingDropDown use cascading style drop-down box

introduction

Cascading drop-down box, sometimes called linkage drop-down box, the Web page is a common feature. Is the assumption that there are a number of drop-down box, for example, there are three, respectively, show the provinces, cities, streets, when you select a province, city drop-down box to display only the city belongs to the province, after choosing the city, street drop-down box to display only belonging to the city streets. Asp do remember when doing a drop-down box like this takes a lot of effort, a lot of writing javascript code. Now to the Asp.Net era, the use of Ajax Control Toolkit in CascadingDropDown controls, together with common DropDownList controls and Web Serive, to achieve such a function becomes very easy. This article will step by step to achieve it.

Database and Data Access

This part of the topic and we discussed in this article actually does not matter, but we need to "cascade can display" data, we need to create a sample database, but also need to have its data access methods. For this part, I give only simple steps still to provinces, cities, streets, for example:

Create a Solution, add a site, and create a database in App_Data in SiteDB.
Create a table in SiteDB in three, namely Province (Id, Name), City (Id, Name, ProvinceId), Street (Id, Name, CityId). Int Id is wherein the self-energizing type, and the primary key; Name is a Varchar (50). ProvinceId and CityId compared with foreign keys.
Add some sample data for the above three tables, if you do not bother, you can copy the code in the database that accompanies this article.
SiteDataSet add a data set in the App_Code. Then open the "Server Explore (server browser)" dragged into the above three tables.
TableAdapter their respective configuration, in which all the data obtained for the Province, Street and City, respectively, and data acquisition and CityId according ProvinceId, final SiteDataSet shown below:

OK, so the database and data access to complete, and then we look at a Web page.

Web page layout and settings

First, we add in the site a "Ajax-enabled WCF Service (AJAX-enabled WCF Service)", named AddressService, regardless of its being realized. Register it (here not herein may be registered) in the ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/AddressService.svc" />
    </Services>
</asp:ScriptManager>

Open Default.aspx, such as the layout of the pages below:

DropDownList three separate Id is ddlProvince, ddlCity, ddlStreet. After dragging from AjaxControlToolkit three CascadingDropDown onto the page, such as its configuration below:

<ajaxControlToolkit:CascadingDropDown ID="CascadingDropDown1"
        runat="server"
        TargetControlID="ddlProvince"
        Category="Province"
        PromptText="请选择省份...."
        LoadingText="加载中，请稍后 ..."
        ServicePath="AddressService.svc"
        ServiceMethod="GetProvince"
        >
</ajaxControlToolkit:CascadingDropDown>
<ajaxControlToolkit:CascadingDropDown ID="CascadingDropDown2"
        runat="server"
        TargetControlID="ddlCity"
        ParentControlID="ddlProvince"
        Category="City"         LoadingText = "Loading, please wait ..."
        PromptText = "Please select a city ...."

        ServicePath="AddressService.svc"
        ServiceMethod="GetCity"
        >
</ajaxControlToolkit:CascadingDropDown>
<ajaxControlToolkit:CascadingDropDown ID="CascadingDropDown3"
        runat="server"
        TargetControlID="ddlStreet"
        ParentControlID="ddlCity"
        Category="Street"
        PromptText="请选择城市...."
        LoadingText="加载中，请稍后 ..."
        ServicePath="AddressService.svc"
        ServiceMethod="GetStreet"
        >
</ajaxControlToolkit:CascadingDropDown>

These three CascadingDropDown DropDownList control corresponding generally added prior to, the following is a brief description of each of its properties:

TargetControlID: ID collaborate with the DropDownList control.
ParentControlID: Parent drop-down box ID, top-down box ddlProvince apparently does not contain the parent drop-down box, and therefore does not contain ParentControlID.
Category: This drop-down box "category" is also known as the name of the specific use to the back again, I said here is not well understood.
Text displayed before selection: PromptText.
LoadingText: the text that appears when you load because of the need to communicate with the server, it will inevitably lead to delay, here is the text in the text display when delay.
ServicePath: Web service when the acquired data. Here is the our WCF service.
ServiceMethod: method to get the data. These methods are implemented by the WCF service, obviously we do not realize it.

Well, now part of the page to set up, and we finally achieve a look WCF services, it is only the first step in creating a data set to use to get data.

Write WCF service code

WCF service method is actually to be achieved in the three above CascadingDropDown provided for acquiring data: GetProvince (), GetCity () getStreet and (). AjaxControlToolkit because of the need to use the type defined in the code-behind page, so if you're like me use the GAC to deploy AjaxControlToolkit assembly, then need to register it in the Web.Config:

Next we achieve these three methods to achieve App_Code in AddressService look at GetProvince () method, apparently, it gets all the provinces:

public class AddressService
{
    [OperationContract]
    public CascadingDropDownNameValue[] GetProvince(string knownCategoryValues, string category)
    {
        Thread.Sleep(1000); // 等待1秒，模拟网络延迟

        SiteDataSetTableAdapters.ProvinceTableAdapter provinceAdapter
            = new SiteDataSetTableAdapters.ProvinceTableAdapter();

        SiteDataSet.ProvinceDataTable provinceTable = provinceAdapter.GetProvince();
        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

        foreach (SiteDataSet.ProvinceRow province in provinceTable) {
            string id = province.Id.ToString();
            string name = province.Name;
            values.Add(new CascadingDropDownNameValue(name, id));
        }
        return values.ToArray();
    }
}

We look at the signature method, the second parameter category that is the value we attribute CascadingDropDown in the category defined, and it spread here for us to do some processing. The first parameter to: form comprising "Category Id" drop-down box of the parent category value and id values, since for the top province drop down box, so in this case knownCategoryValues empty string. The return value is an array CascadingDropDownNameValue, in fact, a key / value pairs back to the client for binding.

I think the context of the method does not require any explanation, are the most common, but the basic operation of strongly typed DataSet. Note that Thread.Sleep (1000), here to simulate the effect of network delays, to allow controls to show the effect of LoadingText.

Next, we look at two ways to implement the remaining GetCity and GetStreet methods:

[OperationContract]
public CascadingDropDownNameValue[] GetCity(string knownCategoryValues, string category)
{
    Thread.Sleep(1000);

    StringDictionary keyValue =
        CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

    int provinceId = Convert.ToInt32(keyValue["Province"]);

    SiteDataSetTableAdapters.CityTableAdapter cityAdapter =
        new SiteDataSetTableAdapters.CityTableAdapter();

    SiteDataSet.CityDataTable cityTable = cityAdapter.GetCityByProvinceId(provinceId);
    List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

    foreach (SiteDataSet.CityRow city in cityTable) {
        string id = city.Id.ToString();
        string name = city.Name;
        values.Add(new CascadingDropDownNameValue(name, id));
    }

    return values.ToArray();
}

[OperationContract]
public CascadingDropDownNameValue[] GetStreet(string knownCategoryValues, string category) {
    Thread.Sleep(1000);

    StringDictionary keyValue =
        CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

    int cityId = Convert.ToInt32(keyValue["City"]);

    SiteDataSetTableAdapters.StreetTableAdapter streetAdapter =
        new SiteDataSetTableAdapters.StreetTableAdapter();

    SiteDataSet.StreetDataTable streetTable = streetAdapter.GetStreetByCityId(cityId);
    List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

    foreach (SiteDataSet.StreetRow street in streetTable) {
        string id = street.Id.ToString();
        string name = street.Name;
        values.Add(new CascadingDropDownNameValue(name, id));
    }

    return values.ToArray();
}

These two methods are completely similar, so far as we GetCity () method description. If we now choose a page in the provinces, as "Shaanxi", and its id is "2", then follow the instructions above, knownCategoryValues contains the value "Province: 2", which contains the category and select the value of the parent control the id value, through which we can get the selected provinces id. We do not need to manually handle this string, such as using Split () method, but may be accomplished using CascadingDropDown.ParseKnownCategoryValuesString static method, as shown in the above code.

After obtaining the provinces id, we can call the method on the DataAdapter, to get the city under which the provinces contained according to id, the code you should already be familiar.

Well, now everything is ready, we can turn the page to look at the actual results:

to sum up

In this article, we have implemented a common feature in the Web: cascading drop-down box. Let's create a sample database, as well as a strongly typed DataSet as a data access. Then on the Web pages layout, set control properties. Finally, write the WCF service, access to the data needed for the client.

Thanks for reading, I hope this article can give you help!

Reproduced in: https: //www.cnblogs.com/JimmyZhang/archive/2008/11/05/1327710.html

[Ed] implemented using cascading drop-down box CascadingDropDown