Creating Cascading DropDownLists in ASP.Net (연속적인 셀렉트박스...

Creating Cascading DropDownLists in ASP.Net (연속적인 셀렉트박스...

연속적인 선택

대륙 : 아시아 --- 한국 ------------------------------ 서울

일본 부산

중국 대전

광주

이런식으루... 선택된 데이터의 하위 데이터 리스트를 불러올때

asp.net 이 아닐 경우에는 ajax 로 호출 해서 뿌려주면 되겠다.

하지만 asp.net 은 간단하게 처리할 수 있으니 나는 아래의 방법으로 처리함.

DB에서 안불러오고 그냥 뿌려줄 경우에는

CCategory2.Items.Clear(); // CCategory2 selectbox 초기화

if (Category1 == "new") {

CCategory2.Items.Add(new ListItem("없음", "")); // 없음

} else if (Category1 == "Set-Top Box Remote"){

CCategory2.Items.Add(new ListItem("Smart Remote", "Smart Remote"));

CCategory2.Items.Add(new ListItem("Cable/IPTV/SAT", "Cable/IPTV/SAT"));

}

Cascading DropDownList means a series of dependent DropDownLists where one DropDownList is dependent on the parent or previous DropDownList and is populated based on the item selected by the user. On many occasions we need to make use of Cascading DropDownLists as I have here

Continent - Country - City

City is dependent on Country and in turn Country is dependent on the Continent thus we need a series of Cascading DropDownList here.

Database Design

For this tutorial I have created three tables whose designs are given below

Continents Table

Countries Table

Cities Table

Connection String

Front End Design

I have used 3 DropDownLists one for each entity the mapping is shown below

1. ddlContinents - List of Continents

2. ddlCountry- List of Countries

3. ddlCity - List of Cities

Select Continent : Select Country : Select City :

I have added OnSelectedIndexChanged Event to all DropDownLists and also AutoPostBack set property to true.

The User Interface looks as below

Populating the Continents DropDownList

On the Page_Load Event of the Page I am populating the Continents DropDownList

C#

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ddlContinents.AppendDataBoundItems = true; String strConnString = ConfigurationManager .ConnectionStrings["conString"].ConnectionString; String strQuery = "select ID, ContinentName from Continents"; SqlConnection con = new SqlConnection(strConnString); SqlCommand cmd = new SqlCommand(); cmd.CommandType = CommandType.Text; cmd.CommandText = strQuery; cmd.Connection = con; try { con.Open(); ddlContinents.DataSource = cmd.ExecuteReader(); ddlContinents.DataTextField = "ContinentName"; ddlContinents.DataValueField = "ID"; ddlContinents.DataBind(); } catch (Exception ex) { throw ex; } finally { con.Close(); con.Dispose(); } } }

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load If Not IsPostBack Then ddlContinents.AppendDataBoundItems = True Dim strConnString As [String] = ConfigurationManager _ .ConnectionStrings("conString").ConnectionString Dim strQuery As [String] = "select ID, ContinentName from Continents" Dim con As New SqlConnection(strConnString) Dim cmd As New SqlCommand() cmd.CommandType = CommandType.Text cmd.CommandText = strQuery cmd.Connection = con Try con.Open() ddlContinents.DataSource = cmd.ExecuteReader() ddlContinents.DataTextField = "ContinentName" ddlContinents.DataValueField = "ID" ddlContinents.DataBind() Catch ex As Exception Throw ex Finally con.Close() con.Dispose() End Try End If End Sub

Populating the Country DropDownList

Next on the SelectedIndexChanged Event of the parent Continent DropDownList I am populating the Countries DropDownList based on the ID of the Continent Selected by the user

C#

protected void ddlContinents_SelectedIndexChanged(object sender, EventArgs e) { ddlCountry.Items.Clear(); ddlCountry.Items.Add(new ListItem("--Select Country--", "")); ddlCity.Items.Clear(); ddlCity.Items.Add(new ListItem("--Select City--", "")); ddlCountry.AppendDataBoundItems = true; String strConnString = ConfigurationManager .ConnectionStrings["conString"].ConnectionString; String strQuery = "select ID, CountryName from Countries " + "where ContinentID=@ContinentID"; SqlConnection con = new SqlConnection(strConnString); SqlCommand cmd = new SqlCommand(); cmd.Parameters.AddWithValue("@ContinentID", ddlContinents.SelectedItem.Value); cmd.CommandType = CommandType.Text; cmd.CommandText = strQuery; cmd.Connection = con; try { con.Open(); ddlCountry.DataSource = cmd.ExecuteReader(); ddlCountry.DataTextField = "CountryName"; ddlCountry.DataValueField = "ID"; ddlCountry.DataBind(); if (ddlCountry.Items.Count > 1) { ddlCountry.Enabled = true; } else { ddlCountry.Enabled = false; ddlCity.Enabled = false; } } catch (Exception ex) { throw ex; } finally { con.Close(); con.Dispose(); } }

VB.Net

Protected Sub ddlContinents_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) ddlCountry.Items.Clear() ddlCountry.Items.Add(New ListItem("--Select Country--", "")) ddlCity.Items.Clear() ddlCity.Items.Add(New ListItem("--Select City--", "")) ddlCountry.AppendDataBoundItems = True Dim strConnString As [String] = ConfigurationManager _ .ConnectionStrings("conString").ConnectionString Dim strQuery As [String] = "select ID, CountryName from Countries " _ & "where ContinentID=@ContinentID" Dim con As New SqlConnection(strConnString) Dim cmd As New SqlCommand() cmd.Parameters.AddWithValue("@ContinentID", _ ddlContinents.SelectedItem.Value) cmd.CommandType = CommandType.Text cmd.CommandText = strQuery cmd.Connection = con Try con.Open() ddlCountry.DataSource = cmd.ExecuteReader() ddlCountry.DataTextField = "CountryName" ddlCountry.DataValueField = "ID" ddlCountry.DataBind() If ddlCountry.Items.Count > 1 Then ddlCountry.Enabled = True Else ddlCountry.Enabled = False ddlCity.Enabled = False End If Catch ex As Exception Throw ex Finally con.Close() con.Dispose() End Try End Sub

You will notice I am passing the ID of the continent as parameter to the Query using SelectedItemValue property of the DropDownList thus the query returns the records (Countries) for that Continent ID which are then bind to the Country DropDownList

Populating the City DropDownList

Now on the selection of the Country I am filling the Cities for that country into the City DropDownList.

C#

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e) { ddlCity.Items.Clear(); ddlCity.Items.Add(new ListItem("--Select City--", "")); ddlCity.AppendDataBoundItems = true; String strConnString = ConfigurationManager .ConnectionStrings["conString"].ConnectionString; String strQuery = "select ID, CityName from Cities " + "where CountryID=@CountryID"; SqlConnection con = new SqlConnection(strConnString); SqlCommand cmd = new SqlCommand(); cmd.Parameters.AddWithValue("@CountryID", ddlCountry.SelectedItem.Value); cmd.CommandType = CommandType.Text; cmd.CommandText = strQuery; cmd.Connection = con; try { con.Open(); ddlCity.DataSource = cmd.ExecuteReader(); ddlCity.DataTextField = "CityName"; ddlCity.DataValueField = "ID"; ddlCity.DataBind(); if (ddlCity.Items.Count > 1) { ddlCity.Enabled = true; } else { ddlCity.Enabled = false; } } catch (Exception ex) { throw ex; } finally { con.Close(); con.Dispose(); } }

VB.Net

Protected Sub ddlCountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) ddlCity.Items.Clear() ddlCity.Items.Add(New ListItem("--Select City--", "")) ddlCity.AppendDataBoundItems = True Dim strConnString As [String] = ConfigurationManager _ .ConnectionStrings("conString").ConnectionString Dim strQuery As [String] = "select ID, CityName from Cities " _ & "where CountryID=@CountryID" Dim con As New SqlConnection(strConnString) Dim cmd As New SqlCommand() cmd.Parameters.AddWithValue("@CountryID", _ ddlCountry.SelectedItem.Value) cmd.CommandType = CommandType.Text cmd.CommandText = strQuery cmd.Connection = con Try con.Open() ddlCity.DataSource = cmd.ExecuteReader() ddlCity.DataTextField = "CityName" ddlCity.DataValueField = "ID" ddlCity.DataBind() If ddlCity.Items.Count > 1 Then ddlCity.Enabled = True Else ddlCity.Enabled = False End If Catch ex As Exception Throw ex Finally con.Close() con.Dispose() End Try End Sub

Above I am firing a query on the Cities Table and getting all the cities that belong to that country which was selected by the user.

Displaying the Results

Finally on the SelectedIndexChanged event of the City DropDownList I am displaying the complete selections done by the user.

C#

protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e) { lblResults.Text = "You Selected " + ddlContinents.SelectedItem.Text + " -----> " + ddlCountry.SelectedItem.Text + " -----> " + ddlCity.SelectedItem.Text; }

VB.Net

Protected Sub ddlCity_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) lblResults.Text = "You Selected " & _ ddlContinents.SelectedItem.Text & " -----> " & _ ddlCountry.SelectedItem.Text & " -----> " & _ ddlCity.SelectedItem.Text End Sub

The output is shown in the screenshot below

Thus we come to the end of this article. Download the sample source code in VB.Net and C# using the link below

from http://otep.tistory.com/234 by ccl(A) rewrite - 2020-03-07 07:56:25

댓글

댓글 쓰기

이 블로그의 인기 게시물

C# Error Collections [C#관련 팁들]

C# Error Collections [C#관련 팁들] 객체(클래스, 구조체) 등을 배열로 선언하기 -------------------------------------------------------------------------------- Q : Ftpproc[] ftc = new Ftpproc(this); 이건 형식이 다르다고 안되구 A : 음, 소스의 내용은 잘 이해가 안 가는데요,.. 어쨌거나, 원하시는게 아래와 같은게 아닌지 ??? Ftpproc[] ftc = new Ftpproc[3]; ftc[0] = new Ftpproc(this); ftc[1] = new Ftpproc(this); ftc[2] = new Ftpproc(this); c#의 문법적인 부분이긴 합니다만.... .. . -------------------------------------------------------------------------------- struct 선언법 -------------------------------------------------------------------------------- using System; namespace SoonERP.soon { public struct pnode { public string memid; public string memname; public string upnmemid; public string jumin; public string telno; public bool marked; } public class main { pnode node = new pnode(); //..... } } -------------------------------------------------------------------------------- 솔루션 내에 다른 프로젝트의 Form 끼리 데이터 공유! -...
자세한 내용 보기

2013 년 7월 17일 컴퓨터 관련 내가 가지고 있는 도서 목록.

2013 년 7월 17일 컴퓨터 관련 내가 가지고 있는 도서 목록. 순서 도서 빌려준 사람 1 Window workflow foundation 2 Web Applicatuibs MCAD,MCSD 3 ASP.net 2.0웹 프로젝트와 실전 프로그래밍 4 CLR via c# 5 XSLT 6 보기보다 쉬운 프로그래밍 7 ASP XML 8 javascript , html ,dhtml , css, vml 9 VS 2005 로 배우는 c#게임 프로그래밍 10 스트럭츠 2 프로그래밍 11 C# 객체지향 언어로 배우는 디자인 패턴 12 Debugging Application For net and windwos 13 Spring 프레임워크 워크북 14 ajax 패턴과 베스트 프락티스 15 SQL server2000 관리자용 16 C 기초 플러스 17 Windows with c# 18 Windows workflow fundation step by step 19 리펙토링 20 CentOS 리눅스 구축관리실무 21 GWT 구글 웹툴킷 22 ASP.net 2.0 appications Advenced topic 23 게시판과 블로그 예제로 배우는 asp.net2.0 24 java언어로 배우는 디자인 패턴 입문 -멀티 쓰레드편 25 Open GL superbible 제3판 26 테스트 주도 개발 TDD 27 Stylesheets 사전 28 유닉스리눅스 명령어 사전 29 java언어로 배우는 디자인 패턴 입문 30 Windows XP 웹서 구축하기 31 C로 배우는 알고리즘 1 32 C로 배우는 알고리즘 2 33 silveright 3 34 soa what & how 35 XML web service 36 닷넷 플렛폼에서 xml 웹서버 구축하기 37 닷넷 네트워크 프로그래밍 38 파이선 programming 39 swt/jface 인 액션 ...
자세한 내용 보기

ASP.NET MVC 5 - 컨트롤러 기초

ASP.NET MVC 5 - 컨트롤러 기초 Understanding Controllers Basics By Examples And Tutorial 예제와 튜토리얼을 통해 컨트롤러 기초 이해하기 이번 강의에서 당신은: 1. ASP.NET MVC Controllers의 기초를 이해합니다. 2. 실제 Controller 예제를 배웁니다. 3. 컨트롤러를 사용하는데에 있어 몇몇 중요한 사실을 배웁니다. 4. 컨트롤러 추가하는법을 배웁니다. 5. action results를 이해합니다. MVC CONTROLLERS의 기초 이해하기 컨트롤러를 쉽게 이해하기 위해, 실생활 시나리오를 추가하겠습니다. 그러면 컨트롤러를 시각화하는데 도움을 줄 것입니다. In order to understand controllers easily, I am adding a real-world scenario. It will help you in visualize controllers. 실생활을 예시로 컨트롤러 이해하기 다들 도미노피자와 피자헛 아시죠. 피자헛을 예로 들어서 컨트롤러와 모델, 뷰를 이해해보겠습니다. 1. 당신은 손님으로서 피자헛을 방문합니다. [It means you are a user and visiting ASP.NET MVC Website 이것은 당신은 사용자이고, ASP.NET 웹사이트를 방문한다는 것입니다.] 2. 많은 종류의 메뉴가 있고, 메뉴판은 벽에 붙어있고 메뉴카드도 테이블에 붙어있습니다. 당신은 메뉴카드를 집어 여러 종류의 피자를 살펴봅니다. 마침내, 당신은 피자와 초코향의 커피를 골라 웨이터에게 주문을 합니다. [It means you browse website and click on a link이것은 당신이 웹사이트를 검색하고 링크를 클릭한것을 의미합니다.] 3. 웨이터는 카운터에 가서 매니저에세 당신의 주문목록을 전합니다. [이건 마치, 당신이 HTTP요청을 컨트롤러에 보낸것과 같습니다. 여기서 웨이...
자세한 내용 보기