연습: ASP.NET Wizard 컨트롤 고급 사용

아티클
10/22/2014

업데이트: 2007년 11월

ASP.NET Wizard 컨트롤을 사용하면 폼 작성 및 사용자 입력 수집과 관련된 많은 작업이 편리해집니다. 이 연습에서는 Wizard 컨트롤을 사용하여 사용자 주소 정보를 수집하는 폼을 만들고 전자 메일 업데이트를 선택하거나 선택 취소할 수 있게 한 다음 최종 확인 단계에서 데이터와 선택 사항을 다시 표시합니다. 이 연습에서 수행할 작업은 다음과 같습니다.

마법사 단계의 레이아웃 편집
사용자 지정 마법사 단계 추가
프로그래밍 방식으로 마법사 이벤트 캡처
사용자 선택을 기반으로 마법사 분기
완료 단계에서 사용자 데이터 표시

사전 요구 사항

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

Microsoft Visual Web Developer
.NET Framework

웹 사이트 만들기

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

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

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

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

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

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

페이지에 Wizard 컨트롤 추가

페이지에 Wizard 컨트롤을 추가하려면

디자인 뷰로 전환합니다.
도구 상자의 표준 그룹에서 Wizard 컨트롤을 페이지로 끌어 옵니다.

이름 및 주소 정보 수집

다음에는 사용자 데이터를 수집하고 전자 메일 주소를 확인하며 완료 단계에서 수집된 데이터를 표시하기 위해 마법사의 각 단계를 구성합니다.

먼저 사용자의 이름, 주소, 구/군/시, 시/도 및 우편 번호를 수집합니다.

첫 단계를 구성하려면

Wizard 컨트롤의 가장자리에 있는 핸들 중 하나를 끌어 컨트롤을 기본 크기의 두 배 정도로 확대합니다.
Wizard 컨트롤에서 밑줄이 그어진 텍스트 Step 1을 클릭한 다음 Wizard 컨트롤에서 Step 1 오른쪽의 편집 영역 내부를 클릭합니다.

이제 1단계의 표시 영역을 편집할 수 있습니다.
이름을 입력합니다.
도구 상자의 표준 그룹에서 TextBox 컨트롤을 텍스트 옆으로 끌어 옵니다.
속성 창에서 TextBox 컨트롤의 ID를 TextBox1에서 Name으로 변경합니다.
수집할 캡션과 TextBox 컨트롤(나중에 참조해야 하므로 컨트롤 이름을 지정해야 함)을 추가하여 프로세스를 반복합니다.
- Address
- City
- State
- PostalCode
파일을 저장합니다.

전자 메일 업데이트 선택 추가

이 연습 단계에서는 사용자가 전자 메일 업데이트 수신 여부를 선택할 수 있게 합니다.

전자 메일 업데이트 선택을 추가하려면

Step 2를 클릭합니다.
Step 2 오른쪽의 편집 가능한 영역을 클릭하고 전자 메일 업데이트를 받으시겠습니까?를 입력합니다.
질문 아래에 예를 입력합니다.
도구 상자의 표준 그룹에서 RadioButton 컨트롤을 단어 예 옆으로 끌어 옵니다.
아니요를 입력합니다.
도구 상자에서 다른 RadioButton을 단어 아니요 옆의 컨트롤로 끌어 옵니다.

전자 메일 주소를 수집하기 위한 사용자 지정 단계 추가

이 단원에서는 사용자의 전자 메일 주소를 수집하는 사용자 지정 단계를 마법사에 추가합니다. 사용자가 전자 메일 업데이트를 받지 않도록 결정하면 나중에 이 단계를 건너뛰는 코드를 추가합니다.

사용자의 전자 메일을 수집하기 위한 사용자 지정 단계 추가

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

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

Wizard 컨트롤에 새 단계가 표시됩니다.
새 단계를 클릭하여 편집 모드로 전환합니다.
편집 가능한 영역에 전자 메일 주소를 입력합니다.
도구 상자의 표준 그룹에서 TextBox 컨트롤을 단어 전자 메일 주소 옆의 컨트롤로 끌어 옵니다.
나중에 코드에서 참조해야 하므로 속성에서 TextBox 컨트롤의 ID를 EmailAddress로 변경합니다.

완료 단계 추가

이제 사용자 데이터를 다시 표시하는 완료 단계를 추가할 수 있습니다.

완료 단계를 추가하려면

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

WizardStep 컬렉션 편집기가 나타납니다.
추가 목록에서 WizardStep을 클릭합니다.

속성 영역에 새 단계의 속성이 표시됩니다.
속성 창에서 StepType을 Complete로 설정합니다.
확인을 클릭합니다.

Wizard 컨트롤이 새 단계를 추가합니다.
컨트롤의 새 단계를 클릭한 다음 새 단계 오른쪽의 편집 가능한 영역을 클릭합니다.
도구 상자의 표준 그룹에서 Label 컨트롤을 새 단계로 끌어 옵니다.
Enter 키를 눌러 새 줄을 만듭니다.
다음과 같은 6개 Label 컨트롤을 위해 7단계를 5번 더 반복합니다.
- 이름
- 주소
- 구/군/시
- 지역 또는 시/도
- 우편 번호
- 전자 메일 주소
파일을 저장합니다.

마법사를 실행하기 전에 완료 단계의 레이블을 처음 3개 마법사 단계에서 사용자가 제공한 값으로 채워야 합니다.

완료 단계에 대한 코드 추가

이 연습에서 완료 단계는 사용자 데이터를 표시합니다. 데이터가 표시되는지 확인하려면 프로그래밍 방식으로 단계의 레이블을 채웁니다. 데이터를 표시하려면 페이지의 Load 이벤트에 대한 코드를 작성합니다.

코드를 추가하려면

Default.aspx로 전환한 다음 디자인 뷰에서 디자인 화면을 두 번 클릭합니다.

페이지에 대한 코드 편집기가 열리고 기본 Page_Load 메서드를 만듭니다.

강조 표시된 다음 코드를 추가하여 완료 단계를 채웁니다.

Private Sub Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.Load
    Label1.Text = Name.Text
    Label2.Text = Address.Text
    Label3.Text = City.Text
    Label4.Text = State.Text
    Label5.Text = PostalCode.Text
    Label6.Text = EmailAddress.Text
End Sub

void Page_Load(object sender, EventArgs e)
{
    Label1.Text = Name.Text;
    Label2.Text = Address.Text;
    Label3.Text = City.Text;
    Label4.Text = State.Text;
    Label5.Text = PostalCode.Text;
    Label6.Text = EmailAddress.Text;
}

파일을 저장합니다.

Wizard 컨트롤 테스트

Wizard 컨트롤을 테스트하려면

디자인 뷰에 Default.aspx를 표시합니다.
컨트롤의 Wizard 작업 메뉴를 열고 단계 드롭다운 목록에서 Step 1을 선택합니다.

Ctrl+F5를 눌러 페이지를 실행합니다.

참고:
디자인 뷰에서 페이지를 실행하면 브라우저가 반드시 첫 단계가 아닌 현재 활성 마법사 단계에서 시작될 수 있습니다. 페이지를 시작하기 전에 속성 창에서 마법사의 ActiveStepIndex 속성이 0으로 설정되어 있는지 확인합니다.

이름 및 주소 정보를 입력합니다.
다음을 클릭합니다.
전자 메일 옵션 중 하나를 선택합니다.

이 연습에서는 나중에 전자 메일 옵션을 처리하는 코드를 작성합니다.
전자 메일 주소를 입력합니다.
마침을 클릭합니다.

입력한 데이터가 페이지에 표시됩니다.

다음 단원에서는 사용자가 전자 메일 주소를 제공하지 않도록 선택할 경우 전자 메일을 수집하는 세 번째 단계를 건너뛰기 위한 코드를 추가합니다.

전자 메일 단계를 건너뛰기 위한 코드 추가

마법사의 데이터 수집 및 레이아웃 부분이 완료되면 사용자가 전자 메일 업데이트를 받지 않으려는 경우 전자 메일 주소를 수집하는 단계를 건너뛸 수 있는 논리를 추가합니다. Wizard 컨트롤의 NextButtonClick 이벤트를 처리하여 이 작업을 수행합니다. 이벤트를 처리할 때 먼저 마법사가 현재 사용자의 옵션 선택 단계에 있는지 여부를 확인합니다. 이 단계에 있으면 선택되어 있는 RadioButton 컨트롤을 확인합니다. 사용자가 아니요를 선택하면 Wizard 컨트롤의 ActiveStepIndex 속성으로 이동하여 사용자의 전자 메일 주소를 요청하는 마법사 단계를 건너뜁니다.

세 번째 단계를 건너뛰는 코드를 추가하려면

Wizard 컨트롤을 클릭합니다. 속성 창에서 NextButtonClick 속성에 대해 Wizard1_NextButtonClick을 입력하고 Enter 키를 누릅니다.

코드 편집기 창이 열리고 코드 숨김 페이지가 표시됩니다.

올바른 단계를 검사하고 선택되어 있는 RadioButton 컨트롤을 확인하며 마법사의 3단계를 건너뛸지 여부를 확인하는 강조 표시된 다음 코드를 추가합니다.

Private Sub Wizard1_NextButtonClick( ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _     
   Handles Wizard1.NextButtonClick
   If Wizard1.ActiveStepIndex = 1 Then
       If RadioButton1.Checked Then
           ' Collect e-mail address.
           Wizard1.ActiveStepIndex = 2
       Else
           Wizard1.ActiveStepIndex = 3
       End If
   End If
End Sub

void Wizard1_NextButtonClick(object sender, 
    System.Web.UI.WebControls.WizardNavigationEventArgs e)
{
     if (Wizard1.ActiveStepIndex == 1)
     {
        if (RadioButton1.Checked)
            // Collect ee-mail address.
        {
           Wizard1.ActiveStepIndex = 2;
        } 
        else 
        {
           Wizard1.ActiveStepIndex = 3;
        }
     }
}

ActiveStepIndex 속성을 설정하면 마법사가 지정한 단계로 직접 이동합니다.

파일을 저장합니다.

단계를 건너뛰는 기능 테스트

프로그래밍 방식으로 마법사 단계 건너뛰기를 테스트하려면

디자인 뷰에 Default.aspx를 표시합니다.
컨트롤의 Wizard 작업 메뉴를 열고 단계 드롭다운 목록에서 Step 1을 선택합니다.
Ctrl+F5를 눌러 페이지를 실행합니다.
이름 및 주소 정보를 입력합니다.
다음을 클릭합니다.
Step 2에서 아니요 확인란을 선택합니다.
다음을 클릭합니다.

완료 단계가 표시됩니다.
브라우저의 뒤로 단추를 사용하여 첫 단계로 돌아가거나 브라우저를 닫고 Ctrl+F5를 눌러 페이지를 다시 실행합니다.
첫 단계에서 이름 및 주소 정보를 입력합니다.
다음을 클릭합니다.
Step 2에서 예 확인란을 선택합니다.
다음을 클릭합니다.
전자 메일 주소 수집 단계가 표시됩니다.
전자 메일 주소를 입력합니다.
다음을 클릭합니다.
완료 단계가 표시됩니다.

다음 단계

Wizard 컨트롤을 사용하면 사용자 데이터를 수집하는 폼을 쉽게 만들 수 있습니다. 여기서 설명한 내용 외에도 Wizard 컨트롤에 다른 모양과 느낌을 적용하는 방법 및 폼과 관련된 다른 질문이 있을 수 있습니다. 예를 들어, 다음과 같은 경우입니다.

Wizard 컨트롤의 기본 텍스트 레이블을 재정의합니다. 자세한 내용은 Wizard 웹 서버 컨트롤 개요를 참조하십시오.
Wizard 컨트롤에서 사용자 입력의 유효성을 검사합니다. 자세한 내용은 연습: Web Forms 페이지에서 사용자 입력 유효성 검사를 참조하십시오.
기본 Wizard 컨트롤 작업에 대해 자세히 알아 봅니다. 자세한 내용은 연습: 기본 ASP.NET Wizard 컨트롤 만들기를 참조하십시오.

참고 항목

참조

Wizard 웹 서버 컨트롤 개요

다음을 통해 공유