AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 DropDownList 컨트롤을 확장하여 한 DropDownList의 변경 내용이 다른 DropDownList에 연결된 값을 로드합니다. 그러나 CascadingDropDown 컨트롤을 사용하는 경우 ASP입니다. 목록에 데이터를 비동기적으로 로드하면 (불필요한) 포스트백 자체가 생성되므로 NET의 DropDownList 컨트롤의 AutoPostBack 기능이 작동하지 않습니다. 일부 JavaScript 코드를 사용하면 이 효과를 방지할 수 있습니다.
개요
AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 DropDownList 컨트롤을 확장하여 한 DropDownList의 변경 내용이 다른 DropDownList에 연결된 값을 로드합니다. (instance 경우 한 목록은 미국 주 목록을 제공하고 다음 목록은 해당 주의 주요 도시로 채워집니다.) 그러나 CascadingDropDown 컨트롤을 사용하는 경우 ASP입니다. 목록에 데이터를 비동기적으로 로드하면 (불필요한) 포스트백 자체가 생성되므로 NET의 DropDownList 컨트롤의 AutoPostBack 기능이 작동하지 않습니다. 일부 JavaScript 코드를 사용하면 이 효과를 방지할 수 있습니다.
단계
ASP.NET AJAX 및 제어 도구 키트의 기능을 활성화하려면 컨트롤을 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="CascadingDropdown3.cs.asmx" ServiceMethod="GetVendors"
TargetControlID="VendorsList" Category="Vendor" />
그런 다음 CascadingDropDown extender는 다음 메서드 서명을 사용하여 웹 서비스를 비동기적으로 호출합니다.
public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, string category)
메서드는 CascadingDropDown 값 형식의 배열을 반환합니다. 형식의 생성자는 먼저 목록 항목의 캡션 다음 값(HTML value 특성)을 예상합니다.
<%@ 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();
}
}
브라우저에서 페이지를 로드하면 드롭다운 목록에 3개의 공급업체가 채워지고 두 번째 공급업체가 미리 선택됩니다. 또한 ASP.NET JavaScript 메서드를 __doPostBack() 정의합니다. 페이지가 로드되면 이 JavaScript 호출이 드롭다운 목록에 추가되지만 해당 호출에 요소가 있는 경우에만 추가됩니다. 목록에 요소가 없으면 제어 도구 키트가 현재 로드되므로 JavaScript 코드는 시간 제한을 사용하고 반초 후에 다시 시도합니다.
<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>
이렇게 하면 목록에 실제로 요소가 있고 사용자가 항목을 선택하는 경우에만 포스트백이 실행됩니다.
목록 요소를 선택하면 포스트백이 발생합니다(전체 크기 이미지를 보려면 클릭).
