사용자 정의 컨트롤 및 JavaScript에 DynamicPopulate 사용(C#)Using DynamicPopulate with a User Control And JavaScript (C#)

Christian Wenzby Christian Wenz

코드 다운로드 또는 PDF 다운로드Download Code or Download PDF

ASP.NET AJAX 컨트롤 도구 키트의 DynamicPopulate 컨트롤은 웹 서비스 (또는 페이지 메서드)를 호출 하 고 페이지를 새로 고치지 않고 결과 값을 페이지의 대상 컨트롤로 채웁니다.The DynamicPopulate control in the ASP.NET AJAX Control Toolkit calls a web service (or page method) and fills the resulting value into a target control on the page, without a page refresh. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용 하 여 채우기를 트리거할 수도 있습니다.It is also possible to trigger the population using custom client-side JavaScript code. 그러나 extender가 사용자 정의 컨트롤에 있는 경우 특별 한 주의를 기울여야 합니다.However special care has to be taken when the extender resides in a user control.

개요Overview

ASP.NET AJAX 컨트롤 도구 키트의 DynamicPopulate 컨트롤은 웹 서비스 (또는 페이지 메서드)를 호출 하 고 페이지를 새로 고치지 않고 결과 값을 페이지의 대상 컨트롤로 채웁니다.The DynamicPopulate control in the ASP.NET AJAX Control Toolkit calls a web service (or page method) and fills the resulting value into a target control on the page, without a page refresh. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용 하 여 채우기를 트리거할 수도 있습니다.It is also possible to trigger the population using custom client-side JavaScript code. 그러나 extender가 사용자 정의 컨트롤에 있는 경우 특별 한 주의를 기울여야 합니다.However special care has to be taken when the extender resides in a user control.

단계Steps

먼저 DynamicPopulateExtender 컨트롤에 의해 호출 되는 메서드를 구현 하는 ASP.NET 웹 서비스가 필요 합니다.First of all, you need an ASP.NET Web Service which implements the method to be called by the DynamicPopulateExtender control. DynamicPopulate 컨트롤이 각 웹 서비스 호출을 사용 하 여 하나의 컨텍스트 정보를 보내기 때문에 웹 서비스는 contextKey라는 문자열 형식의 인수 하나를 예상 하는 getDate() 메서드를 구현 합니다.The web service implements the method getDate() that expects one argument of type string, called contextKey, since the DynamicPopulate control sends one piece of context information with each web service call. 다음은 세 가지 형식 중 하나로 현재 날짜를 검색 하는 코드 (파일 DynamicPopulate.cs.asmx)입니다.Here is the code (file DynamicPopulate.cs.asmx) which retrieves the current date in one of three formats:

<%@ 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 파일)을 만듭니다.In the next step, create a new user control (.ascx file), denoted by the following declaration in its first line:

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

<label> 요소는 서버에서 들어오는 데이터를 표시 하는 데 사용 됩니다.A <label> element will be used to display the data coming from the server.

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

또한 사용자 정의 컨트롤 파일에는 웹 서비스에서 지 원하는 세 가지 날짜 형식 중 하나를 나타내는 세 개의 라디오 단추가 사용 됩니다.Also in the user control file, we will use three radio buttons, each one representing one of the three possible date formats supported by the web service. 사용자가 라디오 단추 중 하나를 클릭 하면 브라우저에서 다음과 같은 JavaScript 코드를 실행 합니다.When the user clicks on one of the radio buttons, the browser will execute JavaScript code which looks like this:

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

이 코드는 DynamicPopulateExtender에 액세스 합니다 (이상한 ID에 대해서는 걱정할 필요가 없으며,이 내용은 나중에 설명 됨), 데이터를 사용 하 여 동적 채우기를 트리거합니다.This code accesses the DynamicPopulateExtender (do not worry about the strange ID yet, this will be covered later on) and triggers the dynamic population with data. 현재 라디오 단추의 컨텍스트에서 this.valueformat1, format2 또는 format3 웹 메서드에 필요한 것과 같은 값을 나타냅니다.In the context of the current radio button, this.value refers to its value which is format1, format2 or format3 exactly what the web method expects.

사용자 정의 컨트롤에서 아직 누락 된 것은 웹 서비스에 라디오 단추를 연결 하는 DynamicPopulateExtender 컨트롤입니다.The only thing missing in the user control yet is the DynamicPopulateExtender control which links the radio buttons to the web service.

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

이 경우에도 컨트롤에서 사용 되는 이상한 ID를 myDate대신 mcd1$myDate 합니다.Again you may note the strange ID used in the control: mcd1$myDate instead of myDate. 이전에는 JavaScript 코드를 사용 하 여 dpe1대신 DynamicPopulateExtender에 액세스 mcd1_dpe1 했습니다. 이 명명 전략은 사용자 정의 컨트롤 내에서 DynamicPopulateExtender를 사용할 때 특별 한 요구 사항입니다.Previously, the JavaScript code used mcd1_dpe1 to access the DynamicPopulateExtender instead of dpe1.This naming strategy is a special requirement when using DynamicPopulateExtender within a user control. 또한 모든 작업을 수행 하기 위해 특정 방법으로 사용자 정의 컨트롤을 포함 해야 합니다.Furthermore, you have to embed the user control in a specific way to make it all work. 새 ASP.NET 페이지를 만들고 방금 구현한 사용자 정의 컨트롤에 대 한 태그 접두사를 등록 합니다.Create a new ASP.NET page and register a tag prefix for the user control you have just implemented:

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

그런 다음 새 페이지에 ASP.NET AJAX ScriptManager 컨트롤을 포함 합니다.Then, include the ASP.NET AJAX ScriptManager control on the new page:

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

마지막으로 페이지에 사용자 정의 컨트롤을 추가 합니다.Finally, add the user control to the page. ID 특성 (및 runat="server")만 설정 해야 하지만,이를 특정 이름으로 설정 해야 합니다 .이는 JavaScript를 사용 하 여 액세스 하기 위해 사용자 정의 컨트롤 내에서 사용 되는 접두사 이므로 mcd1.You only have to set its ID attribute (and runat="server", of course), but you also have to set it to a specific name: mcd1 since this is the prefix used within the user control to access it using JavaScript.

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

이것으로 끝입니다!And that's it! 페이지가 예상 대로 동작 합니다. 사용자가 라디오 단추 중 하나를 클릭 하면 도구 키트의 컨트롤이 웹 서비스를 호출 하 고 원하는 형식으로 현재 날짜를 표시 합니다.The page behaves as expected: A user clicks on one of the radio buttons, the control in the Toolkit calls the web service and displays the current date in the desired format.

사용자 정의 컨트롤에 있는 라디오 단추 The radio buttons reside in a user control

라디오 단추는 사용자 정의 컨트롤에 있습니다 (전체 크기 이미지를 보려면 클릭).The radio buttons reside in a user control (Click to view full-size image)