동적으로 컨트롤 채우기(C#)Dynamically Populating a Control (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.

개요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. 이 자습서에서는이를 설정 하는 방법을 보여 줍니다.This tutorial shows how to set this up.

단계Steps

먼저 DynamicPopulate에 의해 호출 되는 메서드를 구현 하는 ASP.NET 웹 서비스가 필요 합니다.First of all, you need an ASP.NET Web Service which implements the method to be called by DynamicPopulate. 웹 서비스 클래스에는 Microsoft.Web.Script.Services내에 정의 된 ScriptService 특성이 필요 합니다. 그렇지 않으면 ASP.NET AJAX는 웹 서비스에 대 한 클라이언트 쪽 JavaScript 프록시를 만들 수 없으며,이 프록시는 DynamicPopulate에 필요 합니다.The web service class requires the ScriptService attribute which is defined within Microsoft.Web.Script.Services; otherwise ASP.NET AJAX cannot create the client-side JavaScript proxy for the web service which in turn is required by DynamicPopulate.

DynamicPopulate 컨트롤은 각 웹 서비스 호출을 사용 하 여 하나의 컨텍스트 정보를 보내기 때문에 웹 메서드는 contextKey라는 문자열 형식의 인수를 하나 이상 사용 해야 합니다.The web method must expect one argument of type string, called contextKey, since the DynamicPopulate control sends one piece of context information with each web service call. 다음 웹 서비스는 contextKey 인수로 표시 되는 형식으로 현재 날짜를 반환 합니다.The following web service returns the current date in a format represented by the contextKey argument:

<%@ 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;
 }
}

그런 다음 웹 서비스는 DynamicPopulate.cs.asmx로 저장 됩니다.The web service is then saved as DynamicPopulate.cs.asmx. 또는 DynamicPopulate 컨트롤을 사용 하 여 실제 ASP.NET 페이지 내에서 getDate() 메서드를 페이지 메서드로 구현할 수 있습니다.Alternatively, you could implement the getDate() method as a page method within the actual ASP.NET page with the DynamicPopulate control.

다음 단계에서 새 ASP.NET 파일을 만듭니다.In the next step, create a new ASP.NET file. 항상 첫 번째 단계는 현재 페이지에 ScriptManager를 포함 하 여 ASP.NET AJAX 라이브러리를 로드 하 고 컨트롤 도구 키트의 작업을 수행 하는 것입니다.As always, the first step is to include the ScriptManager in the current page to load the ASP.NET AJAX library and to make the Control Toolkit work:

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

그런 다음 나중에 웹 서비스 호출의 결과를 표시 하는 동일한 이름의 HTML 컨트롤이 나 > 웹 컨트롤 /asp:Label<을 사용 하 여 레이블 컨트롤을 추가 합니다.Then, add a label control (for instance using the HTML control of the same name, or the <asp:Label /> web control) which will later show the result of the web service call.

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

HTML 단추 (서버에 대 한 포스트백을 요구 하지 않으므로 HTML 컨트롤)는 동적 채우기를 트리거하는 데 사용 됩니다.An HTML button (as an HTML control, since we do not require a postback to the server) will then be used to trigger the dynamic population:

<input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />

마지막으로, 항목을 연결 하는 DynamicPopulateExtender 컨트롤이 필요 합니다.Finally, we need the DynamicPopulateExtender control to wire things up. 다음 특성이 설정 됩니다 (분명 한 것은 ID, runat="server").The following attributes will be set (apart from the obvious ones, ID and runat="server"):

  • 웹 서비스 호출에서 결과를 넣을 위치를 TargetControlID 합니다.TargetControlID where to put the result from the web service call
  • 웹 서비스의 ServicePath 경로 (페이지 메서드를 사용 하려는 경우 생략)ServicePath path to the web service (omit if you want to use a page method)
  • 웹 메서드 또는 페이지 메서드의 ServiceMethod 이름ServiceMethod name of the web method or page method
  • 웹 서비스로 보낼 컨텍스트 정보를 ContextKey 합니다.ContextKey context information to be sent to the web service
  • 웹 서비스 호출을 트리거하는 PopulateTriggerControlID 요소PopulateTriggerControlID element which triggers the web service call
  • 웹 서비스 호출 중에 대상 요소를 비울 지 여부를 ClearContentsDuringUpdate 합니다.ClearContentsDuringUpdate whether to empty the target element during the web service call

여기에서 볼 수 있듯이, 컨트롤에는 일부 정보가 필요 하지만 모든 항목을 제자리에 배치 하는 것은 매우 간단 합니다.As you can see, the control requires some information but putting everything into place is quite straight-forward. 현재 시나리오의 DynamicPopulateExtender 컨트롤에 대 한 태그는 다음과 같습니다.Here is the markup for the DynamicPopulateExtender control in the current scenario:

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
 ClearContentsDuringUpdate="true"
 TargetControlID="myDate" ServicePath="DynamicPopulate.cs.asmx"
 ServiceMethod="getDate"
 ContextKey="format1" PopulateTriggerControlID="Button1" />

브라우저에서 ASP.NET 페이지를 실행 하 고 단추를 클릭 합니다. 월-일-연도 형식으로 현재 날짜를 받게 됩니다.Run the ASP.NET page in the browser and click on the button; you will receive the current date in month-day-year format.

단추를 클릭 하면 서버에서 날짜가 검색 됩니다.A click on the button retrieves the date from the server

단추를 클릭 하면 서버에서 날짜가 검색 됩니다 (전체 크기 이미지를 보려면 클릭).A click on the button retrieves the date from the server (Click to view full-size image)