DropDownList绑定数据表实现两级联动示例

所属分类: 网络编程 / ASP.NET 阅读数: 1082
收藏 0 赞 0 分享
场景一:平时我们在DropDownList控件下添加下拉选项时,都会使用它的Item.Add方法,直接在代码下添加。如果我们想添加或修改下拉选项,则必须去修改源代码。如果几个DropDownList控件的下拉选项相同,我们则需要重复添加好多次,后期的维护工作很不方便。

场景二:我们在12306网站买票时,肯定遇到过这么一种情景:我们需要先选定目的地的省份,选完省份后在城市选框中会自动加载该省份的城市,实现两级联动。

针对以上两个场景,我们可以用DropDownList直接绑定数据表,根据选择的省份动态加载该省份下的城市。光说不练,不是好汉,让我用一个小Demo来大家演示下详细过程吧。

首先我们需要在数据库中建立两个表,一个是Province(省份)表,一个是City(城市)表。建表语句如下:
复制代码 代码如下:

Create Table Province
(
ProID int primary key,
ProName varchar(20) not null
)

Create Table City
(
CityID int primary key,
ProID int foreign key references Province(ProID),
CityName varchar(20)
)

Insert into Province values('1','北京')
Insert into Province values('2','河北')
Insert into Province values('3','山东')

insert into City values('1','1','海淀')
insert into City values('2','1','丰台')
insert into City values('3','1','大兴')
insert into City values('4','2','衡水')
insert into City values('5','2','廊坊')
insert into City values('6','2','保定')
insert into City values('7','3','济南')
insert into City values('8','3','烟台')
insert into City values('9','3','青岛')

通过建表语句我们可以知道,北京下有三个城市--海淀、丰台、大兴,河北下有三个城市--衡水、廊坊、保定,山东有三个城市--济南、烟台、青岛。

然后我们在Web窗体中放好控件,效果如下图所示:
 
dropDownList控件名称分别为ddlProvince、ddlCity

接着我们在Web后台代码中实现功能。我们需要在Web窗体加载时,ddlProvince控件绑定Province表,在ddlProvince下拉选项改变时,ddlCity控件绑定City表。实现代码如下:

建立数据库连接类:
复制代码 代码如下:

public class DB
{
//连接数据库的字符串
public static SqlConnection CreateConnection()
{
SqlConnection con = new SqlConnection("Data Source=. ;Initial Catalog=test;uid=sa;pwd=123456;");
return con;
}
}

Web窗体加载时执行代码:
复制代码 代码如下:

protected void Page_Load(object sender, EventArgs e)
{
//如果窗体是第一次加载
if (!this.IsPostBack)
{
//绑定省份
SqlConnection con = DB.CreateConnection();
//打开数据库连接
con.Open();
SqlCommand cmdProvince = new SqlCommand("select * from Province", con);
SqlDataReader sdrProvince = cmdProvince.ExecuteReader();
//将sdrProvince中的内容绑定到ddlProvince下拉列表中
this.ddlProvince.DataSource = sdrProvince;
//需要显示的数据表Province中的内容
this.ddlProvince.DataTextField = "ProName";
//需要显示的数据表Province中的主键
this.ddlProvince.DataValueField = "ProID";
this.ddlProvince.DataBind();
sdrProvince.Close();
//关闭数据库连接
con.Close();
}
}

ddlProvince控件下拉选项改变时执行的代码:
复制代码 代码如下:

protected void ddlProvince_SelectedIndexChanged(object sender, EventArgs e)
{
SqlConnection con = DB.CreateConnection();
//打开数据库连接
con.Open();
//绑定城市
SqlCommand cmdCity = new SqlCommand("select * from City where ProID=" + this.ddlProvince.SelectedValue, con);
SqlDataReader sdrCity = cmdCity.ExecuteReader();
//将sdrCity中的内容绑定到ddlCity下拉列表中
this.ddlCity.DataSource = sdrCity;
//需要显示的数据表City中的内容
this.ddlCity.DataTextField = "CityName";
//需要显示的数据表City中的主键
this.ddlCity.DataValueField = "CityID";
this.ddlCity.DataBind();
sdrCity.Close();
//关闭数据库连接
con.Close();
}

这样,我们就用DropDownList动态绑定数据表,实现了根据选择的省份动态下拉该省份下的城市的功能,达到了面向对象设计中解耦的目的,增强了代码的可维护性和用户的体验度。

希望我的讲解能对大家有所帮助。
更多精彩内容其他人还在看

asp.net 虚方法、抽象方法、接口疑问

asp.net 虚方法、抽象方法、接口疑问等说明。
收藏 0 赞 0 分享

c#  操作符?? null coalescing operator

?? "null coalescing" operator 是c#新提供的一个操作符,这个操作符提供的功能是判断左侧的操作数是否是null,如果是则返回结果是右侧的操作数;非null则返回左侧的操作数。
收藏 0 赞 0 分享

.net 反序题目的详细解答第1/2页

在各种答案,以及平时面试过程中,这道题总归会有一些非常典型的错误发生。其中给老赵的感觉也非常有意思,不知其中的“思路”是否如老赵猜测那样。
收藏 0 赞 0 分享

implicitly convert type 'int' to 'short'的原因与解决方法

implicitly convert type 'int' to 'short'的原因与解决方法
收藏 0 赞 0 分享

比较完整的 asp.net 学习流程

好多朋友想学习后台编程语言,但请注意的事,学习后台是个循序渐进的过程,不可能一下就到位,其实不只是asp.net其它的编程语言都需要下面的一些知识。
收藏 0 赞 0 分享

官网 Ext direct包中.NET版的问题

下载了官网的 Ext direct 包进行研究,发现服务器端返回结果存在一点小问题。
收藏 0 赞 0 分享

C# XML操作 代码大全(读XML,写XML,更新,删除节点,与dataset结合等)第1/2页

C#操作XML(读XML,写XML,更新,删除节点,与dataset结合等),以下就是操作XML的所有方法,相信可以满足很大一部份的使用了。
收藏 0 赞 0 分享

c# 连接字符串数据库服务器端口号 .net状态服务器端口号

正常的数据库连接字符串配置,这是在MSSQL服务器端口是1433(默认)的情况下。
收藏 0 赞 0 分享

ASP.NET 路径问题的解决方法

相对路径和绝对路径在ASP.NET中可以用~/来解决.
收藏 0 赞 0 分享

asp.net TemplateField模板中的Bind方法和Eval方法

在TemplateField模板中为了能够有限制的或者取出数据库中某列的值时,可以用Bind和Eval方法来实现。以下是Bind方法的格式,Eval的格式也是和Bind一样的。 Bind("列的名称","显示的格式文")
收藏 0 赞 0 分享
查看更多