ASP.NET AJAX 컨트롤 도구 키트의 DynamicPopulate 컨트롤은 웹 서비스(또는 페이지 메서드)를 호출하고 결과 값을 페이지 새로 고침 없이 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 모집단을 트리거할 수도 있습니다. 그러나 extender가 사용자 컨트롤에 있을 때는 특별한 주의를 기울여야 합니다.
개요
ASP.NET AJAX 컨트롤 도구 키트의 컨트롤은 DynamicPopulate 웹 서비스(또는 페이지 메서드)를 호출하고 페이지 새로 고침 없이 결과 값을 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 모집단을 트리거할 수도 있습니다. 그러나 extender가 사용자 컨트롤에 있을 때는 특별한 주의를 기울여야 합니다.
단계
우선 컨트롤에서 호출 DynamicPopulateExtender 할 메서드를 구현하는 ASP.NET 웹 서비스가 필요합니다. 웹 서비스는 컨트롤이 각 웹 서비스 호출을 통해 컨텍스트 정보를 한 조각 보내기 때문에 DynamicPopulate 라는 contextKey형식 문자열의 인수를 예상하는 메서드 getDate() 를 구현합니다. 다음은 세 가지 형식 중 하나로 현재 날짜를 검색하는 코드(파일 DynamicPopulate.cs.asmx)입니다.
<%@ WebService Language="C#" Class="DynamicPopulate" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[ScriptService]
public class DynamicPopulate : System.Web.Services.WebService
{
[WebMethod]
public string getDate(string contextKey)
{
string myDate = "";
switch (contextKey)
{
case "format1":
myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now);
break;
case "format2":
myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now);
break;
case "format3":
myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now);
break;
}
return myDate;
}
}
다음 단계에서는 첫 번째 줄에서 다음 선언으로 표시된 새 사용자 컨트롤(.ascx 파일)을 만듭니다.
<%@ Control Language="C#" ClassName="DynamicPopulate2" %>
<
label
> 요소는 서버에서 들어오는 데이터를 표시하는 데 사용됩니다.
<label id="myDate" runat="server" />
또한 사용자 제어 파일에서는 웹 서비스에서 지원하는 세 가지 가능한 날짜 형식 중 하나를 나타내는 세 개의 라디오 단추를 사용합니다. 사용자가 라디오 단추 중 하나를 클릭하면 브라우저는 다음과 같은 JavaScript 코드를 실행합니다.
$find("mcd1_dpe1").populate(this.value)
이 코드는 DynamicPopulateExtender 에 액세스하고(아직 이상한 ID에 대해 걱정하지 마세요. 나중에 다룰 예정임) 데이터를 사용하여 동적 채우기를 트리거합니다. 현재 라디오 단추의 컨텍스트에서 는 this.value , format2 또는 format3 웹 메서드에 필요한 값을 정확히 나타냅니다format1.
아직 사용자 컨트롤에서 누락된 유일한 것은 라디오 단추를 웹 서비스에 연결하는 컨트롤입니다 DynamicPopulateExtender .
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="mcd1$myDate"
ServicePath="DynamicPopulate.cs.asmx" ServiceMethod="getDate"/>
다시 컨트롤에 사용된 이상한 ID를 mcd1$myDate 확인할 수 있습니다. 대신 myDate. 이전에는 대신 에 액세스 DynamicPopulateExtender 하는 데 사용된 mcd1_dpe1 JavaScript 코드입니다dpe1. 이 명명 전략은 사용자 컨트롤 내에서 를 사용할 DynamicPopulateExtender 때 특별한 요구 사항입니다. 또한 모든 작업을 수행하려면 특정 방식으로 사용자 컨트롤을 포함해야 합니다. 새 ASP.NET 페이지를 만들고 방금 구현한 사용자 컨트롤에 대한 태그 접두사를 등록합니다.
<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.cs.ascx"%>
그런 다음, 새 페이지에 ASP.NET AJAX ScriptManager 컨트롤을 포함합니다.
<asp:ScriptManager ID="asm" runat="server" />
마지막으로 사용자 컨트롤을 페이지에 추가합니다. 물론 특성 ID (및 runat="server")만 설정하면 되지만 JavaScript를 사용하여 액세스하기 위해 사용자 컨트롤 내에서 사용되는 접두사이므로 특정 이름으로 mcd1 설정해야 합니다.
<div>
<uc1:myCustomDate ID="mcd1" runat="server" />
</div>
정말 간단하죠! 페이지는 예상대로 동작합니다. 사용자가 라디오 단추 중 하나를 클릭하면 도구 키트의 컨트롤이 웹 서비스를 호출하고 현재 날짜를 원하는 형식으로 표시합니다.
라디오 단추가 사용자 컨트롤에 있습니다(전체 크기 이미지를 보려면 클릭).
