사용자 컨트롤 및 JavaScript(VB)와 함께 DynamicPopulate 사용

작성자 : Christian Wenz

PDF 다운로드

ASP.NET AJAX 컨트롤 도구 키트의 DynamicPopulate 컨트롤은 웹 서비스(또는 페이지 메서드)를 호출하고 결과 값을 페이지 새로 고침 없이 페이지의 대상 컨트롤에 채웁니다. 사용자 정의 클라이언트 측 JavaScript 코드를 사용하여 데이터를 채우는 작업을 트리거할 수도 있습니다. 그러나 extender가 사용자 컨트롤에 있을 때는 특별히 주의해야 합니다.

개요

ASP.NET AJAX 컨트롤 도구 키트의 컨트롤은 DynamicPopulate 웹 서비스(또는 페이지 메서드)를 호출하고 결과 값을 페이지 새로 고침 없이 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 측 JavaScript 코드를 활용하여 데이터 채우기를 트리거할 수도 있습니다. 그러나 extender가 사용자 컨트롤에 있을 때는 특별히 주의해야 합니다.

단계

우선 컨트롤에서 호출 DynamicPopulateExtender 할 메서드를 구현하는 ASP.NET 웹 서비스가 필요합니다. 웹 서비스는 컨트롤이 각 웹 서비스 호출과 함께 컨텍스트 정보의 한 부분을 보내기 때문에 getDate() 문자열 contextKey형식의 인수 하나를 예상하는 메서드 DynamicPopulate 를 구현합니다. 다음은 세 가지 형식 중 하나로 현재 날짜를 검색하는 코드(파일 DynamicPopulate.vb.asmx)입니다.

<%@ WebService Language="VB" Class="DynamicPopulate" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
<ScriptService()> _
Public Class DynamicPopulate
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Public Function getDate(ByVal contextKey As String) As String
 Dim myDate As String = ""
 Select Case contextKey
 Case "format1"
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now)
 Case "format2"
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now)
 Case "format3"
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now)
 End Select
 Return myDate
 End Function
End Class

다음 단계에서 첫 번째 줄에서 다음 선언으로 표시된 새 사용자 컨트롤(.ascx 파일)을 만듭니다.

<%@ Control Language="C#" ClassName="DynamicPopulate2" %>

< label > 요소는 서버에서 들어오는 데이터를 표시하는 데 사용됩니다.

<label id="myDate" runat="server" />

또한 사용자 제어 파일에서는 웹 서비스에서 지원하는 세 가지 가능한 날짜 형식 중 하나를 나타내는 세 개의 라디오 단추를 사용합니다. 사용자가 라디오 단추 중 하나를 클릭하면 브라우저에서 다음과 같은 JavaScript 코드를 실행합니다.

$find("mcd1_dpe1").populate(this.value)

이 코드는 DynamicPopulateExtender (아직 이상한 ID에 대해 걱정하지 마세요, 나중에 다룰 예정)에 액세스하고 데이터를 사용하여 동적 채우기를 트리거합니다. 현재 라디오 버튼의 컨텍스트에서, this.value는 웹 메서드가 예상하는 값인 format1, format2 또는 format3를 가리킵니다.

아직 사용자 컨트롤 DynamicPopulateExtender 에서 누락된 유일한 것은 라디오 단추를 웹 서비스에 연결하는 컨트롤입니다.

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
 ClearContentsDuringUpdate="true"
 TargetControlID="mcd1$myDate"
 ServicePath="DynamicPopulate.vb.asmx" ServiceMethod="getDate"/>

다시 myDate 대신 mcd1$myDate를 사용하는 컨트롤의 이상한 ID에 주목할 수 있습니다. JavaScript 코드는 이전에 mcd1_dpe1을(를) 사용하여 DynamicPopulateExtender 대신 dpe1에 액세스했습니다. 이 명명 전략은 사용자 컨트롤 내에서 DynamicPopulateExtender을(를) 사용할 때의 특별한 요구 사항입니다. 또한 모든 작업을 수행할 수 있도록 사용자 컨트롤을 특정 방식으로 포함해야 합니다. 새 ASP.NET 페이지를 만들고 방금 구현한 사용자 컨트롤에 대한 태그 접두사를 등록합니다.

<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.vb.ascx"%>

그런 다음 새 페이지에 ASP.NET AJAX ScriptManager 컨트롤을 포함합니다.

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

마지막으로 페이지에 사용자 컨트롤을 추가합니다. 특성 ID와 runat="server"만 설정하면 되지만, 특정 이름인 mcd1로 설정해야 합니다. 이는 사용자 컨트롤 내에서 JavaScript로 액세스하기 위해 사용되는 접두사입니다.

<div>
 <uc1:myCustomDate ID="mcd1" runat="server" />
</div>

정말 간단하죠! 페이지는 예상대로 동작합니다. 사용자가 라디오 단추 중 하나를 클릭하면 도구 키트의 컨트롤이 웹 서비스를 호출하고 현재 날짜를 원하는 형식으로 표시합니다.

라디오 단추는 사용자 컨트롤에 있습니다(전체 크기 이미지를 보려면 클릭).