JavaScript 코드를 사용하여 동적으로 컨트롤 채우기(VB)

작성자: Christian Wenz

PDF 다운로드

ASP.NET AJAX 컨트롤 도구 키트의 DynamicPopulate 컨트롤은 웹 서비스(또는 페이지 메서드)를 호출하고 결과 값을 페이지 새로 고침 없이 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 모집단을 트리거할 수도 있습니다.

개요

ASP.NET AJAX 컨트롤 도구 키트의 컨트롤은 DynamicPopulate 웹 서비스(또는 페이지 메서드)를 호출하고 페이지 새로 고침 없이 결과 값을 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 모집단을 트리거할 수도 있습니다.

단계

우선 컨트롤에서 호출 DynamicPopulateExtender 할 메서드를 구현하는 ASP.NET 웹 서비스가 필요합니다. 웹 서비스는 컨트롤이 각 웹 서비스 호출을 통해 컨텍스트 정보를 한 조각 보내기 때문에 DynamicPopulate 라는 contextKey형식 문자열의 인수를 예상하는 메서드 getDate() 를 구현합니다. 다음은 세 가지 형식 중 하나로 현재 날짜를 검색하는 코드(파일 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

다음 단계에서는 새 ASP.NET 사이트를 만들고 ASP.NET AJAX ScriptManager 컨트롤로 시작합니다.

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

그런 다음 나중에 웹 서비스 호출의 결과를 표시하는 레이블 컨트롤(동일한 이름의 HTML 컨트롤 또는 <asp:Label /> 웹 컨트롤을 사용하는 instance)을 추가합니다.

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

다음으로, 컨트롤을 DynamicPopulateExtender 포함하고 웹 서비스 정보, 대상 컨트롤을 제공하지만 나중에 사용자 지정 JavaScript를 사용하여 채우기를 트리거하는 컨트롤의 이름은 제공하지 않습니다.

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

이제 JavaScript 부분으로 이동합니다. ASP.NET AJAX 라이브러리에서 정의한 함수는 $find() 와 같은 ASP.NET AJAX 컨트롤 도구 키트의 서버 쪽 개체에 대한 참조를 DynamicPopulateExtender반환합니다. 현재 파일 $find("dpe") 에서 는 페이지의 컨트롤 하나에 DynamicPopulateExtender 대한 참조를 반환합니다. 동적 채우기 프로세스를 트리거하는 라는 populate() 메서드를 노출합니다. 메서드에는 populate() 웹 메서드에 대한 인수로 사용할 컨텍스트 키라는 하나의 인수가 getDate() 필요합니다. 따라서 instance $find("dpe").populate("format1") 경우 는 레이블을 현재 날짜로 월-일-연도 형식으로 채웁습니다.

샘플을 좀 더 유연하게 만들기 위해 사용자는 이제 여러 날짜 형식 중에서 선택할 수 있습니다. 각각에 대해 라디오 단추가 표시됩니다. 사용자가 라디오 단추를 클릭하면 JavaScript 코드가 레이블을 선택한 날짜 형식으로 동적으로 채웁니다. 이러한 라디오 단추는 다음과 같습니다.

<asp:Panel ID="panel1" runat="server">
 <input type="radio" id="rb1" name="format" value="format1" runat="server"
 onclick="$find('dpe1').populate(this.value);" />m-d-y
 <input type="radio" id="rb2" name="format" value="format2" runat="server"
 onclick="$find('dpe1').populate(this.value);" />d.m.y
 <input type="radio" id="rb3" name="format" value="format3" runat="server"
 onclick="$find('dpe1').populate(this.value);" />y/m/d
</asp:Panel>

라디오 단추의 컨텍스트 내에서 JavaScript 식 this.value 은 현재 단추의 값을 참조하며, 이는 메서드가 사용할 수 있는 것과 정확히 동일한 정보 getDate() 입니다.

단추를 클릭하면 지정된 형식으로 서버에서 날짜를 검색합니다(전체 크기 이미지를 보려면 클릭).

이전다음