연습: 기본 ASP.NET Wizard 컨트롤 만들기

아티클
10/22/2014

업데이트: 2007년 11월

사용자 데이터를 수집하는 일련의 폼을 작성하는 일은 웹 사이트 개발 시 일반적으로 수행되는 작업입니다. ASP.NET Wizard 컨트롤은 단계를 빌드하거나 새 단계를 추가하거나 단계를 다시 정렬할 수 있는 메커니즘을 제공하여 폼 빌드 및 사용자 입력 수집과 관련된 다양한 작업을 단순화합니다. 이 연습에서는 ASP.NET Wizard 컨트롤을 사용하여 코드를 따로 작성하거나 폼 단계가 변경될 때 사용자 데이터가 계속 유지되도록 할 필요 없이 데이터 수집 단계를 일련의 독립적인 단계로 단순화합니다. 사용자 이름과 전자 메일 주소를 수집하는 간단한 마법사를 만든 후 완료 단계에 해당 데이터를 다시 표시합니다. 이 연습에서 수행할 작업은 다음과 같습니다.

페이지에 Wizard 컨트롤 추가
마법사 단계에 컨트롤 및 텍스트 추가
단계 중간에 마법사의 데이터에 액세스

사전 요구 사항

이 연습을 따라 하려면 다음과 같은 요건을 갖추어야 합니다.

Visual Studio 또는 Visual Web Developer

웹 사이트 만들기

연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따라 웹 사이트를 이미 만든 경우 해당 웹 사이트를 사용하고 이 연습의 뒷부분에 나오는 "Wizard 컨트롤 추가"로 이동할 수 있습니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

Visual Web Developer 또는 Visual Studio를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어, 폴더 이름 C:\WebSites를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
확인을 클릭합니다.

Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

Wizard 컨트롤 추가

Wizard 컨트롤을 추가하려면

Default.aspx에 대한 디자인 뷰로 전환합니다.
도구 상자의 표준 탭에서 Wizard 컨트롤을 페이지로 끕니다.

두 개의 기본 단계가 포함된 상태로 컨트롤이 표시됩니다. 단계를 클릭하면 해당 단계 중에 표시되는 텍스트와 컨트롤을 편집할 수 있습니다.

마법사 단계 편집

Wizard 컨트롤을 페이지로 끌어 오면 기본적으로 미리 정의된 두 단계가 표시됩니다. 이 연습에서는 두 단계를 편집한 후 처음 두 단계의 결과인 사용자 이름과 전자 메일 주소를 보여 주는 완료 단계를 추가합니다.

첫 번째 마법사 단계를 편집하려면

Wizard 컨트롤 가장자리의 핸들 중 하나를 끌어 컨트롤을 기본 크기의 약 2배로 확장합니다.
Wizard 컨트롤에서 밑줄이 그어진 텍스트 Step 1을 클릭합니다.
Wizard 컨트롤의 편집 영역을 클릭합니다.

이제 해당 단계의 표시 영역을 편집할 수 있습니다.
이름:을 입력합니다.
마법사의 활성 영역에서 방금 입력한 텍스트 옆으로 TextBox 컨트롤을 끌어 옵니다.

이제 사용자의 전자 메일 주소를 수집하도록 두 번째 단계를 편집할 수 있습니다.

두 번째 마법사 단계를 편집하려면

Wizard 컨트롤에서 Step 2를 클릭합니다.
Wizard 컨트롤의 편집 영역을 클릭합니다.
전자 메일:을 입력합니다.
마법사의 활성 영역에서 전자 메일 레이블 옆으로 TextBox 컨트롤을 끌어 옵니다.
파일을 저장합니다.

완료 단계 추가

이제 마법사의 끝점으로 작용하는 완료 단계를 만듭니다. Complete 단계에는 탐색 옵션이 없습니다.

완료 단계를 추가하려면

Wizard 컨트롤을 마우스 오른쪽 단추로 클릭합니다.
스마트 태그 표시를 선택합니다.
Wizard 작업 대화 상자에서 WizardSteps 추가/제거를 선택합니다.

WizardStep 컬렉션 편집기가 나타납니다.
추가 단추의 추가 드롭다운 목록에서 WizardStep을 선택합니다.

이제 속성 영역에 새 단계가 표시됩니다.
Title 속성을 마침으로 설정합니다.
StepType 속성을 Complete으로 설정합니다.
확인을 클릭합니다.

이제 새 완료 단계를 편집할 수 있습니다. 이 연습에서는 이전 단계에서 사용자가 입력한 데이터를 표시하도록 완료 단계를 구성합니다.

완료 단계를 편집하려면

Wizard 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
Wizard 작업 대화 상자에서 단계 드롭다운 목록을 사용하여 마침 단계를 선택합니다.

참고:

드롭다운 목록의 이름은 단계 작성 시 단계에 지정한 이름이 됩니다. 이 예제에서는 마침이 됩니다.
기본 이름 Label1은 그대로 두고 다른 Label 컨트롤을 마법사로 끌어 옵니다.
기본 이름 Label2는 그대로 두고 다른 Label 컨트롤을 마법사로 끌어 옵니다.
파일을 저장합니다.

참고:
드롭다운 목록의 이름은 단계 작성 시 단계에 지정한 이름이 됩니다. 이 예제에서는 마침이 됩니다.

완료 단계에는 사용자가 입력한 데이터가 표시됩니다. 페이지의 Load 이벤트를 사용하여 처음 두 단계의 값을 완료 단계에 추가했던 레이블에 할당합니다.

사용자 데이터를 표시하려면

Default.aspx로 돌아간 다음 디자인 뷰에서 디자인 화면을 두 번 클릭합니다.

이 페이지에는 스텁 해제된 Page_Load 메서드가 들어 있습니다.

다음의 강조 표시된 코드를 추가합니다.

Private Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) _
        Handles Me.Load
    Label1.Text = TextBox1.Text    Label2.Text = TextBox2.Text
End Sub

void Page_Load(Object sender, System.EventArgs e)
{
    Label1.Text = TextBox1.Text;    Label2.Text = TextBox2.Text;
}

파일을 저장합니다.

Wizard 컨트롤 테스트

이제 Wizard 컨트롤을 테스트할 수 있습니다.

Wizard 컨트롤을 테스트하려면

디자인 뷰에서 Default.aspx를 표시합니다.
컨트롤의 Wizard 작업 메뉴를 표시하고 단계 드롭다운 목록에서 Step 1을 선택합니다.
Wizard 컨트롤을 클릭한 후 Ctrl+F5를 누릅니다.
Step 1에 대한 이름 TextBox 컨트롤에 이름을 입력합니다.
다음을 클릭합니다.
Step 2에 대한 전자 메일 TextBox 컨트롤에 전자 메일 주소를 입력합니다.
마침을 클릭합니다.

데이터가 표시됩니다.

다음 단계

Wizard 컨트롤을 사용하면 사용자 데이터 수집을 위한 폼 작성 작업을 간단히 수행할 수 있습니다. 여기에 나오는 내용 외에 사용자 데이터 수집 및 폼 사용과 관련된 다른 질문 사항이 있을 수 있습니다. 예를 들어, 다음과 같은 경우입니다.

폼을 사용한 사용자 인증에 대해 좀 더 알아보고 싶습니다. 자세한 내용은 방법: 간단한 폼 인증 구현을 참조하십시오.
테마를 사용하여 마법사의 모양을 향상시키려고 합니다. 자세한 내용은 ASP.NET 테마 및 스킨 개요를 참조하십시오.
Wizard 컨트롤에 대한 간단한 설명을 보고 싶습니다. 자세한 내용은 Wizard 웹 서버 컨트롤 개요를 참조하십시오.

참고 항목

참조

Wizard 웹 서버 컨트롤 개요

다음을 통해 공유