CascadingDropDown으로 자동 포스트백 사용(C#)Using Auto-Postback with CascadingDropDown (C#)

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. 그러나 CascadingDropDown 컨트롤을 사용 하는 경우 ASP. 데이터를 목록에 비동기적으로 로드 하면 (불필요 한) 포스트백이 생성 되므로 NET의 DropDownList 컨트롤의 AutoPostBack 기능이 작동 하지 않습니다.However when using the CascadingDropDown control, ASP.NET's DropDownList control's AutoPostBack feature does not work, since asynchronously loading data into the list generates an (unnecessary) postback itself. 일부 JavaScript 코드를 사용 하면이 효과를 피할 수 있습니다.With some JavaScript code, this effect can be avoided.

개요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. 예를 들어, 한 목록에는 미국 주 목록이 제공 되며 다음 목록에는 해당 상태의 주 도시가 채워집니다. 그러나 CascadingDropDown 컨트롤을 사용 하는 경우 ASP. 데이터를 목록에 비동기적으로 로드 하면 (불필요 한) 포스트백이 생성 되므로 NET의 DropDownList 컨트롤의 AutoPostBack 기능이 작동 하지 않습니다.(For instance, one list provides a list of US states, and the next list is then filled with major cities in that state.) However when using the CascadingDropDown control, ASP.NET's DropDownList control's AutoPostBack feature does not work, since asynchronously loading data into the list generates an (unnecessary) postback itself. 일부 JavaScript 코드를 사용 하면이 효과를 피할 수 있습니다.With some JavaScript code, this effect can be avoided.

단계Steps

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 컨트롤이 필요 합니다.Then, a DropDownList control is required:

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

이 목록에 대해 웹 서비스 URL 및 메서드 정보를 제공 하는 CascadingDropDown extender가 추가 됩니다.For this list, a CascadingDropDown extender is added, providing web service URL and method information:

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

그런 다음 CascadingDropDown extender는 다음 메서드 시그니처를 사용 하 여 웹 서비스를 비동기적으로 호출 합니다.The CascadingDropDown extender then asynchronously calls a web service with the following method signature:

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

메서드는 CascadingDropDown value 형식의 배열을 반환 합니다.The method returns an array of type CascadingDropDown value. 형식의 생성자는 먼저 목록 항목의 캡션과 값 (HTML value 특성)을 먼저 예상 합니다.The type's constructor expects first the list entry's caption and then the value (HTML value attribute).

<%@ WebService Language="C#" Class="CascadingDropdown3" %>
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 CascadingDropdown3 : 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"));
 l.Add(new CascadingDropDownNameValue("Premier Sport, Inc.", "3"));
 return l.ToArray();
 }
}

브라우저에서 페이지를 로드 하면 세 공급 업체가 세 번째로 미리 선택 된 상태로 드롭다운 목록을 채웁니다.Loading the page in the browser will fill the dropdown list with three vendors, the second one being preselected. 또한 ASP.NET는 __doPostBack() JavaScript 메서드를 정의 합니다.Also, ASP.NET defines the __doPostBack() JavaScript method. 페이지가 로드 되 면이 JavaScript 호출은 드롭다운 목록에 추가 되지만 여기에는 요소가 있는 경우에만 추가 됩니다.Once the page has been loaded, this JavaScript call is added to the dropdown list, but only if there are elements in it. 목록에 요소가 없으면 컨트롤 도구 키트가 현재 로드 하 고 있으므로 JavaScript 코드는 시간 제한을 사용 하 고 0.5 초 후에 다시 시도 합니다.If there are no elements in the list, the Control Toolkit is currently loading them, so the JavaScript code uses a timeout and tries again in a half second.

<script type="text/javascript">
 function pageLoad()
 {
 addAutoPostBack();
 }
 function addAutoPostBack()
 {
 if ($get("VendorsList").options.length > 0)
 {
 $get("VendorsList").setAttribute("onchange","javascript:setTimeout('__doPostBack(\\'VendorsList\\',\\'\\')', 0)");
 }
 else
 {
 setTimeout("addAutoPostBack()", 500);
 }
 }
</script>

이러한 방식으로, 목록에 실제로 요소가 있고 사용자가 항목을 선택 하는 경우에만 포스트백이 실행 됩니다.This way, a postback is only executed when there are actually elements in the list and the user selects an entry.

목록 요소를 선택 포스트백이 발생 합니다.Selecting a list element causes a postback

목록 요소를 선택 하면 포스트백이 발생 합니다 (전체 크기 이미지를 보려면 클릭).Selecting a list element causes a postback (Click to view full-size image)