AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 DropDownList 컨트롤을 확장하여 한 DropDownList의 변경 내용이 다른 DropDownList에 연결된 값을 로드합니다. 약간의 코드를 사용하면 데이터가 동적으로 로드되면 목록 요소가 미리 선택될 수 있습니다.
개요
AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 DropDownList 컨트롤을 확장하여 한 DropDownList의 변경 내용이 다른 DropDownList에 연결된 값을 로드합니다. (instance 경우 한 목록은 미국 주 목록을 제공하고 다음 목록은 해당 주의 주요 도시로 채워집니다.) 약간의 코드를 사용하면 데이터가 동적으로 로드되면 목록 요소가 미리 선택될 수 있습니다.
단계
ASP.NET AJAX 및 Control Toolkit의 기능을 활성화하려면 컨트롤을 ScriptManager 페이지의 아무 곳에나 배치해야 합니다(요소 내 <form> ).
<asp:ScriptManager ID="asm" runat="server" />
그런 다음 DropDownList 컨트롤이 필요합니다.
<div>
Vendor: <asp:DropDownList ID="VendorsList" runat="server"/>
</div>
이 목록의 경우 웹 서비스 URL 및 메서드 정보를 제공하는 CascadingDropDown extender가 추가됩니다.
<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
ServicePath="CascadingDropdown2.cs.asmx" ServiceMethod="GetVendors"
TargetControlID="VendorsList" Category="Vendor" />
그런 다음 CascadingDropDown extender는 다음 메서드 서명을 사용하여 웹 서비스를 비동기적으로 호출합니다.
public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, string category)
메서드는 CascadingDropDown 값 형식의 배열을 반환합니다. 형식의 생성자는 먼저 목록 항목의 캡션 다음 값(HTML value 특성)을 예상합니다. 세 번째 인수가 true로 설정되면 목록 요소가 브라우저에서 자동으로 선택됩니다.
<%@ WebService Language="C#" Class="CascadingDropdown2" %>
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;
[ScriptService]
public class CascadingDropdown2 : System.Web.Services.WebService
{
[WebMethod]
public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, string
category)
{
List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
l.Add(new CascadingDropDownNameValue(
"International", "1"));
l.Add(new CascadingDropDownNameValue(
"Electronic Bike Repairs & Supplies", "2", true));
l.Add(new CascadingDropDownNameValue(
"Premier Sport, Inc.", "3"));
return l.ToArray();
}
}
브라우저에서 페이지를 로드하면 드롭다운 목록에 3개의 공급업체가 채워지고 두 번째 공급업체가 미리 선택됩니다.
목록이 채워지고 자동으로 미리 선택됩니다(전체 크기 이미지를 보려면 클릭).
