DropDownList綁定數(shù)據(jù)表實現(xiàn)兩級聯(lián)動示例

場景二：我們在12306網(wǎng)站買票時，肯定遇到過這么一種情景：我們需要先選定目的地的省份，選完省份后在城市選框中會自動加載該省份的城市，實現(xiàn)兩級聯(lián)動。

針對以上兩個場景，我們可以用DropDownList直接綁定數(shù)據(jù)表，根據(jù)選擇的省份動態(tài)加載該省份下的城市。光說不練，不是好漢，讓我用一個小Demo來大家演示下詳細過程吧。

首先我們需要在數(shù)據(jù)庫中建立兩個表，一個是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后臺代碼中實現(xiàn)功能。我們需要在Web窗體加載時，ddlProvince控件綁定Province表，在ddlProvince下拉選項改變時，ddlCity控件綁定City表。實現(xiàn)代碼如下： 
建立數(shù)據(jù)庫連接類： 
 代碼如下:

public class DB 
{ 
//連接數(shù)據(jù)庫的字符串 
public static SqlConnection CreateConnection() 
{ 
SqlConnection con = new SqlConnection("Data Source=. ;Initial Catalog=test;uid=sa;pwd=123456;"); 
return con; 
} 
} 
 
Web窗體加載時執(zhí)行代碼： 
 代碼如下:

protected void Page_Load(object sender, EventArgs e) 
{ 
//如果窗體是第一次加載 
if (!this.IsPostBack) 
{ 
//綁定省份 
SqlConnection con = DB.CreateConnection(); 
//打開數(shù)據(jù)庫連接 
con.Open(); 
SqlCommand cmdProvince = new SqlCommand("select * from Province", con); 
SqlDataReader sdrProvince = cmdProvince.ExecuteReader(); 
//將sdrProvince中的內(nèi)容綁定到ddlProvince下拉列表中 
this.ddlProvince.DataSource = sdrProvince; 
//需要顯示的數(shù)據(jù)表Province中的內(nèi)容 
this.ddlProvince.DataTextField = "ProName"; 
//需要顯示的數(shù)據(jù)表Province中的主鍵 
this.ddlProvince.DataValueField = "ProID"; 
this.ddlProvince.DataBind(); 
sdrProvince.Close(); 
//關閉數(shù)據(jù)庫連接 
con.Close(); 
} 
} 
 
ddlProvince控件下拉選項改變時執(zhí)行的代碼： 
 代碼如下:

protected void ddlProvince_SelectedIndexChanged(object sender, EventArgs e) 
{ 
SqlConnection con = DB.CreateConnection(); 
//打開數(shù)據(jù)庫連接 
con.Open(); 
//綁定城市 
SqlCommand cmdCity = new SqlCommand("select * from City where ProID=" + this.ddlProvince.SelectedValue, con); 
SqlDataReader sdrCity = cmdCity.ExecuteReader(); 
//將sdrCity中的內(nèi)容綁定到ddlCity下拉列表中 
this.ddlCity.DataSource = sdrCity; 
//需要顯示的數(shù)據(jù)表City中的內(nèi)容 
this.ddlCity.DataTextField = "CityName"; 
//需要顯示的數(shù)據(jù)表City中的主鍵 
this.ddlCity.DataValueField = "CityID"; 
this.ddlCity.DataBind(); 
sdrCity.Close(); 
//關閉數(shù)據(jù)庫連接 
con.Close(); 
} 
 
這樣，我們就用DropDownList動態(tài)綁定數(shù)據(jù)表，實現(xiàn)了根據(jù)選擇的省份動態(tài)下拉該省份下的城市的功能，達到了面向?qū)ο笤O計中解耦的目的，增強了代碼的可維護性和用戶的體驗度。 
希望我的講解能對大家有所幫助。
 
 




聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com