溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

DropDownList如何綁定數(shù)據(jù)表實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng)

發(fā)布時(shí)間:2021-09-30 10:04:26 來(lái)源:億速云 閱讀:179 作者:小新 欄目:開(kāi)發(fā)技術(shù)

這篇文章主要介紹DropDownList如何綁定數(shù)據(jù)表實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng),文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

場(chǎng)景一:平時(shí)我們?cè)贒ropDownList控件下添加下拉選項(xiàng)時(shí),都會(huì)使用它的Item.Add方法,直接在代碼下添加。如果我們想添加或修改下拉選項(xiàng),則必須去修改源代碼。如果幾個(gè)DropDownList控件的下拉選項(xiàng)相同,我們則需要重復(fù)添加好多次,后期的維護(hù)工作很不方便。

場(chǎng)景二:我們?cè)?2306網(wǎng)站買(mǎi)票時(shí),肯定遇到過(guò)這么一種情景:我們需要先選定目的地的省份,選完省份后在城市選框中會(huì)自動(dòng)加載該省份的城市,實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng)。

針對(duì)以上兩個(gè)場(chǎng)景,我們可以用DropDownList直接綁定數(shù)據(jù)表,根據(jù)選擇的省份動(dòng)態(tài)加載該省份下的城市。光說(shuō)不練,不是好漢,讓我用一個(gè)小Demo來(lái)大家演示下詳細(xì)過(guò)程吧。

首先我們需要在數(shù)據(jù)庫(kù)中建立兩個(gè)表,一個(gè)是Province(省份)表,一個(gè)是City(城市)表。建表語(yǔ)句如下: 


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','豐臺(tái)')
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','濟(jì)南')
insert into City values('8','3','煙臺(tái)')
insert into City values('9','3','青島')


通過(guò)建表語(yǔ)句我們可以知道,北京下有三個(gè)城市--海淀、豐臺(tái)、大興,河北下有三個(gè)城市--衡水、廊坊、保定,山東有三個(gè)城市--濟(jì)南、煙臺(tái)、青島。

然后我們?cè)赪eb窗體中放好控件,效果如下圖所示:
DropDownList如何綁定數(shù)據(jù)表實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng) 
dropDownList控件名稱(chēng)分別為ddlProvince、ddlCity

接著我們?cè)赪eb后臺(tái)代碼中實(shí)現(xiàn)功能。我們需要在Web窗體加載時(shí),ddlProvince控件綁定Province表,在ddlProvince下拉選項(xiàng)改變時(shí),ddlCity控件綁定City表。實(shí)現(xiàn)代碼如下:

建立數(shù)據(jù)庫(kù)連接類(lèi):

復(fù)制代碼 代碼如下:


public class DB
{
//連接數(shù)據(jù)庫(kù)的字符串
public static SqlConnection CreateConnection()
{
SqlConnection con = new SqlConnection("Data Source=. ;Initial Catalog=test;uid=sa;pwd=123456;");
return con;
}
}


Web窗體加載時(shí)執(zhí)行代碼:

復(fù)制代碼 代碼如下:


protected void Page_Load(object sender, EventArgs e)
{
//如果窗體是第一次加載
if (!this.IsPostBack)
{
//綁定省份
SqlConnection con = DB.CreateConnection();
//打開(kāi)數(shù)據(jù)庫(kù)連接
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();
//關(guān)閉數(shù)據(jù)庫(kù)連接
con.Close();
}
}


ddlProvince控件下拉選項(xiàng)改變時(shí)執(zhí)行的代碼:

復(fù)制代碼 代碼如下:


protected void ddlProvince_SelectedIndexChanged(object sender, EventArgs e)
{
SqlConnection con = DB.CreateConnection();
//打開(kāi)數(shù)據(jù)庫(kù)連接
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();
//關(guān)閉數(shù)據(jù)庫(kù)連接
con.Close();

這樣,我們就用DropDownList動(dòng)態(tài)綁定數(shù)據(jù)表,實(shí)現(xiàn)了根據(jù)選擇的省份動(dòng)態(tài)下拉該省份下的城市的功能,達(dá)到了面向?qū)ο笤O(shè)計(jì)中解耦的目的,增強(qiáng)了代碼的可維護(hù)性和用戶的體驗(yàn)度。

以上是“DropDownList如何綁定數(shù)據(jù)表實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI