DropDownlList 바 인 딩 데이터 시트 2 단계 연동 예제 구현

장면 1:평소에 드 롭 다운 List 컨트롤 에 드 롭 다운 옵션 을 추가 할 때 아 이 템.add 방법 을 사용 하여 코드 에 직접 추가 합 니 다.드 롭 다운 옵션 을 추가 하거나 수정 하려 면 원본 코드 를 수정 해 야 합 니 다.만약 몇 개의 DropDownlList 컨트롤 의 드 롭 다운 옵션 이 같다 면,우 리 는 여러 번 반복 해서 추가 해 야 하 며,후기의 유지 보수 작업 은 매우 불편 하 다.장면 2:우리 가 12306 사이트 에서 표를 살 때 이런 상황 을 만 났 을 것 이다.우 리 는 먼저 목적지 의 성 을 선정 해 야 한다.성 을 선택 한 후에 도시 선택 상자 에 이 성의 도 시 를 자동 으로 불 러 와 2 급 연동 을 실현 해 야 한다.상기 두 장면 에 대해 저 희 는 DropDownlList 로 데이터 표를 직접 연결 하고 선택 한 성에 따라 이 성의 도 시 를 동적 으로 불 러 올 수 있 습 니 다.말 만 하고 연습 하지 않 으 면 사나이 가 아니 니 작은 데모 로 상세 한 과정 을 보 여 드 리 겠 습 니 다.먼저 우 리 는 데이터베이스 에 두 개의 표를 만들어 야 한다.하 나 는 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',' ')
건축 표 문 구 를 통 해 우 리 는 베 이 징 아래 에 세 개의 도시 인 해정,풍 대,대 흥 이 있 고 허 베 이 아래 에 세 개의 도시 인 형수,낭 방,보 정 이 있 으 며 산동 에는 세 개의 도시 인 제남,연대,청도 가 있다 는 것 을 알 수 있다.그리고 웹 창 에 컨트롤 을 놓 습 니 다.효 과 는 다음 그림 과 같 습 니 다. dropDownlList 컨트롤 이름 은 각각 ddlProvince,ddlCity 입 니 다.이 어 웹 배경 코드 에서 기능 을 수행 합 니 다.웹 창 에 불 러 올 때 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;
}
}
웹 창 을 불 러 올 때 실행 코드:
 
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();
}
이렇게 하면 우 리 는 DropDownlList 동적 으로 데이터 표를 연결 하여 선택 한 성의 동적 으로 이 성의 도 시 를 끌 어 내 리 는 기능 을 실현 합 니 다.대상 을 대상 으로 디자인 에서 결합 을 해제 하 는 목적 을 달성 하여 코드 의 유지 가능성 과 사용자 의 체험 도 를 강화 했다.나의 설명 이 모두 에 게 도움 이 되 기 를 바란다.

좋은 웹페이지 즐겨찾기