사용자 지정 AJAX 컨트롤 도구 키트 컨트롤 Extender 만들기(VB)Creating a Custom AJAX Control Toolkit Control Extender (VB)

Microsoft 에서by Microsoft

사용자 지정 Extender를 사용 하면 새 클래스를 만들지 않고도 ASP.NET 컨트롤의 기능을 사용자 지정 하 고 확장할 수 있습니다.Custom Extenders enable you to customize and extend the capabilities of ASP.NET controls without having to create new classes.

이 자습서에서는 사용자 지정 AJAX 컨트롤 도구 키트 컨트롤 extender를 만드는 방법에 대해 알아봅니다.In this tutorial, you learn how to create a custom AJAX Control Toolkit control extender. 텍스트 상자에 텍스트를 입력 하는 경우 단추의 상태를 사용 안 함에서 사용으로 변경 하는 간단 하 고 유용한 새 extender를 만듭니다.We create a simple, but useful, new extender that changes the state of a Button from disabled to enabled when you type text into a TextBox. 이 자습서를 읽은 후에는 사용자 고유의 컨트롤 extender로 ASP.NET AJAX Toolkit를 확장할 수 있습니다.After reading this tutorial, you will be able to extend the ASP.NET AJAX Toolkit with your own control extenders.

Visual Studio 또는 Visual Web Developer를 사용 하 여 사용자 지정 컨트롤 extender를 만들 수 있습니다 (최신 버전의 Visual Web Developer가 있는지 확인).You can create custom control extenders using either Visual Studio or Visual Web Developer (make sure that you have the latest version of Visual Web Developer).

DisabledButton Extender의 개요Overview of the DisabledButton Extender

새 컨트롤 extender의 이름은 DisabledButton extender로 지정 됩니다.Our new control extender is named the DisabledButton extender. 이 extender에는 다음과 같은 세 가지 속성이 있습니다.This extender will have three properties:

  • TargetControlID-컨트롤이 확장 하는 텍스트 상자입니다.TargetControlID - The TextBox that the control extends.
  • TargetButtonIID-사용 하지 않거나 사용 하도록 설정 된 단추입니다.TargetButtonIID - The Button that is disabled or enabled.
  • DisabledText-처음에 단추에 표시 되는 텍스트입니다.DisabledText - The text that is initially displayed in the Button. 입력을 시작 하면 단추 텍스트 속성의 값이 표시 됩니다.When you start typing, the Button displays the value of the Button Text property.

DisabledButton extender를 TextBox 및 Button 컨트롤에 후크 합니다.You hook the DisabledButton extender to a TextBox and Button control. 텍스트를 입력 하기 전에 단추가 비활성화 되 고 텍스트 상자와 단추가 다음과 같이 표시 됩니다.Before you type any text, the Button is disabled and the TextBox and Button look like this:

(전체 크기 이미지를 보려면 클릭)(Click to view full-size image)

텍스트 입력을 시작한 후 단추가 활성화 되 고 텍스트 상자와 단추가 다음과 같이 표시 됩니다.After you start typing text, the Button is enabled and the TextBox and Button look like this:

(전체 크기 이미지를 보려면 클릭)(Click to view full-size image)

컨트롤 extender를 만들려면 다음 세 개의 파일을 만들어야 합니다.To create our control extender, we need to create the following three files:

  • DisabledButtonExtender-이 파일은 extender 만들기를 관리 하 고 디자인 타임에 속성을 설정 하는 데 사용할 수 있는 서버측 컨트롤 클래스입니다.DisabledButtonExtender.vb - This file is the server-side control class that will manage creating your extender and allow you to set the properties at design-time. 또한 extender에서 설정할 수 있는 속성을 정의 합니다.It also defines the properties that can be set on your extender. 이러한 속성은 코드와 디자인 타임에 액세스할 수 있으며 DisableButtonBehavior.js 파일에 정의 된 속성과 일치 합니다.These properties are accessible via code and at design time and match properties defined in the DisableButtonBehavior.js file.
  • DisabledButtonBehavior.js--이 파일을 통해 모든 클라이언트 스크립트 논리를 추가할 수 있습니다.DisabledButtonBehavior.js -- This file is where you will add all of your client script logic.
  • DisabledButtonDesigner-이 클래스는 디자인 타임 기능을 사용 하도록 설정 합니다.DisabledButtonDesigner.vb - This class enables design-time functionality. Visual Studio/Visual Web Developer Designer에서 컨트롤 extender가 제대로 작동 하도록 하려면이 클래스가 필요 합니다.You need this class if you want the control extender to work correctly with the Visual Studio/Visual Web Developer Designer.

따라서 컨트롤 extender는 서버측 컨트롤, 클라이언트 쪽 동작 및 서버 쪽 디자이너 클래스로 구성 됩니다.So a control extender consists of a server-side control, a client-side behavior, and a server-side designer class. 다음 섹션에서 이러한 세 파일을 모두 만드는 방법을 알아봅니다.You learn how to create all three of these files in the following sections.

사용자 지정 Extender 웹 사이트 및 프로젝트 만들기Creating the Custom Extender Website and Project

첫 번째 단계는 Visual Studio/Visual Web Developer에서 클래스 라이브러리 프로젝트 및 웹 사이트를 만드는 것입니다.The first step is to create a class library project and website in Visual Studio/Visual Web Developer. 클래스 라이브러리 프로젝트에서 사용자 지정 extender를 만들고 웹 사이트에서 사용자 지정 extender를 테스트 합니다.We'll create the custom extender in the class library project and test the custom extender in the website.

웹 사이트부터 시작 해 보겠습니다.Let's start with the website. 웹 사이트를 만들려면 다음 단계를 따르세요.Follow these steps to create the website:

  1. 메뉴 옵션 파일, 새 웹 사이트를선택 합니다.Select the menu option File, New Web Site.
  2. ASP.NET 웹 사이트 템플릿을 선택 합니다.Select the ASP.NET Web Site template.
  3. 새 웹 사이트의 이름을 Website1로 합니다.Name the new website Website1.
  4. 확인 단추를 클릭합니다.Click the OK button.

다음으로, 컨트롤 extender에 대 한 코드를 포함 하는 클래스 라이브러리 프로젝트를 만들어야 합니다.Next, we need to create the class library project that will contain the code for the control extender:

  1. 메뉴 옵션 파일, 추가, 새 프로젝트를 선택 합니다.Select the menu option File, Add, New Project.
  2. 클래스 라이브러리 템플릿을 선택 합니다.Select the Class Library template.
  3. 이름이 Customextenders인 새 클래스 라이브러리의 이름을로 바꿉니다.Name the new class library with the name CustomExtenders.
  4. 확인 단추를 클릭합니다.Click the OK button.

이러한 단계를 완료 한 후 솔루션 탐색기 창은 그림 1과 같습니다.After you complete these steps, your Solution Explorer window should look like Figure 1.

웹 사이트 및 클래스 라이브러리 프로젝트를 사용 하는 솔루션Solution with website and class library project

그림 01: 웹 사이트 및 클래스 라이브러리 프로젝트를 사용 하는 솔루션 (전체 크기 이미지를 보려면 클릭)Figure 01: Solution with website and class library project(Click to view full-size image)

다음으로 클래스 라이브러리 프로젝트에 필요한 모든 어셈블리 참조를 추가 해야 합니다.Next, you need to add all of the necessary assembly references to the class library project:

  1. CustomExtenders 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 메뉴 옵션 참조 추가를 선택 합니다.Right-click the CustomExtenders project and select the menu option Add Reference.

  2. .NET 탭을 선택합니다.Select the .NET tab.

  3. 다음 어셈블리에 대한 참조를 추가합니다.Add references to the following assemblies:

    1. System.Web.dllSystem.Web.dll
    2. System.Web.Extensions.dllSystem.Web.Extensions.dll
    3. System.Design.dllSystem.Design.dll
    4. System.Web.Extensions.Design.dllSystem.Web.Extensions.Design.dll
  4. 찾아보기 탭을 선택합니다.Select the Browse tab.

  5. AjaxControlToolkit.dll 어셈블리에 대 한 참조를 추가 합니다.Add a reference to the AjaxControlToolkit.dll assembly. 이 어셈블리는 AJAX 컨트롤 도구 키트를 다운로드 한 폴더에 있습니다.This assembly is located in the folder where you downloaded the AJAX Control Toolkit.

프로젝트를 마우스 오른쪽 단추로 클릭 하 고 속성을 선택한 다음 참조 탭을 클릭 하 여 모든 오른쪽 참조를 추가 했는지 확인할 수 있습니다 (그림 2 참조).You can verify that you have added all of the right references by right-clicking your project, selecting Properties, and clicking the References tab (see Figure 2).

필요한 참조가 있는 폴더 참조References folder with required references

그림 02: 필요한 참조가 있는 폴더 참조 (전체 크기 이미지를 보려면 클릭)Figure 02: References folder with required references(Click to view full-size image)

사용자 지정 컨트롤 Extender 만들기Creating the Custom Control Extender

이제 클래스 라이브러리를 만들었으므로 extender 컨트롤 빌드를 시작할 수 있습니다.Now that we have our class library, we can start building our extender control. 사용자 지정 extender 컨트롤 클래스의 완전 한 뼈부터 살펴보겠습니다 (목록 1 참조).Let's start with the bare bones of a custom extender control class (see Listing 1).

목록 1-MyCustomExtender .vbListing 1 - MyCustomExtender.vb

Imports AjaxControlToolkit
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls

<Assembly: System.Web.UI.WebResource("CustomExtenders.MyControlBehavior.js", "text/javascript")> 

<ClientScriptResource("CustomExtenders.MyControlBehavior", "CustomExtenders.MyControlBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class MyControlExtender
    Inherits ExtenderControlBase

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    Public Property MyProperty() As String
        Get
            Return GetPropertyValue("MyProperty", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("MyProperty", value)
        End Set
    End Property
End Class

목록 1에서 컨트롤 extender 클래스에 대 한 몇 가지 사항을 확인 해야 합니다.There are several things that you notice about the control extender class in Listing 1. 먼저 클래스가 기본 ExtenderControlBase 클래스에서 상속 되는지 확인 합니다.First, notice that the class inherits from the base ExtenderControlBase class. 모든 AJAX Control Toolkit extender 컨트롤은이 기본 클래스에서 파생 됩니다.All AJAX Control Toolkit extender controls derive from this base class. 예를 들어 기본 클래스는 모든 컨트롤 extender의 필수 속성인 TargetID 속성을 포함 합니다.For example, the base class includes the TargetID property that is a required property of every control extender.

다음으로 클래스에는 클라이언트 스크립트와 관련 된 다음 두 가지 특성이 포함 되어 있습니다.Next, notice that the class includes the following two attributes related to client script:

  • Webresource.axd-파일이 어셈블리에 포함 리소스로 포함 되도록 합니다.WebResource - Causes a file to be included as an embedded resource in an assembly.
  • ClientScriptResource-어셈블리에서 스크립트 리소스를 검색 합니다.ClientScriptResource - Causes a script resource to be retrieved from an assembly.

Webresource.axd 특성은 사용자 지정 extender가 컴파일될 때 어셈블리에 MyControlBehavior.js JavaScript 파일을 포함 하는 데 사용 됩니다.The WebResource attribute is used to embed the MyControlBehavior.js JavaScript file into the assembly when the custom extender is compiled. ClientScriptResource 특성은 웹 페이지에서 사용자 지정 extender를 사용할 때 어셈블리에서 MyControlBehavior.js 스크립트를 검색 하는 데 사용 됩니다.The ClientScriptResource attribute is used to retrieve the MyControlBehavior.js script from the assembly when the custom extender is used in a web page.

Webresource.axd 및 ClientScriptResource 특성이 작동 하려면 JavaScript 파일을 포함 리소스로 컴파일해야 합니다.In order for the WebResource and ClientScriptResource attributes to work, you must compile the JavaScript file as an embedded resource. 솔루션 탐색기 창에서 파일을 선택 하 고 속성 시트를 연 후에 포함 된 리소스 값을 빌드 작업 속성에 할당 합니다.Select the file in the Solution Explorer window, open the property sheet, and assign the value Embedded Resource to the Build Action property.

컨트롤 extender에는 TargetControlType 특성도 포함 되어 있습니다.Notice that the control extender also includes a TargetControlType attribute. 이 특성은 컨트롤 extender에 의해 확장 되는 컨트롤의 형식을 지정 하는 데 사용 됩니다.This attribute is used to specify the type of control that is extended by the control extender. 목록 1의 경우 컨트롤 extender를 사용 하 여 텍스트 상자를 확장 합니다.In the case of Listing 1, the control extender is used to extend a TextBox.

마지막으로, 사용자 지정 extender에 이름이 T.myproperty 인 속성이 포함 되어 있는지 확인 합니다.Finally, notice that the custom extender includes a property named MyProperty. 속성은 ExtenderControlProperty 특성으로 표시 됩니다.The property is marked with the ExtenderControlProperty attribute. GetPropertyValue () 및 SetPropertyValue () 메서드는 서버측 컨트롤 extender의 속성 값을 클라이언트 쪽 동작으로 전달 하는 데 사용 됩니다.The GetPropertyValue() and SetPropertyValue() methods are used to pass the property value from the server-side control extender to the client-side behavior.

계속 해 서 DisabledButton extender에 대 한 코드를 구현 해 보겠습니다.Let's go ahead and implement the code for our DisabledButton extender. 이 extender에 대 한 코드는 목록 2에서 찾을 수 있습니다.The code for this extender can be found in Listing 2.

목록 2-DisabledButtonExtenderListing 2 - DisabledButtonExtender.vb

Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports AjaxControlToolkit

<Assembly: System.Web.UI.WebResource("CustomExtenders.DisabledButtonBehavior.js", "text/javascript")> 

<Designer(GetType(DisabledButtonExtender))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
    Inherits ExtenderControlBase

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    <IDReferenceProperty(GetType(Button))> _
    Public Property TargetButtonID() As String
        Get
            Return GetPropertyValue("TargetButtonID", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("TargetButtonID", value)
        End Set
    End Property

    <ExtenderControlProperty(), DefaultValue("")> _
    Public Property DisabledText() As String
        Get
            Return GetPropertyValue("DisabledText", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("DisabledText", value)
        End Set
    End Property

End Class

목록 2의 DisabledButton extender에는 TargetButtonID 및 DisabledText 라는 두 개의 속성이 있습니다.The DisabledButton extender in Listing 2 has two properties named TargetButtonID and DisabledText. TargetButtonID 속성에 적용 된 IDReferenceProperty는 단추 컨트롤의 ID 이외의 항목을이 속성에 할당 하는 것을 방지 합니다.The IDReferenceProperty applied to the TargetButtonID property prevents you from assigning anything other than the ID of a Button control to this property.

Webresource.axd 및 ClientScriptResource 특성은 DisabledButtonBehavior.js 라는 파일에 있는 클라이언트측 동작을이 extender와 연결 합니다.The WebResource and ClientScriptResource attributes associate a client-side behavior located in a file named DisabledButtonBehavior.js with this extender. 이 JavaScript 파일에 대해서는 다음 섹션에서 설명 합니다.We discuss this JavaScript file in the next section.

사용자 지정 Extender 동작 만들기Creating the Custom Extender Behavior

컨트롤 extender의 클라이언트 쪽 구성 요소를 동작 이라고 합니다.The client-side component of a control extender is called a behavior. 단추를 사용 하지 않도록 설정 하 고 설정 하는 실제 논리는 DisabledButton 동작에 포함 됩니다.The actual logic for disabling and enabling the Button is contained in the DisabledButton behavior. 동작에 대 한 JavaScript 코드는 목록 3에 포함 되어 있습니다.The JavaScript code for the behavior is included in Listing 3.

목록 3-DisabledButton.jsListing 3 - DisabledButton.js

Type.registerNamespace('CustomExtenders');

CustomExtenders.DisabledButtonBehavior = function(element) {

    CustomExtenders.DisabledButtonBehavior.initializeBase(this, [element]);

    this._targetButtonIDValue = null;
    this._disabledTextValue = null;

}

CustomExtenders.DisabledButtonBehavior.prototype = {

    initialize : function() {
        CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'initialize');

        // Initalization code
        $addHandler(this.get_element(), 'keyup', 
        Function.createDelegate(this, this._onkeyup));
        this._onkeyup();
    },

    dispose : function() {
        // Cleanup code 

        CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'dispose');
    },

    // Property accessors 
    //
    get_TargetButtonID : function() {
        return this._targetButtonIDValue;
    },

    set_TargetButtonID : function(value) {
        this._targetButtonIDValue = value;
    },

    get_DisabledText : function() {
        return this._disabledTextValue;
    },

    set_DisabledText : function(value) {
        this._disabledTextValue = value;
    },

  _onkeyup : function() {
  
    var e = $get(this._targetButtonIDValue);
    if (e) {
      var disabled = ("" == this.get_element().value);
      e.disabled = disabled;
      if ( this._disabledTextValue) {
        if (disabled) {
          this._oldValue = e.value;
          e.value = this._disabledTextValue;
        }
        else
        {
          if(this._oldValue){
            e.value = this._oldValue;
          }
        }
      }
    }
  }

}

CustomExtenders.DisabledButtonBehavior.registerClass('CustomExtenders.DisabledButtonBehavior', AjaxControlToolkit.BehaviorBase);

목록 3의 JavaScript 파일에는 이름이 DisabledButtonBehavior 인 클라이언트 쪽 클래스가 있습니다.The JavaScript file in Listing 3 contains a client-side class named DisabledButtonBehavior. TargetButtonID 및 DisabledText 라는 두 개의 속성을 포함 하는이 클래스에는 get TargetButtonID/set TargetButtonID를 사용 하 여 액세스할 수 있으며 _ _ get _ DisabledText/set DisabledText _ 를 사용 하 여 액세스할 수 있습니다.This class, like its server-side twin, includes two properties named TargetButtonID and DisabledText which you can access using get_TargetButtonID/set_TargetButtonID and get_DisabledText/set_DisabledText.

Initialize () 메서드는 keyup 이벤트 처리기를 동작의 대상 요소와 연결 합니다.The initialize() method associates a keyup event handler with the target element for the behavior. 이 동작과 연결 된 텍스트 상자에 문자를 입력할 때마다 keyup 처리기가 실행 됩니다.Each time you type a letter into the TextBox associated with this behavior, the keyup handler executes. Keyup 처리기는 동작과 연결 된 텍스트 상자에 텍스트가 포함 되어 있는지 여부에 따라 단추를 사용 하거나 사용 하지 않도록 설정 합니다.The keyup handler either enables or disables the Button depending on whether the TextBox associated with the behavior contains any text.

목록 3에서 JavaScript 파일을 포함 리소스로 컴파일해야 합니다.Remember that you must compile the JavaScript file in Listing 3 as an embedded resource. 솔루션 탐색기 창에서 파일을 선택 하 고 속성 시트를 연 후에 포함 된 리소스 값을 빌드 작업 속성에 할당 합니다 (그림 3 참조).Select the file in the Solution Explorer window, open the property sheet, and assign the value Embedded Resource to the Build Action property (see Figure 3). 이 옵션은 Visual Studio 및 Visual Web Developer에서 사용할 수 있습니다.This option is available in both Visual Studio and Visual Web Developer.

JavaScript 파일을 포함 리소스로 추가Adding a JavaScript file as an embedded resource

그림 03: JavaScript 파일을 포함 리소스로 추가 (전체 크기 이미지를 보려면 클릭)Figure 03: Adding a JavaScript file as an embedded resource(Click to view full-size image)

사용자 지정 Extender 디자이너 만들기Creating the Custom Extender Designer

Extender를 완료 하기 위해 만들어야 하는 마지막 클래스가 하나 있습니다.There is one last class that we need to create to complete our extender. 목록 4에서 designer 클래스를 만들어야 합니다.We need to create the designer class in Listing 4. 이 클래스는 Visual Studio/Visual Web Developer Designer에서 extender가 제대로 작동 하도록 하는 데 필요 합니다.This class is required to make the extender behave correctly with the Visual Studio/Visual Web Developer Designer.

목록 4-DisabledButtonDesignerListing 4 - DisabledButtonDesigner.vb

Imports AjaxControlToolkit.Design

Public Class DisabledButtonDesigner
    Inherits ExtenderControlBaseDesigner(Of DisabledButtonExtender)

End Class

목록 4의 디자이너를 Designer 특성을 사용 하 여 DisabledButton extender와 연결 합니다. 다음과 같이 Designer 특성을 DisabledButtonExtender 클래스에 적용 해야 합니다.You associate the designer in Listing 4 with the DisabledButton extender with the Designer attribute.You need to apply the Designer attribute to the DisabledButtonExtender class like this:

<Designer(GetType(DisabledButtonDesigner))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
   Inherits ExtenderControlBase

사용자 지정 Extender 사용Using the Custom Extender

이제 DisabledButton 컨트롤 extender 만들기를 완료 했으므로 ASP.NET 웹 사이트에서 사용할 수 있습니다.Now that we have finished creating the DisabledButton control extender, it is time to use it in our ASP.NET website. 먼저 도구 상자에 사용자 지정 extender를 추가 해야 합니다.First, we need to add the custom extender to the toolbox. 다음 단계를 수행합니다.Follow these steps:

  1. 솔루션 탐색기 창에서 페이지를 두 번 클릭 하 여 ASP.NET 페이지를 엽니다.Open an ASP.NET page by double-clicking the page in the Solution Explorer window.
  2. 도구 상자를 마우스 오른쪽 단추로 클릭 하 고 메뉴 옵션 항목 선택을 선택 합니다.Right-click the toolbox and select the menu option Choose Items.
  3. 도구 상자 항목 선택 대화 상자에서 CustomExtenders.dll 어셈블리로 이동 합니다.In the Choose Toolbox Items dialog, browse to the CustomExtenders.dll assembly.
  4. 확인 단추를 클릭 하 여 대화 상자를 닫습니다.Click the OK button to close the dialog.

이러한 단계를 완료 한 후에는 DisabledButton 컨트롤 extender가 도구 상자에 표시 됩니다 (그림 4 참조).After you complete these steps, the DisabledButton control extender should appear in the toolbox (see Figure 4).

도구 상자의 DisabledButtonDisabledButton in the toolbox

그림 04: 도구 상자에 DisabledButton (전체 크기 이미지를 보려면 클릭)Figure 04: DisabledButton in the toolbox(Click to view full-size image)

다음으로 새 ASP.NET 페이지를 만들어야 합니다.Next, we need to create a new ASP.NET page. 다음 단계를 수행합니다.Follow these steps:

  1. ShowDisabledButton 라는 새 ASP.NET 페이지를 만듭니다.Create a new ASP.NET page named ShowDisabledButton.aspx.
  2. ScriptManager를 페이지로 끌어옵니다.Drag a ScriptManager onto the page.
  3. TextBox 컨트롤을 페이지로 끌어 옵니다.Drag a TextBox control onto the page.
  4. 단추 컨트롤을 페이지로 끌어 옵니다.Drag a Button control onto the page.
  5. 속성 창에서 단추 ID 속성을 btnSave 값으로 변경 하 고 Text 속성을 *Save * *값으로 변경 합니다.In the Properties window, change the Button ID property to the value btnSave and the Text property to the value Save*.

표준 ASP.NET 텍스트 상자 및 단추 컨트롤을 사용 하 여 페이지를 만들었습니다.We created a page with a standard ASP.NET TextBox and Button control.

다음으로, DisabledButton extender를 사용 하 여 TextBox 컨트롤을 확장 해야 합니다.Next, we need to extend the TextBox control with the DisabledButton extender:

  1. Extender 작업 추가 옵션을 선택 하 여 extender 마법사 대화 상자를 엽니다 (그림 5 참조).Select the Add Extender task option to open the Extender Wizard dialog (see Figure 5). 대화 상자에 사용자 지정 DisabledButton extender가 포함 되어 있는지 확인 합니다.Notice that the dialog includes our custom DisabledButton extender.
  2. DisabledButton extender를 선택 하 고 확인 단추를 클릭 합니다.Select the DisabledButton extender and click the OK button.

Extender 마법사 대화 상자The Extender Wizard dialog

그림 05: Extender 마법사 대화 상자 (전체 크기 이미지를 보려면 클릭)Figure 05: The Extender Wizard dialog(Click to view full-size image)

마지막으로 DisabledButton extender의 속성을 설정할 수 있습니다.Finally, we can set the properties of the DisabledButton extender. TextBox 컨트롤의 속성을 수정 하 여 DisabledButton extender의 속성을 수정할 수 있습니다.You can modify the properties of the DisabledButton extender by modifying the properties of the TextBox control:

  1. 디자이너에서 텍스트 상자를 선택 합니다.Select the TextBox in the Designer.
  2. 속성 창에서 Extender 노드를 확장 합니다 (그림 6 참조).In the Properties window, expand the Extenders node (see Figure 6).
  3. DisabledText 속성에 Save 값을 할당 하 고 TargetButtonID 속성에 btnSave 값을 할당 합니다.Assign the value Save to the DisabledText property and the value btnSave to the TargetButtonID property.

Extender 속성 설정Setting extender properties

그림 06: extender 속성 설정 (전체 크기 이미지를 보려면 클릭)Figure 06: Setting extender properties(Click to view full-size image)

F5 키를 눌러 페이지를 실행 하면 단추 컨트롤이 처음에 비활성화 됩니다.When you run the page (by hitting F5), the Button control is initially disabled. 텍스트 상자에 텍스트를 입력 하는 즉시 단추 컨트롤이 사용 됩니다 (그림 7 참조).As soon as you start entering text into the TextBox, the Button control is enabled (see Figure 7).

DisabledButton extender의 동작The DisabledButton extender in action

그림 07: 실행 중인 DisabledButton extender (전체 크기 이미지를 보려면 클릭)Figure 07: The DisabledButton extender in action(Click to view full-size image)

요약Summary

이 자습서의 목표는 사용자 지정 extender 컨트롤을 사용 하 여 AJAX 컨트롤 도구 키트를 확장 하는 방법을 설명 하는 것입니다.The goal of this tutorial was to explain how you can extend the AJAX Control Toolkit with custom extender controls. 이 자습서에서는 간단한 DisabledButton 컨트롤 extender를 만들었습니다.In this tutorial, we created a simple DisabledButton control extender. DisabledButtonExtender 클래스, DisabledButtonBehavior JavaScript 동작 및 DisabledButtonDesigner 클래스를 만들어이 extender를 구현 했습니다.We implemented this extender by creating a DisabledButtonExtender class, a DisabledButtonBehavior JavaScript behavior, and a DisabledButtonDesigner class. 사용자 지정 컨트롤 extender를 만들 때마다 비슷한 단계 집합을 따릅니다.You follow a similar set of steps whenever you create a custom control extender.