Share via


Using AJAX 컨트롤 도구 키트 컨트롤 및 컨트롤 Extender 사용(VB)

작성자: Microsoft

AJAX 컨트롤 도구 키트 컨트롤 및 확장기를 ASP.NET 페이지에 추가하는 방법을 알아봅니다.

AJAX 컨트롤 도구 키트에는 컨트롤 및 컨트롤 확장기 집합이 포함되어 있습니다. 이 간단한 자습서에서는 컨트롤과 컨트롤 확장기를 모두 ASP.NET 페이지에 추가하는 방법을 알아봅니다.

참고

AJAX 컨트롤 도구 키트를 설치하고 AJAX 컨트롤 도구 키트를 Visual Studio/Visual Web Developer 도구 상자에 추가하는 방법에 대한 지침은 AJAX 컨트롤 도구 키트 시작 자습서를 참조하세요.

AJAX 컨트롤 도구 키트 컨트롤 사용

AJAX 컨트롤 도구 키트 컨트롤은 일반 ASP.NET 컨트롤처럼 작동합니다. 도구 상자에서 ASP.NET 페이지로 컨트롤을 끌 수 있습니다. 디자인 보기 또는 원본 보기에서 페이지에 컨트롤을 추가할 수 있습니다.

AJAX 컨트롤 도구 키트의 컨트롤을 사용할 때는 특별한 요구 사항이 하나 있습니다. 페이지에 ScriptManager 컨트롤이 포함되어야 합니다. ScriptManager 컨트롤은 AJAX 컨트롤 도구 키트 컨트롤에 필요한 모든 필요한 JavaScript를 포함해야 합니다.

예를 들어 AJAX 컨트롤 도구 키트 탭에는 편집기 컨트롤이라는 컨트롤이 포함됩니다. 이 컨트롤은 풍부한 HTML 편집기를 표시합니다. 페이지에 편집기 컨트롤을 추가하려면 다음 단계를 수행합니다.

  1. ShowEditor.aspx라는 새 ASP.NET 페이지 만들기
  2. 도구 상자의 AJAX 확장 탭 아래에서 ScriptManager 컨트롤을 선택하고 컨트롤을 페이지로 끕니다.
  3. 도구 상자의 AJAX 컨트롤 도구 키트 탭 아래에서 편집기 컨트롤을 선택하고 컨트롤을 페이지로 끌어다 놓습니다(그림 1 참조). Designer 그림 2와 같아야 합니다.
  4. 메뉴 옵션 디버그, 디버깅 시작 또는 F5 키를 눌러 웹 사이트를 실행합니다.
  5. 그림 3에 페이지가 표시됩니다.

HTML 편집기 컨트롤 선택

그림 01: HTML 편집기 컨트롤 선택(전체 크기 이미지를 보려면 클릭)

ScriptManager 및 편집 컨트롤을 사용하여 Visual Studio Designer

그림 02: ScriptManager 및 편집 컨트롤을 사용하여 Visual Studio Designer(전체 크기 이미지를 보려면 클릭)

DisplayEditor.aspx 페이지

그림 03: DisplayEditor.aspx 페이지(전체 크기 이미지를 보려면 클릭)

AJAX 컨트롤 도구 키트 컨트롤 확장기 사용

AJAX 컨트롤 도구 키트에는 컨트롤 확장기도 포함되어 있습니다. 이름에서 알 수 있듯이 컨트롤 extender는 기존 컨트롤의 기능을 확장합니다. 예를 들어 ConfirmButton 컨트롤 extender는 표준 ASP.NET Button 컨트롤을 확장합니다. Extender는 단추 컨트롤의 동작을 변경하여 단추가 클릭할 때 확인 대화 상자를 표시합니다.

AJAX 컨트롤 도구 키트 컨트롤과 마찬가지로 컨트롤 확장자에는 ScriptManager 컨트롤이 필요합니다. 페이지에서 컨트롤 확장기를 사용하기 전에 페이지에 ScriptManager 컨트롤을 추가해야 합니다.

ConfirmButton 컨트롤 확장기를 사용하려면 다음 단계를 수행합니다.

  1. ShowConfirmButton.aspx라는 새 ASP.NET 페이지 만들기
  2. AJAX 확장 탭 아래에서 페이지로 컨트롤을 끌어서 ScriptManager 컨트롤을 페이지에 추가합니다.
  3. 도구 상자의 표준 탭 아래에서 Designer 화면으로 단추를 끌어서 표준 단추 컨트롤을 페이지에 추가합니다.
  4. Extender 추가 작업 옵션을 클릭합니다(그림 4 참조).
  5. 확장자 선택 대화 상자에서 ConfirmButtonExtender(그림 5 참조)를 선택하고 확인 단추를 클릭합니다.
  6. Designer 단추 컨트롤을 선택하고 속성 창 확장기, Button1_ConfirmButtonExtender 노드를 확장합니다(그림 6 참조). ConfirmText 속성에 'Really?' 값을 할당합니다.
  7. 메뉴 옵션 디버그, 디버깅 시작을 선택하거나 F5 키를 눌러 페이지를 실행합니다.

Extender 추가 작업 옵션

그림 04: Extender 추가 작업 옵션(전체 크기 이미지를 보려면 클릭)

ConfirmButton 컨트롤 확장기 선택

그림 05: ConfirmButton 컨트롤 확장기 선택(전체 크기 이미지를 보려면 클릭)

ConfirmButton 속성 설정

그림 06: ConfirmButton 속성 설정(전체 크기 이미지를 보려면 클릭)

페이지가 열리면 단추가 표시됩니다. 단추를 클릭하면 그림 7에서 확인 대화 상자가 표시됩니다.

확인 대화 상자 표시

그림 07: 확인 대화 상자 표시(전체 크기 이미지를 보려면 클릭)

일반적으로 컨트롤 확장기를 페이지로 끌어다 놓지 않습니다. 대신 Extender 추가 작업 옵션을 사용하여 이미 페이지에 추가한 컨트롤에 extender를 추가합니다. 또한 확장 중인 컨트롤의 속성 시트를 열어 컨트롤 extender 속성을 설정합니다.

단일 ASP.NET 컨트롤은 여러 컨트롤 확장기를 통해 확장할 수 있습니다. 확장되는 컨트롤의 속성 시트에는 컨트롤과 연결된 모든 컨트롤 확장기가 나열됩니다.