使用CascadingDropDown实现级联式下拉框

使用CascadingDropDown实现级联式下拉框2011-10-14 tracefact.net 张子阳引言

级联式下拉框，有时也叫联动下拉框，也是Web页面中一个很常见的功能。就是假设有若干个下拉框，比如说有3个，分别显示省份、城市、街道，当选择某一省份后，城市下拉框仅显示属于该省的城市，选择好城市之后，街道下拉框仅显示属于该城市的街道。记得以前做Asp的时候，做一个类似这样的下拉框需要花费不少的力气，编写不少的javascript代码。如今到了Asp.Net时代，使用Ajax Control Toolkit 中的CascadingDropDown控件，再配合普通的DropDownList控件以及Web Serive，实现这样一个功能变得非常容易了。本文将一步步来实现它。

数据库和数据访问

这一部分和我们本文要讨论的主题实际上没有关系，但是我们需要“可以级联显示”的数据，因此需要创建一个范例数据库，同时还需要有对它的数据访问方法。对于这部分，我仅给出简单的步骤，依然以省份、城市、街道为例：

新建一个解决方案，添加网站，并且在App_Data中创建一个数据库SiteDB。

在SiteDB中创建三张表，分别为Province（Id, Name），City（Id, Name, ProvinceId），Street（Id, Name, CityId）。其中Id为int自增类型，且为主键；Name为Varchar（50）。ProvinceId和CityId则为外键。

为上面三个表添加一些范例数据，如果你觉得麻烦，那么可以拷贝本文附带代码中的数据库。

在App_Code中添加一个SiteDataSet数据集。然后打开“Server Explore（服务器浏览器）”将上面三张表拖进去。

分别对它们的TableAdapter进行配置，其中Province的为获得全部数据，而City和Street分别根据 ProvinceId和CityId获取数据，最终的SiteDataSet如下图所示：

OK，这样数据库和数据访问就完毕了，接下来我们看下Web页面。