ASP.NET AJAX 컨트롤 도구 키트의 DynamicPopulate 컨트롤은 웹 서비스(또는 페이지 메서드)를 호출하고 결과 값을 페이지 새로 고침 없이 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 모집단을 트리거할 수도 있습니다.
개요
ASP.NET AJAX 컨트롤 도구 키트의 컨트롤은 DynamicPopulate 웹 서비스(또는 페이지 메서드)를 호출하고 결과 값을 페이지 새로 고침 없이 페이지의 대상 컨트롤에 채웁니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 모집단을 트리거할 수도 있습니다.
단계
우선 컨트롤에서 호출할 메서드를 구현하는 ASP.NET Web Service가 DynamicPopulateExtender 필요합니다. 웹 서비스는 컨트롤이 각 웹 서비스 호출을 통해 컨텍스트 정보를 한 조각 보내기 때문에 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;
}
}
다음 단계에서는 새 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.cs.asmx"
ServiceMethod="getDate" />
이제 JavaScript 부분으로. ASP.NET AJAX 라이브러리에 의해 정의된 함수는 $find() 와 같은 DynamicPopulateExtenderASP.NET AJAX 컨트롤 도구 키트의 서버 쪽 개체에 대한 참조를 반환합니다. 현재 파일 $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() 정확히 동일합니다.
단추를 클릭하면 지정된 형식으로 서버에서 날짜를 검색합니다(전체 크기 이미지를 보려면 클릭).
