데이터베이스에 CascadingDropDown 사용(VB)Using CascadingDropDown with a Database (VB)

Christian Wenzby Christian Wenz

코드 다운로드 또는 PDF 다운로드Download Code or Download PDF

AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 dropdownlist 컨트롤을 확장 하 여 한 DropDownList의 변경 내용이 다른 DropDownList의 관련 값을 로드 하도록 합니다.The CascadingDropDown control in the AJAX Control Toolkit extends a DropDownList control so that changes in one DropDownList loads associated values in another DropDownList. 이 작업을 수행 하려면 특수 웹 서비스를 만들어야 합니다.In order for this to work, a special web service must be created.

개요Overview

AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 dropdownlist 컨트롤을 확장 하 여 한 DropDownList의 변경 내용이 다른 DropDownList의 관련 값을 로드 하도록 합니다.The CascadingDropDown control in the AJAX Control Toolkit extends a DropDownList control so that changes in one DropDownList loads associated values in another DropDownList. 예를 들어, 한 목록에는 미국 주 목록이 제공 되며 다음 목록에는 해당 상태의 주 도시가 채워집니다. 이 작업을 수행 하려면 특수 웹 서비스를 만들어야 합니다.(For instance, one list provides a list of US states, and the next list is then filled with major cities in that state.) In order for this to work, a special web service must be created.

단계Steps

먼저 데이터 원본이 필요 합니다.First of all, a data source is required. 이 샘플에서는 AdventureWorks 데이터베이스와 Microsoft SQL Server 2005 Express Edition을 사용 합니다.This sample uses the AdventureWorks database and the Microsoft SQL Server 2005 Express Edition. 데이터베이스는 Visual Studio 설치 (express edition 포함)의 선택적 부분이 며 https://go.microsoft.com/fwlink/?LinkId=64064에서 별도의 다운로드로 사용할 수도 있습니다.The database is an optional part of a Visual Studio installation (including express edition) and is also available as a separate download under https://go.microsoft.com/fwlink/?LinkId=64064. AdventureWorks 데이터베이스는 SQL Server 2005 샘플 및 예제 데이터베이스 ( https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&D isplayLang = en에서 다운로드)의 일부입니다.The AdventureWorks database is part of the SQL Server 2005 Samples and Sample Databases (download at https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&DisplayLang=en). 데이터베이스를 설정 하는 가장 쉬운 방법은 Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&D isplayLang = en)를 사용 하 고 AdventureWorks.mdf 데이터베이스 파일을 연결 하는 것입니다.The easiest way to set the database up is to use the Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&DisplayLang=en) and attach the AdventureWorks.mdf database file.

이 샘플에서는 SQL Server 2005 Express Edition 인스턴스가 SQLEXPRESS 호출 되 고 웹 서버와 같은 컴퓨터에 있는 것으로 가정 합니다. 이는 기본 설정 이기도 합니다.For this sample, we assume that the instance of the SQL Server 2005 Express Edition is called SQLEXPRESS and resides on the same machine as the web server; this is also the default setup. 설정이 다른 경우 데이터베이스에 대 한 연결 정보를 조정 해야 합니다.If your setup differs, you have to adapt the connection information for the database.

ASP.NET AJAX 및 Control Toolkit의 기능을 활성화 하려면 페이지의 아무 곳에 나 ScriptManager 컨트롤을 배치 해야 합니다 (<form> 요소 내).In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element):

<asp:ScriptManager ID="asm" runat="server" />

다음 단계에서는 두 개의 DropDownList 컨트롤이 필요 합니다.In the next step, two DropDownList controls are required. 이 샘플에서는 AdventureWorks의 공급 업체 및 연락처 정보를 사용 합니다. 따라서 사용 가능한 공급 업체에 대 한 목록과 사용 가능한 연락처에 대 한 목록을 하나씩 만듭니다.In this sample, we use the vendor and contact information from AdventureWorks, thus we create one list for the available vendors and one for the available contacts:

<div>
 Vendor: <asp:DropDownList ID="VendorsList" runat="server"/><br />
 Contacts: <asp:DropDownList ID="ContactsList" runat="server"/><br />
</div>

그런 다음 페이지에 두 개의 CascadingDropDown extender를 추가 해야 합니다.Then, two CascadingDropDown extenders must be added to the page. 하나는 첫 번째 (공급 업체) 목록을 채우고 다른 하나는 두 번째 (연락처) 목록을 채웁니다.One fills the first (vendors) list, and the other one fills the second (contacts) list. 다음 특성을 설정 해야 합니다.The following attributes must be set:

  • ServicePath: 목록 항목을 제공 하는 웹 서비스의 URLServicePath: URL of a web service delivering the list entries
  • ServiceMethod: 목록 항목을 전달 하는 웹 메서드ServiceMethod: Web method delivering the list entries
  • TargetControlID: 드롭다운 목록의 IDTargetControlID: ID of the dropdown list
  • Category: 호출 시 웹 메서드에 제출 되는 범주 정보Category: Category information that is submitted to the web method when called
  • PromptText: 서버에서 목록 데이터를 비동기적으로 로드할 때 표시 되는 텍스트입니다.PromptText: Text displayed when asynchronously loading list data from the server
  • ParentControlID: (선택 사항) 현재 목록의 로드를 트리거하는 부모 드롭다운 목록입니다.ParentControlID: (optional) parent dropdown list that triggers loading of the current list

사용 되는 프로그래밍 언어에 따라 문제의 웹 서비스 이름이 변경 되지만 다른 모든 특성 값은 동일 합니다.Depending on the programming language used, the name of the web service in question changes, but all other attribute values are the same. 첫 번째 드롭다운 목록에 대 한 CascadingDropDown 요소는 다음과 같습니다.Here is the CascadingDropDown element for the first dropdown list:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor"
 PromptText="Select Vendor" />

두 번째 목록의 control extender는 공급 업체 목록의 항목을 선택 하 여 연락처 목록에 있는 관련 된 요소를 로드 하도록 하는 ParentControlID 특성을 설정 해야 합니다.The control extenders for the second list need to set the ParentControlID attribute so that selecting an entry in the vendors list triggers loading associated elements in the contacts list.

<ajaxToolkit:CascadingDropDown ID="ccd2" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetContactsForVendor"
 TargetControlID="ContactsList" ParentControlID="VendorsList"
 Category="Contact"
 PromptText="Select Contact" />

실제 작업은 웹 서비스에서 수행 되며 다음과 같이 설정 됩니다.The actual work is then done in the web service, which is set up as follows. [ScriptService] 특성이 사용 됩니다. 그렇지 않으면 AJAX ASP.NET는 클라이언트 쪽 스크립트 코드에서 웹 메서드에 액세스 하기 위한 JavaScript 프록시를 만들 수 없습니다.Note that the [ScriptService] attribute is used, otherwise ASP.NET AJAX cannot create the JavaScript proxy to access the web methods from client-side script code.

<%@ WebService Language="VB" Class="CascadingDropdown1" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.Data.SqlClient
<ScriptService()> _
Public Class CascadingDropdown1
 Inherits System.Web.Services.WebService
 ' ...
End Class

CascadingDropDown에서 호출 하는 웹 메서드의 시그니처는 다음과 같습니다.The signature of the web methods called by CascadingDropDown is as follows:

Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

따라서 반환 값은 컨트롤 Toolkit에서 정의 되는 CascadingDropDownNameValue 형식의 배열 이어야 합니다.So the return value must be an array of type CascadingDropDownNameValue which is defined by the Control Toolkit. GetVendors() 메서드는 구현 하기가 매우 쉽습니다. 코드는 AdventureWorks 데이터베이스에 연결 하 고 처음 25 개 공급 업체를 쿼리 합니다.The GetVendors() method is quite easy to implement: The code connects to the AdventureWorks database and queries the first 25 vendors. CascadingDropDownNameValue 생성자의 첫 번째 매개 변수는 목록 항목의 캡션으로, 두 번째 매개 변수는 값 (HTML의 <option> 요소의 값 특성)입니다.The first parameter in the CascadingDropDownNameValue constructor is the caption of the list entry, the second one its value (value attribute in HTML's <option> element). 코드는 다음과 같습니다.Here is the code:

<WebMethod()> _
Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand( _
 "SELECT TOP 25 VendorID, Name FROM Purchasing.Vendor", conn)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("Name").ToString(),dr("VendorID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

공급 업체에 대 한 연결 된 연락처를 가져오는 방법 (메서드 이름: GetContactsForVendor())은 조금 더 까다롭습니다.Getting the associated contacts for a vendor (method name: GetContactsForVendor()) is a bit trickier. 먼저 첫 번째 드롭다운 목록에서 선택한 공급 업체를 확인 해야 합니다.First of all, the vendor which has been selected in the first dropdown list must be determined. 컨트롤 도구 키트는 해당 작업에 대 한 도우미 메서드를 정의 합니다. ParseKnownCategoryValuesString() 메서드는 드롭다운 데이터가 포함 된 StringDictionary 요소를 반환 합니다.The Control Toolkit defines a helper method for that task: The ParseKnownCategoryValuesString() method returns a StringDictionary element with the dropdown data:

<WebMethod()> _
Public Function GetContactsForVendor(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim VendorID As Integer
 CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)

보안상의 이유로이 데이터는 먼저 유효성을 검사 해야 합니다.For security reasons, this data must be validated first. 따라서 공급 업체 항목이 있는 경우 (첫 번째 CascadingDropDown 요소의 Category 속성이 "Vendor")로 설정 되어 있기 때문에 선택한 공급 업체의 ID를 검색할 수 있습니다.So if there is a Vendor entry (because the Category property of the first CascadingDropDown element is set to "Vendor"), the ID of the selected vendor may be retrieved:

If Not kv.ContainsKey("Vendor") Or Not Int32.TryParse(kv("Vendor"),VendorID) Then
 Throw New ArgumentException("Couldn't find vendor.")
 End If

메서드의 나머지 부분은 매우 단순 합니다.The rest of the method is fairly straight-forward, then. 공급 업체의 ID는 해당 공급 업체에 대 한 모든 연결 된 연락처를 검색 하는 SQL 쿼리에 대 한 매개 변수로 사용 됩니다.The vendor's ID is used as a parameter for an SQL query that retrieves all associated contacts for that vendor. 다시 한 번, 메서드는 CascadingDropDownNameValue형식의 배열을 반환 합니다.Once again, the method returns an array of type CascadingDropDownNameValue.

Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand("SELECT Person.Contact.ContactID, FirstName, LastName FROM Person.Contact,Purchasing.VendorContact WHERE VendorID=@VendorID AND Person.Contact.ContactID=Purchasing.VendorContact.ContactID",conn)
 comm.Parameters.AddWithValue("@VendorID", VendorID)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("FirstName").ToString() & " " & dr("LastName").ToString(),dr("ContactID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

ASP.NET 페이지를 로드 하 고, 잠시 후 공급 업체 목록이 25 개 항목으로 채워져 있습니다.Load the ASP.NET page, and after a short while the vendor list is filled with 25 entries. 한 항목을 선택 하 고 두 번째 드롭다운 목록이 데이터로 채워지는 방식을 확인 합니다.Pick one entry and notice how the second dropdown list is filled with data.

첫 번째 목록이 자동으로 채워지는 The first list is filled automatically

첫 번째 목록이 자동으로 채워집니다 (전체 크기 이미지를 보려면 클릭).The first list is filled automatically (Click to view full-size image)

첫 번째 목록에서 선택한 항목에 따라 두 번째 목록이 채워집니다 The second list is filled according to the selection in the first list

첫 번째 목록의 선택 항목에 따라 두 번째 목록이 채워집니다 (전체 크기 이미지를 보려면 클릭).The second list is filled according to the selection in the first list (Click to view full-size image)