다음을 통해 공유

ASP.NET AJAX Extender 컨트롤 개요

  • 아티클

업데이트: 2007년 11월

ASP.NET AJAX Extender 컨트롤은 표준 ASP.NET 웹 서버 컨트롤의 클라이언트 기능을 향상시킵니다. 브라우저에서 다양한 사용자 경험을 제공하는 하나 이상의 Extender 컨트롤을 사용하여 TextBox 컨트롤, Button 컨트롤 및 Panel 컨트롤과 같은 표준 웹 서버 컨트롤을 대상으로 할 수 있습니다. 예를 들어 사용자가 서버에 양식을 전송하기 전에 확인할 수 있도록 클라이언트 기능을 Button 컨트롤에 추가하는 Extender 컨트롤을 사용할 수 있습니다.

ASP.NET AJAX Extender 컨트롤을 Visual Studio에 추가하고 다른 컨트롤을 사용하는 것처럼 해당 컨트롤을 사용하여 작업할 수 있습니다. 고유한 Extender 컨트롤을 만들거나 다른 소스로부터 가져올 수 있습니다.

Extender 컨트롤의 소스 중 하나는 ASP.NET AJAX Control Toolkit입니다. Control Toolkit은 사용자 지정 컨트롤과 Extender를 간단하게 만들고 다시 사용할 수 있게 해주는 샘플과 SDK를 제공합니다. ASP.NET AJAX 웹 사이트에서 ASP.NET AJAX Control Toolkit을 다운로드할 수 있습니다.

중요:

ASP.NET AJAX Control Toolkit은 커뮤니티 지원 라이브러리이며 Microsoft에서 지원하지 않습니다. 이 항목에서는 Control Toolkit에 있는 Extender 컨트롤을 예로 들어 Extender 컨트롤 사용 방법을 보여 줍니다. 하지만 이 항목에 있는 정보를 여기서 설명하는 Extender 컨트롤이 ASP.NET의 공식적인 부분이거나 지원되는 컨트롤임을 의미하는 것처럼 해석해서는 안 됩니다.

이 항목에서는 다음 내용에 대해 설명합니다.

  • AJAX Extender 컨트롤 기능

  • 배경

  • 클래스 참조

기능

Visual Studio는 다음과 같은 Extender 컨트롤 기능을 지원합니다.

  • Extender 컨트롤 추가

  • Extender 컨트롤 제거

  • Extender 컨트롤 속성 설정

  • Extender 컨트롤 관리

맨 위로 이동

배경

Extender 컨트롤을 사용하면 표준 ASP.NET 웹 서버 컨트롤의 클라이언트 기능을 향상시킬 수 있습니다. Extender 컨트롤 자체를 사용하지는 마십시오. 대신 Extender 컨트롤을 다른 ASP.NET 웹 서버 컨트롤과 연결해야 합니다. Extender 컨트롤의 TargetControlID 속성을 확장할 서버 컨트롤의 ID로 설정하여 웹 서버 컨트롤에 연결합니다.

Visual Studio에서 Extender 컨트롤 사용

ASP.NET AJAX Control Toolkit을 설치하면 Extender 컨트롤이 도구 상자의 해당 고유 탭에 표시됩니다. 도구 상자의 표준 섹션과 마찬가지로 도구 상자의 Extender 컨트롤 섹션은 웹 페이지에 대해서만 표시됩니다.

참고:

ASP.NET AJAX Control Toolkit은 커뮤니티 지원 라이브러리이며 ASP.NET의 일부가 아닙니다.

Extender 컨트롤 추가

다음 방법을 사용하여 디자인 뷰의 웹 서버 컨트롤에 Extender 컨트롤을 추가할 수 있습니다.

  • Extender 컨트롤을 웹 서버 컨트롤로 끕니다. Extender 컨트롤을 지원하는 웹 서버 컨트롤에만 Extender 컨트롤을 놓을 수 있습니다. Extender 컨트롤을 디자인 화면 위로 끌면 포인터가 Extender 컨트롤을 웹 서버 컨트롤 위에 놓을 수 있는지 여부를 표시합니다.

  • 웹 서버 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 Extender 추가를 클릭합니다.

  • 단추 작업 스마트 태그를 선택하고 Extender 추가를 클릭합니다.

    참고:

    디자인 뷰에서 Extender 컨트롤은 일반적으로 표시되지 않습니다. 하지만 Extender 컨트롤과 관련된 오류가 발생하는 경우 Extender 컨트롤이 표시됩니다.

Extender를 디자이너에 추가하면 Extender 컨트롤의 TargetControlID 속성이 연결된 웹 서버 컨트롤로 설정됩니다. Extender 컨트롤의 이름은 연결된 웹 서버 컨트롤의 이름을 기반으로 합니다.

Extender 컨트롤은 구성할 수 있는 UI(사용자 인터페이스) 요소를 지원할 수 있습니다. 그런 경우 확장된 웹 서버 컨트롤의 스마트 태그 메뉴를 사용하여 이러한 요소를 설정할 수 있습니다.

Extender 컨트롤은 대상 컨트롤에 연결될 때 디자인 화면에 표시되지 않습니다. Extender 컨트롤이 대상 컨트롤에 연결되지 않거나 디자인 타임에 연결을 확인할 수 없는 경우 Extender 컨트롤이 디자인 화면에서 자리 표시자로 표시됩니다. 이러한 결과가 발생할 수 있는 시나리오는 다음과 같습니다.

  • TargetControlID 속성이 비어 있는 경우

  • TargetControlID 속성이 기존 컨트롤과 일치하지 않는 경우

  • TargetControlID 속성이 Extender 컨트롤에서 확장할 수 없는 컨트롤을 참조하는 경우

Extender 컨트롤이 유효한 대상 컨트롤에 연결된 경우 Visual Studio는 다음 Extender 컨트롤 속성을 속성 창에서 숨깁니다.

  • TargetControlID

  • EnableViewState(Control에서 상속됨)

  • ID(Control에서 상속됨)

Extender 컨트롤을 웹 서버 컨트롤에 추가하는 방법에 대한 자세한 내용은 연습: ASP.NET AJAX Extender 컨트롤을를 참조하십시오.

Extender 컨트롤 제거

다음을 수행하여 Extender 컨트롤과 웹 서버 컨트롤 사이의 연결을 제거할 수 있습니다.

  • 디자인 뷰에서 웹 서버 컨트롤을 마우스 오른쪽 단추로 클릭하고 Extender 제거를 클릭한 다음 제거할 Extender 컨트롤을 선택합니다.

  • 디자인 뷰에서 단추 작업 스마트 태그를 선택하고 Extender 제거를 클릭한 다음 제거할 Extender 컨트롤을 선택합니다.

  • 소스 뷰에서 Extender 컨트롤 태그를 삭제합니다.

Extender 컨트롤 및 ScriptManager 컨트롤

ExtenderControl 클래스에서 파생되는 Extender 컨트롤을 사용하려면 페이지에 ScriptManager 컨트롤이 있어야 합니다. ExtenderControl 기본 클래스에서는 테스트를 수행하여 페이지에 ScriptManager 컨트롤이 있는지 확인합니다.

하지만 ScriptManager 컨트롤이 필요 없는 Extender 컨트롤을 만들려는 경우 IExtenderControl 인터페이스를 직접 구현하는 클래스를 만들 수 있습니다. 또한 Control에서 파생되는 클래스를 만들거나 Control에서 파생되는 기존 컨트롤을 확장하려는 경우 IExtenderControl 인터페이스를 직접 구현할 수 있습니다.

IExtenderControl 인터페이스는 GetScriptReferences 메서드를 호출하여 컨트롤에 대한 스크립트 라이브러리를 등록합니다. 그리고 GetScriptDescriptors 메서드를 호출하여 ScriptDescriptor 개체를 등록합니다. GetScriptDescriptors 메서드는 ScriptDescriptor 개체의 IEnumerable 목록을 반환합니다.

참고:

WebControl 클래스에서 파생된 기존 컨트롤 형식을 확장하는 경우 IScriptControl 인터페이스를 구현합니다.

ASP.NET AJAX Extender 컨트롤을 만드는 방법에 대한 자세한 내용은 웹 서버 컨트롤에 클라이언트 기능 추가를 참조하십시오.

AJAX Control Toolkit의 Extender 컨트롤

다음 표에서는 ASP.NET AJAX Control Toolkit에서 사용할 수 있는 일부 AJAX Extender 컨트롤에 대해 설명합니다.

참고:

ASP.NET AJAX Control Toolkit은 커뮤니티 지원 라이브러리이며 ASP.NET의 일부가 아닙니다. 라이브러리의 내용과 개별 컨트롤의 기능은 변경될 수 있습니다.

AJAX Extender 컨트롤

설명

CascadingDropDown

다른 DropDownList 컨트롤에서 선택한 영역에 따라 동적으로 DropDownList 컨트롤을 채웁니다. 이 Extender 컨트롤은 DropDownList 컨트롤에 연결됩니다.

한 DropDownList 컨트롤의 선택 영역이 변경되면 CascadingDropDown Extender 컨트롤은 지정한 웹 서비스를 호출하여 집합의 다음 DropDownList를 채우는 데 사용되는 값 목록을 검색합니다.

CollapsiblePanelExtender

축소 가능한 섹션을 웹 페이지에 추가할 수 있게 합니다.

이 Extender 컨트롤은 UpdatePanel 컨트롤에 연결됩니다.

UpdatePanel 컨트롤을 확장하거나 축소할 수 있는 웹 서버 컨트롤을 지정할 수 있습니다. 또는 사용자가 마우스 포인터를 UpdatePanel 위로 이동할 때 해당 컨트롤이 자동으로 확장되거나 축소되도록 설정할 수 있습니다.

ConfirmButtonExtender

Button 컨트롤을 누른 다음이지만 페이지나 UpdatePanel이 서버로 전송되기 전에 확인 메시지를 표시합니다. 사용자가 취소하면 페이지가 전송되지 않습니다.

이 Extender 컨트롤은 Button 컨트롤에 연결됩니다.

FilteredTextBoxExtender

사용자가 특정 문자를 TextBox 컨트롤에 입력하지 못하게 합니다.

이 Extender 컨트롤은 TextBox 컨트롤에 연결됩니다.

ModalPopupExtender

콘텐츠가 표시되게 하지만 사용자가 페이지 나머지 부분과 상호 작용하지 못하도록 합니다.

이 Extender 컨트롤은 모달 창을 여는 데 사용할 수 있는 웹 서버 컨트롤에 연결됩니다.

PasswordStrength

암호의 강도를 표시합니다.

이 Extender 컨트롤은 TextBox 컨트롤에 연결됩니다.

RoundedCornersExtender

기존 요소에 둥근 모퉁이를 적용합니다.

이 Extender 컨트롤은 일반적으로 Panel 컨트롤에 연결됩니다.

TextBoxWatermarkExtender

텍스트 상자에 텍스트 값이 없으면 메시지를 TextBox 컨트롤 내부에 표시합니다.

이 Extender 컨트롤은 TextBox 컨트롤에 연결됩니다.

Extender 컨트롤 속성 설정

속성 창에서 Extender 컨트롤 속성을 설정할 수 있습니다. 일부 Extender 컨트롤은 웹 서버 컨트롤의 스마트 태그 메뉴를 통해 액세스할 수 있는 추가 UI 요소도 제공합니다.

웹 서버 컨트롤이 확장되면 속성 창은 Extenders라는 새 범주를 표시합니다. 이 섹션에서는 웹 서버 컨트롤에 추가된 각 Extender 컨트롤에 대해 다양한 수준의 속성이 새로 표시됩니다. 각 Extender 컨트롤은 해당 컨트롤과 관련된 고유한 속성을 제공합니다.

웹 서버 컨트롤 속성을 설정하는 방법에 대한 자세한 내용은 방법: Visual Web Developer에서 속성 창 활성화를 참조하십시오.

Extender 컨트롤 관리

Extender 컨트롤은 UI를 디자인 뷰에 직접 표시하지 않기 때문에 Extender 컨트롤을 해당 컨트롤이 추가된 컨트롤의 일부로 관리합니다. 웹 서버 컨트롤이 다른 위치로 이동되거나 다른 컨트롤 내부에 놓인 경우 연결된 Extender 컨트롤이 이동됩니다.

Extender 컨트롤의 태그는 웹 서버 컨트롤의 태그 뒤에 직접 포함됩니다. 여러 개의 Extender 컨트롤이 웹 서버 컨트롤에 연결된 경우 Extender 컨트롤의 순서는 이동 중에 유지됩니다. 따라서 런타임에 충돌 기회가 줄어듭니다.

Extender 컨트롤이 연결되어 있는 웹 서버 컨트롤이 디자인 화면에서 제거되면 연결된 Extender도 삭제됩니다. Extender 컨트롤이 연결되어 있는 웹 서버 컨트롤의 ID 속성을 속성 창에서 변경하면 Extender 컨트롤의 TargetControlID 속성과 ID 속성이 일치하도록 업데이트됩니다.

참고:

Extender에 사용자 지정 ID(예: 입력한 ID)가 있는 경우 연결된 웹 서버 컨트롤의 ID 속성이 변경될 때 ID 속성은 변경되지 않습니다.

Extender 컨트롤이 연결된 웹 서버 컨트롤이 잘리거나 복사되어 클립보드에 들어가면 복사본은 연결된 Extender 컨트롤을 클립보드에 포함합니다. 이러한 Extender 컨트롤은 웹 서버 컨트롤 바로 뒤에 복사됩니다. 이는 소스에서 Extender 태그가 컨트롤과 인접해 있지 않은 경우에도 적용됩니다. 웹 서버 컨트롤을 붙여넣으면 Extender 컨트롤도 붙여넣어집니다.

Extender 컨트롤의 태그에 오류가 발생하면 "컨트롤 렌더링 오류"로 시작하는 메시지와 함께 해당 오류가 디자인 뷰에 표시됩니다. 이 오류를 해결하려면 소스 뷰에서 태그를 고칩니다.

맨 위로 이동

클래스 참조

다음 표에서는 Extender 컨트롤의 주요 서버 클래스를 보여 줍니다.

클래스

설명

ExtenderControl

Extender 컨트롤의 추상 기본 클래스를 제공합니다.

IExtenderControl

Extender 컨트롤의 동작을 정의합니다.

맨 위로 이동

참고 항목

작업

연습: ASP.NET AJAX Extender 컨트롤