데이터베이스에 CascadingDropDown 사용(C#)

아티클
03/02/2024

AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 DropDownList 컨트롤을 확장하여 한 DropDownList의 변경 내용이 다른 DropDownList에 연결된 값을 로드합니다. 이렇게 하려면 특수 웹 서비스를 만들어야 합니다.

개요

AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 DropDownList 컨트롤을 확장하여 한 DropDownList의 변경 내용이 다른 DropDownList에 연결된 값을 로드합니다. (instance 경우 한 목록은 미국 주 목록을 제공하고 다음 목록은 해당 주의 주요 도시로 채워집니다.) 이렇게 하려면 특수 웹 서비스를 만들어야 합니다.

단계

우선 데이터 원본이 필요합니다. 이 샘플에서는 AdventureWorks 데이터베이스 및 Microsoft SQL Server 2005 Express Edition 사용합니다. 데이터베이스는 Visual Studio 설치(Express Edition 포함)의 선택적 부분이며 에서 https://go.microsoft.com/fwlink/?LinkId=64064별도의 다운로드로도 사용할 수 있습니다. AdventureWorks 데이터베이스는 SQL Server 2005 샘플 및 샘플 데이터베이스의 일부입니다(에서 https://www.microsoft.com/download/details.aspx?id=10679다운로드). 데이터베이스를 설정하는 가장 쉬운 방법은 Microsoft SQL Server Management Studio(/sql/ssms/download-sql-server-management-studio-ssms)을 사용하고 데이터베이스 파일을 연결하는 AdventureWorks.mdf 것입니다.

이 샘플에서는 SQL Server 2005 Express Edition instance 호출 SQLEXPRESS 되고 웹 서버와 동일한 컴퓨터에 상주한다고 가정합니다. 이는 기본 설정이기도 합니다. 설정이 다른 경우 데이터베이스에 대한 연결 정보를 조정해야 합니다.

ASP.NET AJAX 및 제어 도구 키트의 기능을 활성화하려면 컨트롤을 ScriptManager 페이지의 아무 곳에나 배치해야 합니다(요소 내 <form> ).

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

다음 단계에서는 두 개의 DropDownList 컨트롤이 필요합니다. 이 샘플에서는 AdventureWorks의 공급업체 및 연락처 정보를 사용하므로 사용 가능한 공급업체에 대한 목록 하나와 사용 가능한 연락처에 대한 목록을 만듭니다.

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

그런 다음, 두 개의 CascadingDropDown 확장기를 페이지에 추가해야 합니다. 하나는 첫 번째(공급업체) 목록을 채우고 다른 하나는 두 번째(연락처) 목록을 채웁니다. 다음 특성을 설정해야 합니다.

ServicePath: 목록 항목을 제공하는 웹 서비스의 URL
ServiceMethod: 목록 항목을 제공하는 웹 메서드
TargetControlID: 드롭다운 목록의 ID
Category: 호출될 때 웹 메서드에 제출되는 범주 정보
PromptText: 서버에서 목록 데이터를 비동기적으로 로드할 때 표시되는 텍스트
ParentControlID: (선택 사항) 현재 목록의 로드를 트리거하는 부모 드롭다운 목록

사용되는 프로그래밍 언어에 따라 문제의 웹 서비스 이름이 변경되지만 다른 모든 특성 값은 동일합니다. 다음은 첫 번째 드롭다운 목록의 CascadingDropDown 요소입니다.

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

두 번째 목록의 컨트롤 확장자는 공급업체 목록에서 항목을 선택하면 연락처 목록에서 연결된 요소 로드를 트리거하도록 특성을 설정 ParentControlID 해야 합니다.

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

실제 작업은 다음과 같이 설정된 웹 서비스에서 수행됩니다. 특성이 [ScriptService] 사용되며, 그렇지 않으면 ASP.NET AJAX는 클라이언트 쪽 스크립트 코드에서 웹 메서드에 액세스하기 위해 JavaScript 프록시를 만들 수 없습니다.

<%@ WebService Language="C#" Class="CascadingDropdown1" %>
using System.Web.Script.Services;
using AjaxControlToolkit;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Data.SqlClient;
[ScriptService]
public class CascadingDropdown1 : System.Web.Services.WebService
{
 // ...
}

CascadingDropDown에서 호출하는 웹 메서드의 서명은 다음과 같습니다.

public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, 
    string category)

따라서 반환 값은 Control Toolkit에 의해 정의된 형식 CascadingDropDownNameValue 의 배열이어야 합니다. 메서드는 GetVendors() 구현하기가 매우 쉽습니다. 코드는 AdventureWorks 데이터베이스에 연결하고 처음 25개 공급업체를 쿼리합니다. 생성자의 첫 번째 매개 변수는 목록 항목의 캡션, 두 번째 매개 변수 CascadingDropDownNameValue 는 해당 값(HTML 요소의 값 특성)입니다option<>. 코드는 다음과 같습니다.

[WebMethod]
public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, string category)
{
    SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
    Integrated Security=true; Initial Catalog=AdventureWorks");
    conn.Open();
    SqlCommand comm = new SqlCommand("SELECT TOP 25 VendorID, Name 
    FROM Purchasing.Vendor",conn);
    SqlDataReader dr = comm.ExecuteReader();
    List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
    while (dr.Read())
    {
        l.Add(new CascadingDropDownNameValue(dr["Name"].ToString(),
        dr["VendorID"].ToString()));
    }
    conn.Close();
    return l.ToArray();
}

공급업체(메서드 이름: GetContactsForVendor())에 대한 연결된 연락처를 가져오는 것은 조금 더 까다롭습니다. 우선 첫 번째 드롭다운 목록에서 선택된 공급업체를 결정해야 합니다. Control Toolkit은 해당 작업에 대한 도우미 메서드를 정의합니다. 메서드는 ParseKnownCategoryValuesString() 드롭다운 데이터가 있는 StringDictionary 요소를 반환합니다.

[WebMethod]
public CascadingDropDownNameValue[] GetContactsForVendor(string knownCategoryValues, 
    string category)
{
    int VendorID;
    CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

보안상의 이유로 이 데이터의 유효성을 먼저 검사해야 합니다. 따라서 공급업체 항목이 있는 경우(첫 번째 CascadingDropDown 요소의 속성이 로 "Vendor"설정되었기 때문에Category) 선택한 공급업체의 ID를 검색할 수 있습니다.

if (!kv.ContainsKey("Vendor") || !Int32.TryParse(kv["Vendor"],out VendorID)) 
{
    throw new ArgumentException("Couldn't find vendor.");
};

메서드의 나머지 는 상당히 직선 앞으로, 다음. 공급업체의 ID는 해당 공급업체에 대한 모든 연결된 연락처를 검색하는 SQL 쿼리의 매개 변수로 사용됩니다. 다시 한 번 메서드는 형식 CascadingDropDownNameValue의 배열을 반환합니다.

SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
 Integrated Security=true; Initial Catalog=AdventureWorks");
 conn.Open();
 SqlCommand comm = 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);
 SqlDataReader dr = comm.ExecuteReader();
 List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
 while (dr.Read())
 {
 l.Add(new CascadingDropDownNameValue(
 dr["FirstName"].ToString() + " " + dr["LastName"].ToString(),
 dr["ContactID"].ToString()));
 }
 conn.Close();
 return l.ToArray();
}

ASP.NET 페이지를 로드하고 잠시 후 공급업체 목록에 25개의 항목이 채워집니다. 하나의 항목을 선택하고 두 번째 드롭다운 목록이 데이터로 채워지는 방법을 확인합니다.

첫 번째 목록이 자동으로 채워집니다(전체 크기 이미지를 보려면 클릭).

두 번째 목록은 첫 번째 목록의 선택 항목에 따라 채워집니다(전체 크기 이미지를 보려면 클릭).

이전 다음

다음을 통해 공유

데이터베이스에 CascadingDropDown 사용(C#)

개요

단계

피드백

추가 리소스