작성자 : Christian Wenz
AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 DropDownList 컨트롤을 확장하여 한 DropDownList의 변경 내용이 연결된 값을 다른 DropDownList에 로드합니다. 그러나 CascadingDropDown 컨트롤을 사용할 때, ASP.NET의 DropDownList 컨트롤의 AutoPostBack 기능이 작동하지 않습니다. 이는 목록에 데이터를 비동기적으로 로드하면 불필요한 포스트백을 자체적으로 생성하기 때문입니다. 일부 JavaScript 코드를 사용하면 이 효과를 방지할 수 있습니다.
개요
AJAX 컨트롤 도구 키트의 CascadingDropDown 컨트롤은 DropDownList 컨트롤을 확장하여 한 DropDownList의 변경 내용이 연결된 값을 다른 DropDownList에 로드합니다. (예를 들어 한 목록은 미국 주 목록을 제공하고 다음 목록은 해당 주의 주요 도시로 채워집니다.) 그러나 CascadingDropDown 컨트롤을 사용할 때, ASP.NET의 DropDownList 컨트롤의 AutoPostBack 기능은 작동하지 않습니다. 이는 목록에 데이터를 비동기적으로 로드할 때 불필요한 포스트백이 자체적으로 생성되기 때문입니다. 일부 JavaScript 코드를 사용하면 이 효과를 방지할 수 있습니다.
단계
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="CascadingDropdown3.vb.asmx" ServiceMethod="GetVendors"
TargetControlID="VendorsList" Category="Vendor" />
그런 다음 CascadingDropDown extender는 다음 메서드 시그니처를 사용하여 웹 서비스를 비동기적으로 호출합니다.
Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
메서드는 CascadingDropDown 형식 값의 배열을 반환합니다. 형식의 생성자에는 먼저 목록 항목의 캡션과 값(HTML value 특성)이 필요합니다.
<%@ WebService Language="VB" Class="CascadingDropDown3" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
<ScriptService()> _
Public Class CascadingDropDown3
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
Dim l As New List(Of 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()
End Function
End Class
브라우저에서 페이지를 로드하면 드롭다운 목록에 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>
이렇게 하면 목록에 실제로 요소가 있고 사용자가 항목을 선택하는 경우에만 포스트백이 실행됩니다.
목록 요소를 선택하면 포스트백이 발생합니다(전체 크기 이미지를 보려면 클릭).
