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动态绑定数据表,实现了根据选择的省份动态下拉该省份下的城市的功能,达到了面向对象设计中解耦的目的,增强了代码的可维护性和用户的体验度。
希望我的讲解能对大家有所帮助。
相关文章
- 我们知道,DropDownList下拉框是一个服务器控件,有时候,有些朋友为了方便绑定DropDownList下拉框的选项,但又想在DropDownList实现客户端的下拉事件,那该怎么实现呢?...2021-09-22
DropDownList获取的SelectIndex一直为0的问题
由于初始化判断出错导致每次传到服务器的时候会初始化一次,这就导致每次获取DropDownList的SelectIndex的时候只能是0...2021-09-22DropDownList 下拉框选择改变促发事件和防全局刷新(推荐)
这篇文章主要介绍了DropDownList 下拉框选择改变促发事件和防全局刷新(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2021-09-22ASP.NET笔记之 ListView 与 DropDownList的使用
本篇文章小编为大家介绍,ASP.NET笔记之 ListView 与 DropDownList的使用。需要的朋友参考下...2021-09-22在ASP.NET 2.0中操作数据之三十三:基于DataList和Repeater使用DropDownList过滤的主/从报表
前面已经介绍过使用DropDownList过滤的主/从报表,不过当时是基于GridView,本文算是复习一下,基于DataList和Repeater再次实现一下相同的功能。...2021-09-22ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法
这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式...2021-09-22ASP.NET DropDownListCheckBox使用示例(解决回发问题)
本文为大家介绍下ASP.NET DropDownListCheckBox的使用,这个是根据LigerUI改的,解决了回发问题,喜欢的朋友可以参考下...2021-09-22- 在某些时候表中没有可以排序的字段同时呢也不想修改表结构,但它的项文本有序号这时就可以用这方法排序,感兴趣的你可以参考下,或许本文知识点对你有所帮助...2021-09-22
- C# DropDownList中点击打开新窗口的方法,需要的朋友可以参考一下...2020-06-25
- 这篇文章主要介绍了DropDownList绑定数据表实现两级联动具体实现,需要的朋友可以参考下...2021-09-22
ASP.NET中DropDownList和ListBox实现两级联动功能
这篇文章主要介绍了ASP.NET中DropDownList和ListBox实现两级联动功能的相关资料,需要的朋友可以参考下...2021-09-22ASP.NET MVC DropDownList数据绑定及使用详解
DropDownList 控件用于创建下拉列表。DropDownList 控件中的每个可选项都是由 ListItem 元素定义的!该控件支持数据绑定...2021-09-22asp.net实现递归方法取出菜单并显示在DropDownList中(分栏形式)
这篇文章主要介绍了asp.net实现递归方法取出菜单并显示在DropDownList中的方法,涉及asp.net递归算法与DropDownList使用技巧,需要的朋友可以参考下...2021-09-22asp.net中不能在DropDownList中选择多个项 原因分析及解决方法
不能在 DropDownList 中选择多个项,在前一步操作的过程中,已经选择了某个Item...2021-09-22asp.net DropDownList自定义控件,让你的分类更清晰
记得上次做论坛,一个功能就是合并2个子板块的主题,用级联的2个DropDownList也是可以完成,那样我们要合并的时候总共就有4个DropDownList控件,觉得界面友好...2021-09-22asp.net实现XML文件读取数据绑定到DropDownList的方法
这篇文章主要介绍了asp.net实现XML文件读取数据绑定到DropDownList的方法,结合实例形式分析了asp.net针对xml文件操作及DropDownList控件的使用技巧,需要的朋友可以参考下...2021-09-22点击提交按钮后DropDownList的值变为默认值实现分析
在点击提交按钮后,页面上所有的绑定到数据库的控件值都恢复到默认值,下面与大家分享下DropDownList的值变为默认值...2021-09-22asp.net中通过DropDownList的值去控制TextBox是否可编写的实现代码
Web窗体上有两控件,DropDownList1,TextBox1,当DropDownList的值选择是YES的时候,TextBox1可编辑,当选择NO的时候,TextBox1的值为空,并且不能编辑,该如何实现...2021-09-22asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法
这篇文章主要介绍了asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法 ,需要的朋友可以参考下...2021-09-22asp.net实现DropDownList,TreeView,ListBox的无限极分类目录树
这篇文章主要介绍了asp.net实现DropDownList,TreeView,ListBox的无限极分类目录树,结合实例形式较为详细的分析了asp.net常见控件实现无限极分类目录树的具体实现步骤与相关操作技巧,需要的朋友可以参考下...2021-09-22