연습: Visual Studio에서 코드 분리를 사용한 기본 웹 페이지 만들기

Visual Studio 2010

ASP.NET 웹 페이지를 만들고 내부에 코드를 작성할 때는 보이는 요소(컨트롤 및 텍스트) 및 프로그래밍 코드 관리 방법에 대한 두 가지 모델 중에서 선택할 수 있습니다. 단일 파일 모델에서는 보이는 요소와 코드가 동일한 파일에 유지됩니다. "코드 분리"라는 대체 모델에서는 보이는 요소와 코드가 서로 다른 파일에 있으며 코드는 "코드 숨김"이라는 파일에 있습니다. 이 연습에서는 코드 분리를 사용하는 웹 페이지에 대해 설명합니다.

단일 파일 모델에 대해서는 연습: Visual Studio에서 기본 웹 페이지 만들기에서 설명합니다. 이 연습에서는 단일 파일 연습의 페이지와 동일한 기능을 가진 웹 페이지를 만드는 방법에 대해 설명하지만 코드 분리 사용에 중점을 둡니다.

단일 파일 페이지와 코드 분리 페이지의 선택 여부는 주로 개인적인 기호나 편리성에 따라 결정됩니다. Microsoft Visual Studio에서는 두 모델의 작업 방법이 비슷하며 편집기의 지원이 거의 동일합니다. 페이지를 실행할 때 두 모델의 성능은 같습니다. 코드 분리 페이지를 사용하면 두 페이지를 개별적으로 편집할 수 있기 때문에 프로그래머가 페이지 코드를 만드는 동안 웹 디자이너가 보다 효율적으로 페이지 레이아웃 작업을 할 수 있습니다.

이 연습에서 수행할 작업은 다음과 같습니다.

  • 코드 분리를 사용하는 ASP.NET 페이지 만들기

  • 컨트롤 추가

  • 이벤트 처리기 추가

  • Visual Studio 개발 서버를 사용하여 페이지 실행

이 연습을 완료하려면 다음과 같은 요건이 필요합니다.

  • Visual Studio 또는 Visual Web Developer Express

    참고참고

    Visual Studio를 사용하는 경우 이 연습에서는 Visual Studio를 처음 시작할 때 웹 개발 설정 컬렉션을 선택했다고 가정합니다. 자세한 내용은 방법: 웹 개발 환경 설정 선택을 참조하십시오.

이 연습 부분에서는 웹 사이트 프로젝트를 만든 후 새 페이지를 추가합니다. 또한 HTML 텍스트를 추가하고 웹 브라우저에서 페이지를 실행합니다.

연습: Visual Studio에서 기본 웹 페이지 만들기 의 단계를 수행했거나 다른 목적으로 Visual Studio에서 웹 사이트 프로젝트를 이미 만들었으면 해당 웹 사이트를 사용하여 이 연습의 뒷부분에 있는 "새 페이지 만들기"로 이동합니다. 그렇지 않으면 다음 단계를 따라 새 웹 사이트 프로젝트와 페이지를 만듭니다.

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

  1. Visual Studio 또는 Visual Web Developer Express를 엽니다.

  2. 파일 메뉴에서 새 웹 사이트를 클릭합니다.

    새 웹 사이트 대화 상자가 표시됩니다.

  3. 설치된 템플릿에서 Visual Basic 또는 VisualC#을 클릭한 다음 ASP.NET 웹 사이트를 선택합니다.

  4. 위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

    예를 들어, 폴더 이름 C:\WebSites를 입력합니다.

  5. 확인을 클릭합니다.

    Visual Studio에서 레이아웃(마스터 페이지, Default.aspx 및 About.aspx 콘텐츠 페이지, CSS 스타일시트), Ajax(클라이언트 스크립트 파일) 및 인증(ASP.NET 멤버 자격)을 위한 미리 빌드된 기능이 포함된 웹 사이트 프로젝트를 만듭니다.

새 페이지 만들기

새 웹 사이트 프로젝트를 만들면 Visual Studio에서 Default.aspx라는 새 페이지를 추가합니다. 기본적으로 Visual Studio에서는 코드 분리를 사용하여 페이지를 만듭니다.

코드 분리를 사용하는 페이지를 웹 사이트에 추가하려면

  1. Default.aspx 페이지를 닫습니다. 이렇게 하려면 내부에 파일 이름이 있는 탭을 마우스 오른쪽 단추로 클릭하고 닫기를 클릭합니다.

  2. 솔루션 탐색기에서 웹 사이트(예: C:\BasicWebSite)를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  3. 설치된 템플릿에서 Visual Basic 또는 VisualC#을 클릭한 다음 목록에서 Web Form을 선택합니다.

  4. 이름 상자에 WebPageSeparated를 입력합니다.

  5. 다른 파일에 코드 입력 확인란이 선택되어 있는지 확인합니다.

  6. 마스터 페이지 선택 확인란의 선택이 취소되어 있는지 확인합니다.

    이 연습에서는 웹 사이트 프로젝트에 포함된 마스터 페이지를 사용하지 않는 페이지를 만듭니다.

  7. 추가를 클릭합니다.

    Visual Studio에서 두 개의 파일을 만듭니다. 첫 번째 파일인 WebPageSeparated.aspx에는 페이지의 텍스트와 컨트롤이 포함되고 편집기에서 열립니다. 두 번째 파일인 WebPageSeparated.aspx.vb 또는 WebPageSeparated.aspx.cs(선택한 프로그래밍 언어에 따라 달라짐)는 코드 파일입니다. 두 파일은 솔루션 탐색기에서 WebPageSeparated.aspx 파일 옆의 더하기 기호(+)를 클릭하여 확인할 수 있습니다. 코드 파일이 생성되었지만 열려 있지는 않습니다. 나중에 이 연습에서 코드를 작성할 때 파일을 엽니다.

페이지에 HTML 추가

이 연습 단계에서는 WebPageSeparated.aspx 페이지에 일부 정적 HTML 텍스트를 추가합니다.

페이지에 텍스트를 추가하려면

  1. 문서 창 아래의 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.

    디자인 뷰에는 작업 중인 페이지가 WYSIWYG와 같은 방식으로 표시됩니다. 지금은 페이지에 텍스트나 컨트롤이 없으므로 페이지가 비어 있습니다.

  2. 삽입 포인터를 페이지에 이미 있는 div 요소에 둡니다.

  3. 코드 분리를 사용하여 Welcome to Visual Studio라고 입력합니다.

  4. 소스 뷰로 전환합니다.

    디자인 뷰에서 입력하여 만든 HTML을 볼 수 있습니다. 이 단계에서 페이지는 일반 HTML 페이지와 같이 나타납니다. 유일한 차이점은 페이지 맨 위에 있는 <%@ Page %> 지시문입니다.

이 연습 단계에서는 단추, 텍스트 상자 및 레이블 컨트롤을 페이지에 추가하고 단추의 Click 이벤트를 처리하는 코드를 작성합니다. 단추, 레이블, 텍스트 상자 및 기타 친숙한 컨트롤을 포함하는 서버 컨트롤은 ASP.NET 웹 페이지에 일반적인 폼 처리 기능을 제공합니다. 그러나 클라이언트가 아닌 서버에서 실행되는 코드를 사용하여 컨트롤을 프로그래밍할 수 있습니다.

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

  1. 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.

  2. 이전에 추가한 텍스트 뒤에 삽입 포인터를 둡니다.

  3. Enter 키를 여러 번 눌러 공간을 확보합니다.

  4. 도구 상자표준 탭에서 TextBox 컨트롤, Button 컨트롤 및 Label 컨트롤 모두를 페이지로 끌어옵니다.

  5. 텍스트 상자 앞에 삽입 포인터를 놓고 이름 입력:을 입력합니다.

    이 정적 HTML 텍스트는 TextBox 컨트롤의 캡션입니다. 같은 페이지에서 정적 HTML과 서버 컨트롤을 혼합하여 사용할 수 있습니다.

컨트롤 속성 설정

Visual Studio에서는 페이지의 컨트롤 속성을 설정하는 여러 가지 방법을 제공합니다. 이 연습 부분에서는 디자인 뷰와 소스 뷰에서 모두 속성 작업을 수행합니다.

컨트롤 속성을 설정하려면

  1. Button 컨트롤을 선택한 후 속성 창에서 Text 속성을 Display Name으로 설정합니다.

  2. 소스 뷰로 전환합니다.

    소스 뷰에는 Visual Studio에서 서버 컨트롤에 대해 만든 요소를 포함하여 페이지의 HTML 태그가 표시됩니다. 태그에 asp: 접두사가 사용되고 runat="server" 특성이 포함된다는 점을 제외하고는 HTML과 유사한 구문을 사용하여 컨트롤을 선언합니다.

    컨트롤 속성은 특성으로 선언됩니다. 예를 들어 1단계에서 단추의 Text 속성을 설정할 때 실제로는 컨트롤 태그의 Text 특성을 설정했습니다.

    모든 컨트롤은 runat="server" 특성도 포함된 form 요소 내부에 있습니다. 컨트롤 태그의 runat="server" 특성과 asp: 접두사는 페이지가 실행될 때 ASP.NET에서 처리되도록 컨트롤을 표시합니다.

Button 컨트롤 프로그래밍

이 연습에서는 사용자가 텍스트 상자에 입력하는 이름을 읽은 다음 Label 컨트롤에 표시하는 코드를 작성합니다.

기본 단추 이벤트 처리기를 추가하려면

  1. 디자인 뷰로 전환합니다.

  2. Button 컨트롤을 두 번 클릭합니다.

    Visual Studio에서 편집기의 다른 창에서 WebPageSeparated.aspx.vb 또는 WebPageSeparated.aspx.cs 파일을 엽니다. 이 파일에는 단추에 대한 기본 Click 이벤트 처리기가 있습니다.

  3. 강조 표시된 다음 코드를 추가하여 Click 이벤트 처리기를 완성합니다.

    protected void Button1_Click(object sender, System.EventArgs e)
    {    
        Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
    }
    

    입력에 따라 IntelliSense에서 상황에 맞는 선택 사항을 제공합니다. 이것은 단일 파일 페이지에서 코딩할 때의 동작과 같습니다.

이제 완전한 WebPageSeparated 페이지를 구성하는 두 개의 파일인 WebPageSeparated.aspx와 WebPageSeparated.aspx.vb 또는 WebPageSeparated.aspx.cs가 있습니다. 이 연습 단계에서는 이러한 파일의 구조와 관계를 살펴봅니다.

페이지와 코드 파일을 검사하려면

  1. 편집기 창 맨 위의 WebPageSeparated.aspx 탭을 클릭하여 페이지 파일로 전환합니다.

  2. 소스 뷰로 전환합니다.

    페이지 맨 위에는 이 페이지를 코드 파일에 바인딩하는 @ Page 지시문이 있습니다. 지시문은 다음 코드와 같습니다.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>
    

    편집기에서 줄 바꿈되지 않으며 언어 특성과 파일 확장명은 선택한 프로그래밍 언어와 일치합니다.

    페이지가 실행될 때 ASP.NET은 페이지를 나타내는 클래스 인스턴스를 동적으로 만듭니다. Inherits 특성은 .aspx 페이지가 파생된 코드 숨김 파일에서 정의된 클래스를 식별합니다. 기본적으로 Visual Studio에서는 이 페이지 이름을 코드 숨김 파일에 포함된 클래스 이름의 기본으로 사용합니다.

    CodeFile 특성은 이 페이지의 코드 파일을 식별합니다. 간단히 말해서 코드 숨김 파일에는 페이지의 이벤트 처리 코드가 들어 있습니다.

  3. WebPageSeparated.aspx.vb 또는 WebPageSeparated.aspx.cs 탭을 클릭하여 코드 파일로 전환합니다.

    코드 파일에는 클래스 정의와 유사한 코드가 들어 있습니다. 그러나 이 코드는 완전한 클래스 정의가 아니라 페이지를 구성하는 완전한 클래스의 일부만 포함된 "partial 클래스"입니다. 특히 코드 파일에 정의된 partial 클래스에는 이벤트 처리기와 작성한 기타 사용자 지정 코드가 포함되어 있습니다. 런타임 시 ASP.NET은 사용자 코드가 포함된 다른 partial 클래스를 생성합니다. 이 완전한 클래스는 페이지 렌더링에 사용되는 기본 클래스가 됩니다. 자세한 내용은 ASP.NET 페이지 클래스 개요를 참조하십시오.

이제 페이지를 테스트할 수 있습니다.

페이지를 실행하려면

  1. Ctrl+F5를 눌러 브라우저에서 페이지를 실행합니다.

    Visual Studio 개발 서버를 사용하여 페이지가 실행됩니다.

  2. 텍스트 상자에 이름을 입력하고 단추를 클릭합니다.

    입력한 이름이 Label 컨트롤에 표시됩니다.

  3. 브라우저에서 실행 중인 페이지의 소스를 봅니다.

  4. 브라우저를 닫습니다.

    이 페이지는 단일 파일 페이지와 정확히 같은 방식으로 실행됩니다. 연습: Visual Studio에서 기본 웹 페이지 만들기 의 단계에 따라 단일 파일 페이지를 만든 경우 두 페이지를 비교하여 같은 방식으로 실행됨을 확인할 수 있습니다.

이 연습에서는 코드 분리를 사용하는 웹 페이지를 만들고 편집하는 방법에 대해 설명했습니다. 페이지를 만들고 실행할 때는 단일 파일 페이지와 코드 분리를 사용하는 페이지 간에 큰 차이가 없습니다.

다른 기능을 확인할 수도 있습니다. 예를 들어, 다음과 같은 경우입니다.

표시: