ASP.NET AJAX 컨트롤 도구 키트의 DynamicPopulate 컨트롤은 웹 서비스(또는 페이지 메서드)를 호출하고 결과 값을 페이지 새로 고침 없이 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 모집단을 트리거할 수도 있습니다. 그러나 extender가 사용자 컨트롤에 있을 때는 특별한 주의를 기울여야 합니다.
개요
ASP.NET AJAX 컨트롤 도구 키트의 컨트롤은 DynamicPopulate 웹 서비스(또는 페이지 메서드)를 호출하고 결과 값을 페이지 새로 고침 없이 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 모집단을 트리거할 수도 있습니다. 그러나 extender가 사용자 컨트롤에 있을 때는 특별한 주의를 기울여야 합니다.
단계
우선 컨트롤에서 호출할 메서드를 구현하는 ASP.NET Web Service가 DynamicPopulateExtender 필요합니다. 웹 서비스는 컨트롤이 각 웹 서비스 호출을 통해 컨텍스트 정보를 한 조각 보내기 때문에 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
다음 단계에서 첫 번째 줄에서 다음 선언으로 표시된 새 사용자 컨트롤(.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"/>
컨트롤에 사용된 이상한 ID를 mcd1$myDate 다시 확인할 수 있습니다. 대신 입니다 myDate. 이전에는 대신 에 액세스 DynamicPopulateExtenderdpe1하는 데 사용된 mcd1_dpe1 JavaScript 코드입니다. 이 명명 전략은 사용자 컨트롤 내에서 를 사용할 DynamicPopulateExtender 때 특별한 요구 사항입니다. 또한 모든 작업을 수행하려면 특정 방식으로 사용자 컨트롤을 포함해야 합니다. 새 ASP.NET 페이지를 만들고 방금 구현한 사용자 컨트롤에 대한 태그 접두사를 등록합니다.
<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.vb.ascx"%>
그런 다음 새 페이지에 ASP.NET AJAX ScriptManager 컨트롤을 포함합니다.
<asp:ScriptManager ID="asm" runat="server" />
마지막으로 사용자 컨트롤을 페이지에 추가합니다. 특성(및 runat="server")만 설정 ID 해야 하지만 JavaScript를 사용하여 액세스하기 위해 사용자 컨트롤 내에서 사용되는 접두사이므로 특정 이름으로 mcd1 설정해야 합니다.
<div>
<uc1:myCustomDate ID="mcd1" runat="server" />
</div>
정말 간단하죠! 페이지는 예상대로 동작합니다. 사용자가 라디오 단추 중 하나를 클릭하면 도구 키트의 컨트롤이 웹 서비스를 호출하고 현재 날짜를 원하는 형식으로 표시합니다.
라디오 단추는 사용자 컨트롤에 있습니다(전체 크기 이미지를 보려면 클릭).
