ASP.NET MVC 4 기본 사항

웹 캠프 팀

웹 캠프 교육 키트 다운로드

이 Hands-On 랩은 MVC 및 Visual Studio를 사용하는 방법을 단계별로 소개하고 설명하는 자습서 애플리케이션인 MVC(모델 뷰 컨트롤러) 음악 저장소를 기반으로 ASP.NET 합니다. 랩 전체에서 이러한 기술을 함께 사용하는 단순하면서도 강력한 기능을 배울 수 있습니다. 간단한 애플리케이션으로 시작하여 MVC 4 웹 애플리케이션을 완벽하게 작동하는 ASP.NET 때까지 빌드합니다.

이 랩은 ASP.NET MVC 4에서 작동합니다.

자습서 애플리케이션의 ASP.NET MVC 3 버전을 탐색하려는 경우 MVC-Music-Store에서 찾을 수 있습니다.

이 Hands-On 랩에서는 개발자가 HTML 및 JavaScript와 같은 웹 개발 기술에 대한 경험이 있다고 가정합니다.

참고

모든 샘플 코드 및 코드 조각은 Microsoft-Web/WebCampTrainingKit 릴리스에서 사용할 수 있는 웹 캠프 교육 키트에 포함되어 있습니다. 이 랩과 관련된 프로젝트는 ASP.NET MVC 4 기본 사항에서 사용할 수 있습니다.

Music Store 애플리케이션

이 랩 전체에서 빌드될 Music Store 웹 애플리케이션은 쇼핑, 체크 아웃 및 관리의 세 가지 기본 부분으로 구성됩니다. 방문자는 장르별로 앨범을 찾아보고, 장바구니에 앨범을 추가하고, 선택을 검토하고, 마지막으로 체크 아웃을 진행하여 로그인하고 주문을 완료할 수 있습니다. 또한 스토어 관리자는 사용 가능한 앨범과 기본 속성을 관리할 수 있습니다.

Music Store 화면

Music Store 화면

ASP.NET MVC 4 Essentials

Music Store 애플리케이션은 애플리케이션을 세 가지 기본 구성 요소로 구분하는 아키텍처 패턴인 MVC(모델 뷰 컨트롤러)를 사용하여 빌드됩니다.

  • 모델: 모델 개체는 도메인 논리를 구현하는 애플리케이션의 부분입니다. 모델 개체는 종종 모델 상태를 검색하고 데이터베이스에 저장합니다.
  • 레이아웃: 뷰는 애플리케이션의 UI(사용자 인터페이스)를 표시하는 구성 요소입니다. 일반적으로 이 UI는 모델 데이터에서 만들어집니다. 예를 들어 텍스트 상자를 표시하는 Albums의 편집 보기와 Album 개체의 현재 상태를 기반으로 하는 드롭다운 목록이 있습니다.
  • 컨트롤러: 컨트롤러는 사용자 상호 작용을 처리하고, 모델을 조작하고, 궁극적으로 UI를 렌더링할 뷰를 선택하는 구성 요소입니다. MVC 애플리케이션에서 보기는 정보만 표시합니다. 컨트롤러가 사용자 입력 및 상호 작용을 처리하고 응답합니다.

MVC 패턴을 사용하면 애플리케이션의 다양한 측면(입력 논리, 비즈니스 논리 및 UI 논리)을 구분하는 애플리케이션을 만드는 동시에 이러한 요소 간에 느슨한 결합을 제공할 수 있습니다. 이러한 분리는 애플리케이션을 빌드할 때 복잡성을 관리하는 데 도움이 되므로 한 번에 구현의 한 측면에 집중할 수 있습니다. 또한 MVC 패턴을 사용하면 애플리케이션을 쉽게 테스트할 수 있으며 애플리케이션을 만들기 위한 TDD(테스트 기반 개발)의 사용을 장려합니다.

ASP.NET MVC 프레임워크는 ASP.NET MVC 기반 웹 애플리케이션을 만들기 위한 ASP.NET Web Forms 패턴에 대한 대안을 제공합니다. ASP.NET MVC 프레임워크는 웹 양식 기반 애플리케이션과 마찬가지로 master 페이지 및 멤버 자격 기반 인증과 같은 기존 ASP.NET 기능과 통합되어 핵심 .NET 프레임워크의 모든 기능을 얻을 수 있는 가볍고 테스트 가능한 프레젠테이션 프레임워크입니다. 이미 사용 중인 모든 라이브러리를 ASP.NET MVC 4에서도 사용할 수 있으므로 ASP.NET Web Forms 이미 익숙한 경우에 유용합니다.

또한 MVC 애플리케이션의 세 기본 구성 요소 간의 느슨한 결합은 병렬 개발을 촉진합니다. instance 경우 한 명의 개발자가 보기에서 작업할 수 있고, 두 번째 개발자는 컨트롤러 논리에서 작업할 수 있으며, 세 번째 개발자는 모델의 비즈니스 논리에 집중할 수 있습니다.

목표

이 Hands-On 랩에서는 다음 방법을 알아봅니다.

  • Music Store 애플리케이션 자습서에 따라 처음부터 ASP.NET MVC 애플리케이션 만들기
  • 사이트의 홈 페이지에 URL을 처리하고 기본 기능을 검색하는 컨트롤러 추가
  • 뷰를 추가하여 해당 스타일과 함께 표시되는 콘텐츠를 사용자 지정합니다.
  • 데이터 및 도메인 논리를 포함하고 관리하는 모델 클래스 추가
  • 모델 보기 패턴을 사용하여 컨트롤러 작업의 정보를 보기 템플릿으로 전달
  • 인터넷 애플리케이션에 대한 ASP.NET MVC 4 새 템플릿 살펴보기

사전 요구 사항

이 랩을 완료하려면 다음 항목이 있어야 합니다.

설치 프로그램

코드 조각 설치

편의를 위해 이 랩을 따라 관리할 대부분의 코드를 Visual Studio 코드 조각으로 사용할 수 있습니다. 코드 조각을 설치하려면 .\Source\Setup\CodeSnippets.vsi 파일을 실행합니다.

Visual Studio Code 코드 조각에 익숙하지 않고 사용 방법을 알아보려면 이 문서 "부록 C: 코드 조각 사용"의 부록을 참조할 수 있습니다.

연습

이 Hands-On 랩은 다음 연습으로 구성됩니다.

  1. 연습 1: MVC 웹 애플리케이션 프로젝트 ASP.NET MusicStore 만들기
  2. 연습 2: 컨트롤러 만들기
  3. 연습 3: 컨트롤러에 매개 변수 전달
  4. 연습 4: 보기 만들기
  5. 연습 5: 보기 모델 만들기
  6. 연습 6: 보기에서 매개 변수 사용
  7. 연습 7: MVC 4 새 템플릿을 ASP.NET 랩

참고

각 연습에는 연습을 완료한 후 가져와야 하는 결과 솔루션이 포함된 End 폴더가 함께 제공됩니다. 연습을 통해 작업하는 데 추가 도움이 필요한 경우 이 솔루션을 가이드로 사용할 수 있습니다.

이 랩을 완료하는 예상 시간: 60분.

연습 1: MVC 웹 애플리케이션 프로젝트 ASP.NET MusicStore 만들기

이 연습에서는 Visual Studio 2012 Express for Web과 기본 폴더 organization ASP.NET MVC 애플리케이션을 만드는 방법을 알아봅니다. 또한 새 컨트롤러를 추가하고 애플리케이션의 홈페이지에 간단한 문자열을 표시하는 방법을 알아봅니다.

작업 1 - ASP.NET MVC 웹 애플리케이션 프로젝트 만들기

  1. 이 작업에서는 MVC Visual Studio 템플릿을 사용하여 빈 ASP.NET MVC 애플리케이션 프로젝트를 만듭니다. 웹용 VS Express를 시작합니다.

  2. 파일 메뉴에서 새 프로젝트를 클릭합니다.

  3. 새 프로젝트 대화 상자에서 Visual C#, 웹 템플릿 목록 아래에 있는 ASP.NET MVC 4 애플리케이션 프로젝트 형식을 선택합니다.

  4. 이름을MvcMusicStore로 변경합니다.

  5. 이 연습의 원본 폴더에 있는 새 Begin 폴더 내에 솔루션의 위치를 설정합니다(예: [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin). 확인을 클릭합니다.

    새 프로젝트 만들기 대화 상자

    새 프로젝트 만들기 대화 상자

  6. 새 ASP.NET MVC 4 프로젝트 대화 상자에서 기본 템플릿을 선택하고 선택한 보기 엔진이 Razor인지 확인합니다. 확인을 클릭합니다.

    새 ASP.NET MVC 4 프로젝트 대화 상자

    새 ASP.NET MVC 4 프로젝트 대화 상자

작업 2 - 솔루션 구조 살펴보기

ASP.NET MVC 프레임워크에는 MVC 패턴을 지원하는 웹 애플리케이션을 만드는 데 도움이 되는 Visual Studio 프로젝트 템플릿이 포함되어 있습니다. 이 템플릿은 필요한 폴더, 항목 템플릿 및 구성 파일 항목을 사용하여 새 ASP.NET MVC 웹 애플리케이션을 만듭니다.

이 작업에서는 솔루션 구조를 검사하여 관련된 요소와 해당 관계를 이해합니다. 기본적으로 ASP.NET MVC 프레임워크는 "구성에 대한 규칙" 접근 방식을 사용하고 폴더 명명 규칙에 따라 몇 가지 기본 가정을 만들기 때문에 다음 폴더가 모든 ASP.NET MVC 애플리케이션에 포함됩니다.

  1. 프로젝트가 만들어지면 오른쪽의 솔루션 탐색기 만들어진 폴더 구조를 검토합니다.

    솔루션 탐색기 솔루션 탐색기

    솔루션 탐색기 MVC 폴더 구조 ASP.NET

    1. 컨트롤러. 이 폴더에는 컨트롤러 클래스가 포함됩니다. MVC 기반 애플리케이션에서 컨트롤러는 최종 사용자 상호 작용을 처리하고, 모델을 조작하고, 궁극적으로 UI를 렌더링할 뷰를 선택할 책임이 있습니다.

      참고

      MVC 프레임워크를 사용하려면 모든 컨트롤러의 이름이 "Controller"(예: HomeController, LoginController 또는 ProductController)로 끝나야 합니다.

    2. 모델. 이 폴더는 MVC 웹 애플리케이션의 애플리케이션 모델을 나타내는 클래스에 대해 제공됩니다. 여기에는 일반적으로 개체를 정의하는 코드와 데이터 저장소와 상호 작용하기 위한 논리가 포함됩니다. 실제 모델 개체의 일반적 위치는 이 폴더가 아니라 별도의 클래스 라이브러리입니다. 그러나 새 애플리케이션을 만들 때 클래스를 포함하고 개발 주기의 이후 시점에서 별도의 클래스 라이브러리로 이동할 수 있습니다.

    3. 보기. 이 폴더는 애플리케이션의 사용자 인터페이스 표시를 담당하는 구성 요소인 보기에 권장되는 위치입니다. 뷰에서는 .aspx, .ascx, .cshtml 및 를 사용합니다. 렌더링 뷰와 관련된 다른 파일 외에도 파일을 master. Views 폴더에는 각 컨트롤러에 대한 폴더가 포함됩니다. 폴더의 이름은 controller-name 접두사로 지정됩니다. 예를 들어 HomeController라는 컨트롤러가 있는 경우 Views 폴더에는 Home이라는 폴더가 포함됩니다. 기본적으로 ASP.NET MVC 프레임워크는 뷰를 로드할 때 Razor 뷰에 대해 Views\controllerName 폴더(Views[ControllerName][Action].aspx) 또는 (Views[ControllerName][Action].cshtml)에서 요청된 뷰 이름이 있는 .aspx 파일을 찾습니다.

      참고

      이전에 나열된 폴더 외에도 MVC 웹 애플리케이션은 Global.asax 파일을 사용하여 전역 URL 라우팅 기본값을 설정하고 Web.config 파일을 사용하여 애플리케이션을 구성합니다.

작업 3 - HomeController 추가

MVC 프레임워크를 사용하지 않는 ASP.NET 애플리케이션에서 사용자 상호 작용은 페이지를 중심으로 구성되고 해당 페이지에서 이벤트를 발생시키고 처리하는 데 대해 구성됩니다. 반면, ASP.NET MVC 애플리케이션과의 사용자 상호 작용은 컨트롤러 및 해당 작업 메서드를 중심으로 구성됩니다.

반면에 ASP.NET MVC 프레임워크는 URL을 컨트롤러라고 하는 클래스에 매핑합니다. 컨트롤러는 들어오는 요청을 처리하고, 사용자 입력 및 상호 작용을 처리하고, 적절한 애플리케이션 논리를 실행하고, 클라이언트로 다시 보낼 응답을 결정합니다(HTML 표시, 파일 다운로드, 다른 URL로 리디렉션 등). HTML을 표시하는 경우 컨트롤러 클래스는 일반적으로 별도의 뷰 구성 요소를 호출하여 요청에 대한 HTML 태그를 생성합니다. MVC 애플리케이션에서 보기는 정보만 표시합니다. 컨트롤러가 사용자 입력 및 상호 작용을 처리하고 응답합니다.

이 작업에서는 URL을 처리할 Controller 클래스를 Music Store 사이트의 홈 페이지에 추가합니다.

  1. 솔루션 탐색기 내에서 Controllers 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 컨트롤러 명령을 선택합니다.

    컨트롤러 명령 추가

    컨트롤러 추가 명령

  2. 컨트롤러 추가 대화 상자가 나타납니다. 컨트롤러 이름을 HomeController 로 지정하고 추가를 누릅니다.

    컨트롤러를 만드는 데 사용할 수 있는 옵션이 있는 컨트롤러 추가 대화 상자의 스크린샷

    컨트롤러 추가 대화 상자

  3. HomeController.cs 파일은 Controllers 폴더에 만들어집니다. HomeController가 인덱스 작업에서 문자열을 반환하도록 하려면 Index 메서드를 다음 코드로 바꿉다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex1 HomeController 인덱스)

    public string Index()
    {
        return "Hello from Home";
    }
    

작업 4 - 애플리케이션 실행

이 작업에서는 웹 브라우저에서 애플리케이션을 사용해 봅니다.

  1. F5 키를 눌러 애플리케이션을 실행합니다. 프로젝트가 컴파일되고 로컬 IIS 웹 서버가 시작됩니다. 로컬 IIS 웹 서버는 웹 서버의 URL을 가리키는 웹 브라우저를 자동으로 엽니다.

    웹 브라우저에서 실행되는 애플리케이션

    웹 브라우저에서 실행되는 애플리케이션

    참고

    로컬 IIS 웹 서버는 임의의 무료 포트 번호로 웹 사이트를 실행합니다. 위의 그림에서 사이트는 에서 http://localhost:50103/실행되므로 포트 50103을 사용합니다. 포트 번호는 다를 수 있습니다.

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

연습 2: 컨트롤러 만들기

이 연습에서는 컨트롤러를 업데이트하여 Music Store 애플리케이션의 간단한 기능을 구현하는 방법을 알아봅니다. 해당 컨트롤러는 다음 특정 요청을 각각 처리하는 작업 메서드를 정의합니다.

  • Music Store의 음악 장르 목록 페이지
  • 특정 장르의 모든 음악 앨범을 나열하는 찾아보기 페이지
  • 특정 음악 앨범에 대한 정보를 보여 주는 세부 정보 페이지

이 연습의 scope 해당 작업은 단순히 지금까지 문자열을 반환합니다.

작업 1 - 새 StoreController 클래스 추가

이 작업에서는 새 컨트롤러를 추가합니다.

  1. 아직 열리지 않은 경우 웹 2012용 VS Express를 시작합니다.

  2. 파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex02-CreatingAController\Begin으로 이동하고 Begin.sln 을 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 진행할 수 있습니다.

    1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.

    2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.

    3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.

      참고

      NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 따라서 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.

  3. 새 컨트롤러를 추가합니다. 이렇게 하려면 솔루션 탐색기 내의 Controllers 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 컨트롤러 명령을 선택합니다. 컨트롤러 이름을StoreController로 변경하고 추가를 클릭합니다.

    컨트롤러 이름을 입력하기 위한 막대와 스캐폴딩 옵션을 선택하는 옵션이 있는 컨트롤러 추가 대화 상자 스크린샷

    컨트롤러 추가 대화 상자

작업 2 - StoreController의 작업 수정

이 작업에서는 작업이라고 하는 컨트롤러 메서드를 수정합니다. 작업은 URL 요청을 처리하고 URL을 호출한 브라우저 또는 사용자에게 다시 전송해야 하는 콘텐츠를 결정합니다.

  1. StoreController 클래스에는 Index 메서드가 이미 있습니다. 이 랩의 뒷부분에서 음악 저장소의 모든 장르를 나열하는 페이지를 구현합니다. 지금은 Index 메서드를 "Hello from Store.Index ()"라는 문자열을 반환하는 다음 코드로 바꿉니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex2 StoreController 인덱스)

    public string Index()
    {
      return "Hello from Store.Index()";
    }
    
  2. 찾아보기세부 정보 메서드를 추가합니다. 이렇게 하려면 StoreController에 다음 코드를 추가합니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex2 StoreController BrowseAndDetails)

    // GET: /Store/Browse
    public string Browse()
    {
      return "Hello from Store.Browse()";
    }
    
    // GET: /Store/Details  
    public string Details()
    {
      return "Hello from Store.Details()";
    }
    

작업 3 - 애플리케이션 실행

이 작업에서는 웹 브라우저에서 애플리케이션을 사용해 봅니다.

  1. F5 키를 눌러 애플리케이션을 실행합니다.

  2. 프로젝트는 페이지에서 시작됩니다. URL을 변경하여 각 작업의 구현을 확인합니다.

    1. /Store. "Store.Index()에서 Hello"가 표시됩니다.

    2. /Store/Browse. "Store.Browse()에서 Hello"가 표시됩니다.

    3. /Store/Details. "Hello from Store.Details()"가 표시됩니다.

      StoreBrowse 검색

      찾아보기 /Store/찾아보기

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

연습 3: 컨트롤러에 매개 변수 전달

지금까지 컨트롤러에서 상수 문자열을 반환했습니다. 이 연습에서는 URL 및 쿼리 문자열을 사용하여 컨트롤러에 매개 변수를 전달한 다음, 메서드 동작이 브라우저에 텍스트로 응답하도록 하는 방법을 알아봅니다.

작업 1 - StoreController에 장르 매개 변수 추가

이 작업에서는 querystring을 사용하여 StoreController찾아보기 작업 메서드에 매개 변수를 보냅니다.

  1. 아직 열리지 않은 경우 웹용 VS Express를 시작합니다.

  2. 파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex03-PassingParametersToAController\Begin으로 이동하고 Begin.sln 을 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 진행할 수 있습니다.

    1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.

    2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.

    3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.

      참고

      NuGet을 사용할 때의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.

  3. StoreController 클래스를 엽니다. 이렇게 하려면 솔루션 탐색기Controllers 폴더를 확장하고 StoreController.cs를 두 번 클릭합니다.

  4. 특정 장르에 대해 요청할 문자열 매개 변수를 추가하여 Browse 메서드를 변경합니다. ASP.NET MVC는 호출될 때 genre 라는 모든 querystring 또는 form post 매개 변수를 이 작업 메서드에 자동으로 전달합니다. 이렇게 하려면 Browse 메서드를 다음 코드로 바꿉다.

    (코드 조각 - MVC 4 기본 사항 ASP.NET - Ex3 StoreController BrowseMethod)

    // GET: /Store/Browse?genre=Disco   
    public string Browse(string genre)
    {
      string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);
    
      return message;
    }
    

참고

HttpUtility.HtmlEncode 유틸리티 메서드를 사용하여 사용자가 /Store/Browse와 같은 링크를 사용하여 보기에 Javascript를 삽입하지 못하도록 합니다. Genre=<script>window.location=''<http://hackersite.com/script>.

자세한 내용은 이 msdn 문서를 참조하세요.

작업 2 - 애플리케이션 실행

이 작업에서는 웹 브라우저에서 애플리케이션을 시도하고 genre 매개 변수를 사용합니다.

  1. F5 키를 눌러 애플리케이션을 실행합니다.

  2. 프로젝트는 페이지에서 시작됩니다. URL을 /Store/Browse로 변경하세요. Genre=Disco - 작업이 genre 매개 변수를 받는지 확인합니다.

    스토어 브라우징BrowseGenre=Disco

    찾아보기 /Store/Browse? Genre=Disco

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

작업 3 - URL에 포함된 ID 매개 변수 추가

이 작업에서는 URL을 사용하여 Id 매개 변수를 StoreControllerDetails 작업 메서드에 전달합니다. ASP.NET MVC의 기본 라우팅 규칙은 작업 메서드 이름 뒤의 URL 세그먼트를 ID라는 매개 변수로 처리하는 것입니다. 작업 메서드에 ID라는 매개 변수가 있는 경우 ASP.NET MVC는 자동으로 URL 세그먼트를 매개 변수로 전달합니다. URL 저장소/세부 정보/5에서 ID5로 해석됩니다.

  1. Id라는 int 매개 변수를 추가하여 StoreControllerDetails 메서드를 변경합니다. 이렇게 하려면 Details 메서드를 다음 코드로 바꿉 있습니다.

    (코드 조각 - MVC 4 기본 사항 ASP.NET - Ex3 StoreController DetailsMethod)

    // GET: /Store/Details/5    
    public string Details(int id)
    {
      string message = "Store.Details, ID = " + id;
    
      return message;
    }
    

작업 4 - 애플리케이션 실행

이 작업에서는 웹 브라우저에서 애플리케이션을 시도하고 Id 매개 변수를 사용합니다.

  1. F5 키를 눌러 애플리케이션을 실행합니다.

  2. 프로젝트는 페이지에서 시작됩니다. URL을 /Store/Details/5 로 변경하여 작업이 id 매개 변수를 받는지 확인합니다.

    검색 StoreDetails5

    찾아보기 /Store/Details/5

연습 4: 보기 만들기

지금까지 컨트롤러 작업에서 문자열을 반환했습니다. 컨트롤러의 작동 방식을 이해하는 유용한 방법이지만 실제 웹 애플리케이션을 빌드하는 방법은 아닙니다. 보기는 템플릿 파일을 사용하여 브라우저에 HTML을 다시 생성하는 더 나은 방법을 제공하는 구성 요소입니다.

이 연습에서는 레이아웃 master 페이지를 추가하여 일반적인 HTML 콘텐츠에 대한 템플릿, 사이트의 모양과 느낌을 향상시키는 StyleSheet, 마지막으로 HomeController가 HTML을 반환할 수 있도록 하는 보기 템플릿을 설정하는 방법을 알아봅니다.

작업 1 - 파일 _layout.cshtml 수정

~/Views/Shared/_layout.cshtml 파일을 사용하면 전체 웹 사이트에서 공통 HTML을 사용할 템플릿을 설정할 수 있습니다. 이 작업에서는 홈 페이지 및 스토어 영역에 대한 링크가 있는 공통 머리글이 있는 레이아웃 master 페이지를 추가합니다.

  1. 아직 열리지 않은 경우 웹용 VS Express를 시작합니다.

  2. 파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex04-CreatingAView\Begin으로 이동하여 Begin.sln 을 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 진행할 수 있습니다.

    1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.

    2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.

    3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.

      참고

      NuGet을 사용할 때의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.

  3. _layout.cshtml 파일에는 사이트의 모든 페이지에 대한 HTML 컨테이너 레이아웃이 포함되어 있습니다. 여기에는 HTML 응답에 <대한 html> 요소와 <헤드><본문> 요소가 포함됩니다. HTML 본문 내의 @RenderBody()는 템플릿을 볼 때 동적 콘텐츠로 채울 수 있는 영역을 식별합니다. (C#)

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
         @Styles.Render("~/Content/css")
         @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
         @RenderBody()
    
         @Scripts.Render("~/bundles/jquery")
         @RenderSection("scripts", required: false)
    </body>
    </html>
    
  4. 사이트의 모든 페이지에서 홈페이지 및 스토어 영역에 대한 링크가 있는 공통 헤더를 추가합니다. 이렇게 하려면 본문> 아래에 <다음 코드를 추가합니다. (C#)

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
         @Styles.Render("~/Content/css")
         @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
         <header>
              <div class="content-wrapper">
                    <div class="float-left">
                         <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                         <nav>
                              <ul id="menu">
                                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                    <li>@Html.ActionLink("Store", "Index", "Store")</li>
                              </ul>
                         </nav>
                    </div>
              </div>
         </header>
         @RenderBody()
    
         @Scripts.Render("~/bundles/jquery")
         @RenderSection("scripts", required: false)
    </body>
    </html>
    
  5. 각 페이지의 본문 섹션을 렌더링하는 div를 포함합니다. @RenderBody()를 강조 표시된 다음 코드(C#)로 바꿉니다.

    ...
    <body>
         <header>
              <div class="content-wrapper">
                    <div class="float-left">
                         <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                         <nav>
                              <ul id="menu">
                                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                    <li>@Html.ActionLink("Store", "Index", "Store")</li>
                              </ul>
                         </nav>
                    </div>
              </div>
         </header>
         <div id="body">
              @RenderSection("featured", required: false)
              <section class="content-wrapper main-content clear-fix">
                    @RenderBody()
              </section>
         </div>
         ...
    </body>
    </html>
    

    참고

    알고 계셨나요? Visual Studio 2012에는 HTML, 코드 파일 등에서 일반적으로 사용되는 코드를 쉽게 추가할 수 있는 코드 조각이 있습니다. div>를 입력하고 TAB을< 두 번 눌러 완전한 div 태그를 삽입하여 사용해 보세요.

작업 2 - CSS 스타일시트 추가

빈 프로젝트 템플릿에는 기본 양식 및 유효성 검사 메시지를 표시하는 데 사용되는 스타일만 포함하는 매우 간소화된 CSS 파일이 포함되어 있습니다. 사이트의 모양과 느낌을 향상시키기 위해 추가 CSS 및 이미지(디자이너에서 잠재적으로 제공)를 사용합니다.

이 작업에서는 CSS 스타일시트를 추가하여 사이트의 스타일을 정의합니다.

  1. CSS 파일 및 이미지는 이 랩의 Source\Assets\Content 폴더에 포함됩니다. 애플리케이션에 추가하려면 아래와 같이 Windows Explorer 창의 콘텐츠를 웹용 Visual Studio Express 솔루션 탐색기 끌어다 놓습니다.

    스타일 콘텐츠 끌어서 스타일

    스타일 내용 끌기

  2. Site.css 파일 및 일부 기존 이미지를 대체할지 묻는 경고 대화 상자가 나타납니다. 모든 항목에 적용을 선택하고 예를 클릭합니다.

작업 3 - 보기 템플릿 추가

이 작업에서는 보기 템플릿을 추가하여 레이아웃 master 페이지 및 이 연습에 추가된 CSS를 사용하는 HTML 응답을 생성합니다.

  1. 사이트의 홈페이지를 탐색할 때 보기 템플릿을 사용하려면 먼저 문자열을 반환하는 대신 HomeController Index 메서드가 View를 반환함을 나타내야 합니다. HomeController 클래스를 열고 ActionResult를 반환하도록 Index 메서드를 변경하고 View()를 반환하도록 합니다.

    (코드 조각 - MVC 4 기본 사항 ASP.NET - Ex4 HomeController 인덱스)

    public class HomeController : Controller
    {
        //
        // GET: /Home/
    
        public ActionResult Index()
        {
            return this.View();
        }
    }
    
  2. 이제 적절한 보기 템플릿을 추가해야 합니다. 이렇게 하려면 인덱스 작업 메서드 내부를 마우스 오른쪽 단추로 클릭하고 보기 추가를 선택합니다. 그러면 보기 추가 대화 상자가 표시됩니다.

    Index 메서드 내에서 View 추가 Index 메서드

    Index 메서드 내에서 View 추가

  3. 보기 추가 대화 상자가 나타나면 보기 템플릿 파일이 생성됩니다. 기본적으로 이 대화 상자는 뷰 템플릿을 사용할 작업 메서드와 일치하게 보기 템플릿의 이름을 미리 채웁니다. HomeController 내의 인덱스 작업 메서드 내에서 보기 추가 상황에 맞는 메뉴를 사용했기 때문에 보기 추가 대화 상자에는 인덱스가 기본 보기 이름으로 있습니다. 추가를 클릭합니다.

    보기 추가 대화 상자 스크린샷 보기 템플릿을 추가하기 위한 특정 옵션이 있는 대화 상자가 표시됩니다.

    보기 추가 대화 상자

  4. Visual Studio는 Views\Home 폴더 내에 Index.cshtml 보기 템플릿을 생성한 다음 엽니다.

    만든 홈 인덱스 보기

    홈 인덱스 보기 만들기

    참고

    Index.cshtml 파일의 이름과 위치는 관련이 있으며 기본 ASP.NET MVC 명명 규칙을 따릅니다.

    \Views*Home* 폴더는 컨트롤러 이름( 컨트롤러)과 일치합니다. 보기 템플릿 이름(인덱스)은 보기를 표시할 컨트롤러 작업 메서드와 일치합니다.

    이러한 방식으로 ASP.NET MVC는 이 명명 규칙을 사용하여 보기를 반환할 때 보기 템플릿의 이름이나 위치를 명시적으로 지정하지 않아도 됩니다.

  5. 생성된 보기 템플릿은 이전에 정의된 _layout.cshtml 템플릿을 기반으로 합니다. ViewBag.Title 속성을 으로 업데이트하고 아래 코드와 같이 기본 콘텐츠를 홈 페이지로 변경합니다.

    @{
        ViewBag.Title = "Home";
    }
    
    <h2>This is the Home Page</h2>
    
  6. 솔루션 탐색기 MvcMusicStore 프로젝트를 선택하고 F5 키를 눌러 애플리케이션을 실행합니다.

작업 4: 확인

이전 연습의 모든 단계를 올바르게 수행했는지 확인하려면 다음과 같이 진행합니다.

브라우저에서 애플리케이션이 열리면 다음 사항에 유의해야 합니다.

  1. HomeController의 Index 작업 메서드는 View 템플릿이 표준 명명 규칙을 따랐기 때문에 반환 View()라는 코드에도 불구하고 \Views\Home\Index.cshtml View 템플릿을 찾아서 표시했습니다.

  2. 홈페이지에는 \Views\Home\Index.cshtml 보기 템플릿 내에 정의된 환영 메시지가 표시됩니다.

  3. 홈페이지는 _layout.cshtml 템플릿을 사용하므로 환영 메시지가 표준 사이트 HTML 레이아웃 내에 포함됩니다.

    정의된 LayoutPage를 사용하여 홈 인덱스 보기 및 지정

    정의된 LayoutPage 및 스타일을 사용하는 홈 인덱스 보기

연습 5: 보기 모델 만들기

지금까지 보기가 하드 코딩된 HTML을 표시하도록 만들었지만 동적 웹 애플리케이션을 만들려면 보기 템플릿이 컨트롤러에서 정보를 받아야 합니다. 이러한 용도로 사용되는 일반적인 기술 중 하나는 ViewModel 패턴입니다. 이를 통해 컨트롤러는 적절한 HTML 응답을 생성하는 데 필요한 모든 정보를 패키지할 수 있습니다.

이 연습에서는 ViewModel 클래스를 만들고 필요한 속성(스토어의 장르 수 및 해당 장르 목록)을 추가하는 방법을 알아봅니다. 또한 만든 ViewModel을 사용하도록 StoreController를 업데이트하고 마지막으로 페이지에 언급된 속성을 표시하는 새 보기 템플릿을 만듭니다.

작업 1 - ViewModel 클래스 만들기

이 작업에서는 Store 장르 목록 시나리오를 구현하는 ViewModel 클래스를 만듭니다.

  1. 아직 열리지 않은 경우 웹용 VS Express를 시작합니다.

  2. 파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex05-CreatingAViewModel\Begin으로 이동하고 Begin.sln 을 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 진행할 수 있습니다.

    1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.

    2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.

    3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.

      참고

      NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 따라서 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.

  3. ViewModel을 저장할 ViewModels 폴더를 만듭니다. 이렇게 하려면 최상위 MvcMusicStore 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가 를 선택한 다음 새 폴더를 선택합니다.

    새 폴더 추가

    새 폴더 추가

  4. 폴더 이름을 ViewModels로 지정합니다.

    솔루션 탐색기 솔루션 탐색기

    솔루션 탐색기 ViewModels 폴더

  5. ViewModel 클래스를 만듭니다. 이렇게 하려면 최근에 만든 ViewModels 폴더를 마우스 오른쪽 단추로 클릭하고 추가 를 선택한 다음 새 항목을 선택합니다. 코드에서 클래스 항목을 선택하고 파일 이름을 StoreIndexViewModel.cs로 지정한 다음 추가를 클릭합니다.

    새 클래스 추가

    새 클래스 추가

    StoreIndexViewModel 클래스 만들기

    StoreIndexViewModel 클래스 만들기

작업 2 - ViewModel 클래스에 속성 추가

예상되는 HTML 응답을 생성하기 위해 StoreController에서 보기 템플릿으로 전달해야 하는 두 가지 매개 변수, 즉 스토어의 장르 수와 해당 장르 목록이 있습니다.

이 작업에서는 이러한 2개의 속성을 StoreIndexViewModel 클래스인 NumberOfGenres (정수) 및 장르 (문자열 목록)에 추가합니다.

  1. StoreIndexViewModel 클래스에 NumberOfGenresGenres 속성을 추가합니다. 이렇게 하려면 클래스 정의에 다음 2줄을 추가합니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex5 StoreIndexViewModel 속성)

    public class StoreIndexViewModel
    {
        public int NumberOfGenres { get; set; }
    
        public List<string> Genres { get; set; }
    }
    

참고

{ get; set; } 표기법은 C#의 자동 구현 속성 기능을 사용합니다. 지원 필드를 선언할 필요 없이 속성의 이점을 제공합니다.

작업 3 - StoreIndexViewModel을 사용하도록 StoreController 업데이트

StoreIndexViewModel 클래스는 응답을 생성하기 위해 StoreControllerIndex 메서드에서 View 템플릿으로 전달하는 데 필요한 정보를 캡슐화합니다.

이 작업에서는 StoreIndexViewModel을 사용하도록 StoreController를 업데이트합니다.

  1. StoreController 클래스를 엽니다.

    Opening StoreController 클래스

    StoreController 클래스 열기

  2. StoreController에서 StoreIndexViewModel 클래스를 사용하려면 StoreController 코드의 맨 위에 다음 네임스페이스를 추가합니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - ViewModels를 사용하는 Ex5 StoreIndexViewModel)

    using MvcMusicStore.ViewModels;
    
  3. StoreIndexViewModel 개체를 만들고 채우도록 StoreControllerIndex 작업 메서드를 변경한 다음, View 템플릿에 전달하여 HTML 응답을 생성합니다.

    참고

    랩 "ASP.NET MVC 모델 및 데이터 액세스"에서는 데이터베이스에서 저장소 장르 목록을 검색하는 코드를 작성합니다. 다음 코드에서는 StoreIndexViewModel을 채우는 더미 데이터 장르 목록을 만듭니다.

    StoreIndexViewModel 개체를 만들고 설정한 후에는 View 메서드에 인수로 전달됩니다. 이는 보기 템플릿이 해당 개체를 사용하여 HTML 응답을 생성한다는 것을 나타냅니다.

  4. Index 메서드를 다음 코드로 바꿉다.

    (코드 조각 - MVC 4 기본 사항 ASP.NET - Ex5 StoreController Index 메서드)

    public ActionResult Index()
    {
        // Create a list of genres
        var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};
    
        // Create our view model
        var viewModel = new StoreIndexViewModel { 
            NumberOfGenres = genres.Count(),
            Genres = genres
        };
    
        return this.View(viewModel);
    }
    

참고

C#에 익숙하지 않은 경우 var 을 사용하면 viewModel 변수가 늦게 바인딩된다고 가정할 수 있습니다. 정답이 아닙니다. C# 컴파일러는 변수에 할당한 내용에 따라 형식 유추를 사용하여 viewModelStoreIndexViewModel 형식인지 확인합니다. 또한 로컬 viewModel 변수를 StoreIndexViewModel 형식으로 컴파일하면 컴파일 시간 검사 및 Visual Studio 코드 편집기가 지원됩니다.

작업 4 - StoreIndexViewModel을 사용하는 보기 템플릿 만들기

이 작업에서는 Controller에서 전달된 StoreIndexViewModel 개체를 사용하여 장르 목록을 표시하는 View 템플릿을 만듭니다.

  1. 새 보기 템플릿을 만들기 전에 보기 추가 대화 상자에서 StoreIndexViewModel 클래스에 대해 알 수 있도록 프로젝트를 빌드해 보겠습니다. 빌드 메뉴 항목을 선택한 다음 , 빌드MvcMusicStore를 선택하여 프로젝트를 빌드합니다.

    프로젝트 빌드

    프로젝트 빌드

  2. 새 보기 템플릿을 만듭니다. 이렇게 하려면 Index 메서드 내부를 마우스 오른쪽 단추로 클릭하고 보기 추가를 선택합니다.

    뷰 추가

    보기 추가

  3. 보기 추가 대화 상자StoreController에서 호출되었으므로 기본적으로 \Views\Store\Index.cshtml 파일에 보기 템플릿을 추가합니다. 강력한 형식의 보기 만들기 확인란을 선택한 다음, 모델 클래스StoreIndexViewModel을 선택합니다. 또한 선택한 보기 엔진이 Razor인지 확인합니다. 추가를 클릭합니다.

    사용 가능한 옵션과 강력한 형식의 보기 모델 클래스를 만들기 위한 선택을 보여 주는 보기 추가 대화 상자의 스크린샷.

    보기 추가 대화 상자

    \Views\Store\Index.cshtml View 템플릿 파일이 만들어지고 열립니다. 마지막 단계에서 보기 추가 대화 상자에 제공된 정보에 따라 보기 템플릿은 HTML 응답을 생성하는 데 사용할 데이터로 StoreIndexViewModel instance 예상합니다. 템플릿이 C#의 를 ViewPage<musicstore.viewmodels.storeindexviewmodel> 상속한다는 것을 알 수 있습니다.

작업 5 - 보기 템플릿 업데이트

이 작업에서는 마지막 작업에서 만든 보기 템플릿을 업데이트하여 페이지 내의 장르 수와 해당 이름을 검색합니다.

참고

@구문("코드 너겟"이라고도 함)을 사용하여 보기 템플릿 내에서 코드를 실행합니다.

  1. Index.cshtml 파일의 Store 폴더 내에서 해당 코드를 다음으로 바꿉니다.
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>
  1. StoreIndexViewModel의 장르 목록을 반복하고 foreach 루프를 사용하여 HTML <ul> 목록을 만듭니다. (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
@foreach (string genreName in Model.Genres)
{
    <li>
        @genreName
    </li>
}
</ul>
  1. F5 키를 눌러 애플리케이션을 실행하고 /Store를 찾습니다. StoreController에서 View 템플릿으로 StoreIndexViewModel 개체에 전달된 장르 목록이 표시됩니다.

장르 목록을 표시하는 보기 장르

장르 목록을 표시하는 보기

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

연습 6: 보기에서 매개 변수 사용

연습 3에서는 컨트롤러에 매개 변수를 전달하는 방법을 알아보았습니다. 이 연습에서는 보기 템플릿에서 이러한 매개 변수를 사용하는 방법을 알아봅니다. 이를 위해 먼저 데이터 및 도메인 논리를 관리하는 데 도움이 되는 모델 클래스를 소개합니다. 또한 URL 경로 인코딩과 같은 사항을 걱정하지 않고 ASP.NET MVC 애플리케이션 내의 페이지에 대한 링크를 만드는 방법을 알아봅니다.

작업 1 - 모델 클래스 추가

컨트롤러에서 보기로 정보를 전달하기 위해 만들어진 ViewModels와 달리 모델 클래스는 데이터 및 도메인 논리를 포함하고 관리하도록 빌드됩니다. 이 작업에서는 장르앨범이라는 개념을 나타내는 두 가지 모델 클래스를 추가합니다.

  1. 아직 열리지 않은 경우 웹용 VS Express를 시작합니다.

  2. 파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex06-UsingParametersInView\Begin으로 이동하고 Begin.sln 을 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 진행할 수 있습니다.

    1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.

    2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.

    3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.

      참고

      NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 따라서 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.

  3. 장르 모델 클래스를 추가합니다. 이렇게 하려면 솔루션 탐색기 Models 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 새 항목 옵션을 선택합니다. 코드에서 클래스 항목을 선택하고 파일 이름을 Genre.cs로 지정한 다음 추가를 클릭합니다.

    클래스 추가 클래스 추가

    새 항목 추가

    장르 모델 클래스 추가

    장르 모델 클래스 추가

  4. Genre 클래스에 Name 속성을 추가합니다. 이렇게 하려면 다음 코드를 추가합니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex6 장르)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Genre
        {
            public string Name { get; set; }
        }
    }
    
  5. 이전과 동일한 절차에 따라 Album 클래스를 추가합니다. 이렇게 하려면 솔루션 탐색기 Models 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 새 항목 옵션을 선택합니다. 코드에서 클래스 항목을 선택하고 파일 이름을 Album.cs로 지정한 다음 추가를 클릭합니다.

  6. Album 클래스에 두 가지 속성 인 Genre 및 Title을 추가 합니다. 이렇게 하려면 다음 코드를 추가합니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex6 앨범)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Album
        {
            public string Title { get; set; }
    
            public Genre Genre { get; set; }
        }
    }
    

작업 2 - StoreBrowseViewModel 추가

이 작업에서는 StoreBrowseViewModel 을 사용하여 선택한 장르와 일치하는 앨범을 표시합니다. 이 작업에서는 이 클래스를 만든 다음 장르앨범 목록을 처리하는 두 개의 속성을 추가합니다.

  1. StoreBrowseViewModel 클래스를 추가합니다. 이렇게 하려면 솔루션 탐색기 ViewModels 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 새 항목 옵션을 선택합니다. 코드에서 클래스 항목을 선택하고 파일 이름을 StoreBrowseViewModel.cs로 지정한 다음 추가를 클릭합니다.

  2. StoreBrowseViewModel 클래스의 Models에 대한 참조를 추가합니다. 이렇게 하려면 네임스페이스를 사용하여 다음을 추가합니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex6 UsingModel)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
        }
    }
    
  3. StoreBrowseViewModel 클래스에 두 가지 속성인 GenreAlbums를 추가합니다. 이렇게 하려면 다음 코드를 추가합니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex6 ModelProperties)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
            public Genre Genre { get; set; }
    
            public List<Album> Albums { get; set; }
        }
    }
    

참고

목록<앨범>이란?: 이 정의는 List<T> 형식을 사용합니다. 여기서 T는 이 목록의 요소가 속한 형식(이 경우 Album 또는 해당 하위 항목)을 제한합니다.

클래스 또는 메서드가 클라이언트 코드에 의해 선언되고 인스턴스화될 때까지 하나 이상의 형식의 사양을 연기하는 클래스 및 메서드를 디자인하는 이 기능은 제네릭이라는 C# 언어의 기능입니다.

목록<T>ArrayList 형식에 해당하는 제네릭이며 System.Collections.Generic 네임스페이스에서 사용할 수 있습니다. 제네릭을 사용할 때의 이점 중 하나는 형식이 지정되었으므로 ArrayList와 마찬가지로 요소를 앨범으로 캐스팅하는 등의 형식 검사 작업을 처리할 필요가 없다는 것입니다.

작업 3 - StoreController에서 새 ViewModel 사용

이 작업에서는 새 StoreBrowseViewModel을 사용하도록 StoreController찾아보기세부 정보 작업 메서드를 수정합니다.

  1. StoreController 클래스의 Models 폴더에 대한 참조를 추가합니다. 이렇게 하려면 솔루션 탐색기Controllers 폴더를 확장하고 StoreController 클래스를 엽니다. 다음 코드를 추가합니다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex6 UsingModelInController)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MvcMusicStore.ViewModels;
    using MvcMusicStore.Models;
    
  2. 찾아보기 작업 메서드를 바꿔 StoreViewBrowseController 클래스를 사용합니다. Dummy 데이터를 사용하여 Genre 및 두 개의 새 Albums 개체를 만듭니다(다음 실습 랩에서는 데이터베이스의 실제 데이터를 사용합니다). 이렇게 하려면 Browse 메서드를 다음 코드로 바꿉다.

    (코드 조각 - MVC 4 기본 사항 ASP.NET - Ex6 BrowseMethod)

    //
    // GET: /Store/Browse?genre=Disco
    
    public ActionResult Browse(string genre)
    {
        var genreModel = new Genre()
        {
            Name = genre
        };
    
        var albums = new List<Album>()
        {
            new Album() { Title = genre + " Album 1" },
            new Album() { Title = genre + " Album 2" }
        };
    
        var viewModel = new StoreBrowseViewModel()
        {
            Genre = genreModel,
            Albums = albums
        };
    
        return this.View(viewModel);
    }
    
  3. Details 작업 메서드를 바꿔 StoreViewBrowseController 클래스를 사용합니다. View로 반환할 새 Album 개체를 만듭니다. 이렇게 하려면 Details 메서드를 다음 코드로 바꿉다.

    (코드 조각 - ASP.NET MVC 4 기본 사항 - Ex6 DetailsMethod)

    //
    // GET: /Store/Details/5
    
    public ActionResult Details(int id)
    {
      var album = new Album { Title = "Sample Album" };
    
      return this.View(album);
    }
    

작업 4 - 찾아보기 보기 템플릿 추가

이 작업에서는 찾아보기 보기를 추가하여 특정 장르에 대해 찾은 앨범을 표시합니다.

  1. 새 보기 템플릿을 만들기 전에 보기 추가 대화 상자에서 사용할 ViewModel 클래스에 대해 알 수 있도록 프로젝트를 빌드해야 합니다. 빌드 메뉴 항목을 선택한 다음 , 빌드MvcMusicStore를 선택하여 프로젝트를 빌드합니다.

  2. 찾아보기 보기를 추가합니다. 이렇게 하려면 StoreController찾아보기 작업 메서드를 마우스 오른쪽 단추로 클릭하고 보기 추가를 클릭합니다.

  3. 보기 추가 대화 상자에서 보기 이름이 찾아보기인지 확인합니다. 강력한 형식의 보기 만들기 확인란을 선택하고 모델 클래스 드롭다운에서 StoreBrowseViewModel을 선택합니다. 다른 필드는 기본값으로 둡니다. 그런 다음, 추가를 클릭합니다.

    찾아보기 보기 추가

    찾아보기 보기 추가

  4. Browse.cshtml을 수정하여 장르의 정보를 표시하고 보기 템플릿에 전달되는 StoreBrowseViewModel 개체에 액세스합니다. 이렇게 하려면 콘텐츠를 다음으로 바꿉니다(C#).

    @model MvcMusicStore.ViewModels.StoreBrowseViewModel
    
    @{
        ViewBag.Title = "Browse Albums";
    }
    
    <h2>Browsing Genre: @Model.Genre.Name</h2>
    
    <ul>
        @foreach (var album in Model.Albums)
        {
            <li>@album.Title</li>
        }
    </ul>
    

작업 5 - 애플리케이션 실행

이 작업에서는 찾아보기 메서드가 찾아보 기 메서드 작업에서 앨범을 검색하는지 테스트합니다.

  1. F5 키를 눌러 애플리케이션을 실행합니다.

  2. 프로젝트는 홈페이지에서 시작됩니다. URL을 /Store/Browse로 변경하시겠습니까? Genre=Disco 는 작업이 두 개의 앨범을 반환하는지 확인합니다.

    스토어 디스코 앨범

    스토어 디스코 앨범 찾아보기

작업 6 - 특정 앨범에 대한 정보 표시

이 작업에서는 스토어/세부 정보 보기를 구현하여 특정 앨범에 대한 정보를 표시합니다. 이 실습 랩에서는 앨범에 대해 표시할 모든 항목이 보기 템플릿에 이미 포함되어 있습니다. 따라서 StoreDetailsViewModel 클래스를 만드는 대신 현재 StoreBrowseViewModel 템플릿을 사용하여 앨범을 전달합니다.

  1. 필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다. StoreController세부 정보 작업 메서드에 대한 새 세부 정보 보기를 추가합니다. 이렇게 하려면 StoreController 클래스에서 Details 메서드를 마우스 오른쪽 단추로 클릭하고 보기 추가를 클릭합니다.

  2. 보기 추가 대화 상자에서 보기 이름이세부 정보인지 확인합니다. 강력한 형식의 보기 만들기 확인란을 선택하고 모델 클래스 드롭다운에서 앨범을 선택합니다. 다른 필드는 기본값으로 둡니다. 그런 다음, 추가를 클릭합니다. 그러면 \Views\Store\Details.cshtml 파일이 만들어지고 열립니다.

    세부 정보 보기 추가

    세부 정보 보기 추가

  3. Details.cshtml 파일을 수정하여 앨범의 정보를 표시하고 보기 템플릿에 전달되는 Album 개체에 액세스합니다. 이렇게 하려면 콘텐츠를 다음으로 바꿉니다(C#).

    @model MvcMusicStore.Models.Album
    
    @{
        ViewBag.Title = "Details";
    }
    
    <h2>Album: @Model.Title</h2>
    

작업 7 - 애플리케이션 실행

이 작업에서는 세부 정보 보기가 세부 정보작업 메서드에서 앨범의 정보를 검색하는지 테스트합니다.

  1. F5 키를 눌러 애플리케이션을 실행합니다.

  2. 프로젝트는 페이지에서 시작됩니다. URL을 /Store/Details/5 로 변경하여 앨범 정보를 확인합니다.

    앨범 검색 세부 정보

    앨범 세부 정보 검색

이 작업에서는 스토어 뷰에 링크를 추가하여 모든 장르 이름에 적절한 /Store/Browse URL에 대한 링크를 갖습니다. 이러한 방식으로 장르를 클릭하면 instance 디스코의 경우 /Store/Browse?genre=Disco URL로 이동합니다.

  1. 필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다. 인덱스 페이지를 업데이트하여 찾아보기 페이지에 대한 링크를 추가합니다. 이렇게 하려면 솔루션 탐색기Views 폴더를 확장한 다음 Store 폴더를 확장하고 Index.cshtml 페이지를 두 번 클릭합니다.

  2. 선택한 장르를 나타내는 찾아보기 보기에 대한 링크를 추가합니다. 이렇게 하려면 li> 태그 내에서< 강조 표시된 다음 코드를 바꿉니다(C#).

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
        ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p> Select from @Model.NumberOfGenres genres</p>
    
    <ul>
        @foreach (string genreName in Model.Genres) {
            <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
            </li>
            }
    </ul>
    

    참고

    다른 방법은 다음과 같은 코드를 사용하여 페이지에 직접 연결하는 것입니다.

    <a href="/Store/Browse?genre=@genreName">@genreName</a&gt;

    이 방법은 작동하지만 하드 코딩된 문자열에 따라 달라집니다. 나중에 컨트롤러의 이름을 바꾸는 경우 이 명령을 수동으로 변경해야 합니다. 더 나은 대안은 HTML 도우미 메서드를 사용하는 것입니다. ASP.NET MVC에는 이러한 작업에 사용할 수 있는 HTML 도우미 메서드가 포함되어 있습니다. Html.ActionLink() 도우미 메서드를 사용하면 HTML<> 링크를 쉽게 빌드하여 URL 경로가 URL 인코딩되었는지 확인할 수 있습니다.

    Html.ActionLink에는 여러 오버로드가 있습니다. 이 연습에서는 다음 세 가지 매개 변수를 사용하는 매개 변수를 사용합니다.

    1. 장르 이름을 표시하는 링크 텍스트
    2. 컨트롤러 작업 이름(찾아보기)
    3. 이름(Genre)과 값(장르이름)을 모두 지정하여 매개 변수 값을 라우팅합니다.

작업 9 - 애플리케이션 실행

이 작업에서는 각 장르가 적절한 /Store/Browse URL에 대한 링크와 함께 표시되는지 테스트합니다.

  1. F5 키를 눌러 애플리케이션을 실행합니다.

  2. 프로젝트는 홈페이지에서 시작됩니다. URL을 /Store 로 변경하여 각 장르가 적절한 /Store/찾아보기 URL에 연결되는지 확인합니다.

    찾아보기 페이지에 대한 링크가 있는 장르 찾아보기 페이지

    찾아보기 페이지에 대한 링크가 있는 장르 찾아보기

작업 10 - 동적 ViewModel 컬렉션을 사용하여 값 전달

이 작업에서는 모델을 변경하지 않고 컨트롤러와 뷰 간에 값을 전달하는 간단하고 강력한 방법을 알아봅니다. ASP.NET MVC 4는 동적 값에 할당하고 컨트롤러 및 뷰 내에서도 액세스할 수 있는 컬렉션 "ViewModel"을 제공합니다.

이제 ViewBag 동적 컬렉션을 사용하여 컨트롤러에서 보기로 "별표가 지정된 장르" 목록을 전달합니다. 스토어 인덱스 보기는 ViewModel 에 액세스하고 정보를 표시합니다.

  1. 필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다. StoreController.cs를 열고 Index 메서드를 수정하여 별표가 지정된 장르 목록을 ViewModel 컬렉션으로 만듭니다.

    public ActionResult Index()
    {
        // Create list of genres
        var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };
    
        // Create your view model
        var viewModel = new StoreIndexViewModel
        {
            NumberOfGenres = genres.Count,
            Genres = genres
        };
    
        ViewBag.Starred = new List<string> { "Rock", "Jazz" };
    
        return this.View(viewModel);
    }
    

    참고

    ViewBag["Starred"] 구문을 사용하여 속성에 액세스할 수도 있습니다.

  2. star 아이콘 "starred.png"은 이 랩의 Source\Assets\Images 폴더에 포함되어 있습니다. 애플리케이션에 추가하려면 아래와 같이 Windows Explorer 창에서 Visual Web Developer Express의 솔루션 탐색기 콘텐츠를 끌어옵니다.

    솔루션에 star 이미지 추가 솔루션에

    솔루션에 star 이미지 추가

  3. Store/Index.cshtml 보기를 열고 콘텐츠를 수정합니다. ViewBag 컬렉션에서 "starred" 속성을 읽고 현재 장르 이름이 목록에 있는지 묻습니다. 이 경우 장르 링크에 바로 star 아이콘이 표시됩니다. (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
         ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p>Select from @Model.NumberOfGenres genres</p>
    
    <ul>
         @foreach (string genreName in Model.Genres)
         {
              <li>
                    @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
    
                    @if (ViewBag.Starred.Contains(genreName))
                    { 
                         <img src="../../Content/Images/starred.png" alt="Starred element" />
                    }
              </li>
         }
    </ul>
    <br />
    <h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>
    

작업 11 - 애플리케이션 실행

이 작업에서는 별표가 지정된 장르에 star 아이콘이 표시되는지 테스트합니다.

  1. F5 키를 눌러 애플리케이션을 실행합니다.

  2. 프로젝트는 페이지에서 시작됩니다. URL을 /Store 로 변경하여 추천 장르마다 관련 레이블이 있는지 확인합니다.

    별표가 있는 요소가 있는 장르 찾아보

    별표가 있는 요소가 있는 장르 찾아보기

연습 7: MVC 4 새 템플릿을 ASP.NET 랩

이 연습에서는 ASP.NET MVC 4 프로젝트 템플릿의 향상된 기능을 살펴보고 새 템플릿의 가장 관련성이 뛰어난 기능을 살펴봅니다.

작업 1: ASP.NET MVC 4 인터넷 애플리케이션 템플릿 탐색

  1. 아직 열리지 않은 경우 웹용 VS Express를 시작합니다.

  2. 파일 선택 | 새로 만들기 | 프로젝트 메뉴 명령입니다. 새 프로젝트 대화 상자에서 Visual C#|을 선택합니다. 왼쪽 창 트리의 웹 템플릿을 선택하고 ASP.NET MVC 4 웹 애플리케이션을 선택합니다. 프로젝트 이름을MusicStore로 지정하고 솔루션 이름을Begin으로 업데이트한 다음 위치를 선택하거나 기본값을 그대로 두고 확인을 클릭합니다.

    새 ASP.NET MVC 4 프로젝트

    새 ASP.NET MVC 4 프로젝트 만들기

  3. 새 ASP.NET MVC 4 프로젝트 대화 상자에서 인터넷 애플리케이션 프로젝트 템플릿을 선택하고 확인을 클릭합니다. Razor 또는 ASPX를 뷰 엔진으로 선택할 수 있습니다.

    새 ASP.NET MVC 4 인터넷 애플리케이션

    새 ASP.NET MVC 4 인터넷 애플리케이션 만들기

    참고

    Razor 구문은 ASP.NET MVC 3에 도입되었습니다. 목표는 파일에 필요한 문자 및 키 입력 수를 최소화하여 빠르고 유동적인 코딩 워크플로를 가능하게 하는 것입니다. Razor는 기존 C#/VB(또는 기타) 언어 기술을 활용하고 멋진 HTML 생성 워크플로를 가능하게 하는 템플릿 태그 구문을 제공합니다.

  4. F5 키를 눌러 솔루션을 실행하고 갱신된 템플릿을 확인합니다. 다음 기능을 검사 수 있습니다.

    1. 최신 스타일 템플릿

      템플릿이 갱신되어 보다 현대적인 스타일을 제공합니다.

      ASP.NET MVC 4에서 다시 디자인된 템플릿

      ASP.NET MVC 4 서식 파일

    2. 적응형 렌더링

      브라우저 창 크기 조정을 확인하고 페이지 레이아웃이 새 창 크기에 동적으로 조정되는 방식을 확인합니다. 이러한 템플릿은 적응 렌더링 기술을 사용하여 사용자 지정 없이 데스크톱 및 모바일 플랫폼에서 제대로 렌더링합니다.

      다양한 브라우저 크기에서 MVC 4 프로젝트 템플릿

      다양한 브라우저 크기로 MVC 4 프로젝트 템플릿 ASP.NET

  5. 브라우저를 닫아 디버거를 중지하고 Visual Studio로 돌아갑니다.

  6. 이제 솔루션을 탐색하고 프로젝트 템플릿에서 ASP.NET MVC 4에서 도입한 새로운 기능 중 일부를 검사 수 있습니다.

    ASP.NET MVC4-internet-application-project-template

    ASP.NET MVC 4 인터넷 애플리케이션 프로젝트 템플릿

    1. HTML5 태그

      템플릿 보기를 찾아 새 테마 태그를 찾습니다(예: Home 폴더 내에서 About.cshtml 보기 열기).

      Razor 및 HTML5 태그를 사용하는 새 템플릿

      Razor 및 HTML5 태그를 사용하는 새 템플릿

    2. 포함된 JavaScript 라이브러리

      1. jQuery: jQuery는 HTML 문서 트래버스, 이벤트 처리, 애니메이션 및 Ajax 상호 작용을 간소화합니다.

      2. jQuery UI: 이 라이브러리는 jQuery JavaScript 라이브러리를 기반으로 빌드된 하위 수준의 상호 작용 및 애니메이션, 고급 효과 및 테마 가능 위젯에 대한 추상화 기능을 제공합니다.

        참고

        [http://docs.jquery.com/](http://docs.jquery.com/)에서 jQuery 및 jQuery UI에 대해 알아볼 수 있습니다.

      3. KnockoutJS: ASP.NET MVC 4 기본 템플릿에는 JavaScript 및 HTML을 사용하여 풍부하고 응답성이 뛰어난 웹 애플리케이션을 만들 수 있는 JavaScript MVVM 프레임워크인 KnockoutJS가 포함됩니다. ASP.NET MVC 3과 마찬가지로 jQuery 및 jQuery UI 라이브러리도 ASP.NET MVC 4에 포함됩니다.

        참고

        KnockOutJS 라이브러리에 대한 자세한 내용은 링크 http://learn.knockoutjs.com/에서 확인할 수 있습니다.

      4. Modernizr: 이 라이브러리는 자동으로 실행되므로 HTML5 및 CSS3 기술을 사용할 때 사이트가 이전 브라우저와 호환됩니다.

        참고

        Modernizr 라이브러리에 대한 자세한 내용은 링크 http://www.modernizr.com/에서 확인할 수 있습니다.

    3. 솔루션에 포함된 SimpleMembership

      SimpleMembership은 이전 ASP.NET 역할 및 멤버 자격 공급자 시스템을 대체하도록 설계되었습니다. 개발자가 보다 유연한 방식으로 웹 페이지를 더 쉽게 보호할 수 있도록 하는 많은 새로운 기능이 있습니다.

      인터넷 템플릿은 이미 SimpleMembership을 통합하기 위해 몇 가지 사항을 설정했습니다. 예를 들어 AccountController는 OAuthWebSecurity(OAuth 계정 등록, 로그인, 관리 등) 및 웹 보안을 사용할 준비가 되어 있습니다.

      SimpleMembership 솔루션에 포함된

      SimpleMembership 솔루션에 포함됨

      참고

      MSDN에서 OAuthWebSecurity 에 대한 자세한 정보를 찾습니다.

참고

또한 부 록 B: 웹 배포를 사용하여 ASP.NET MVC 4 애플리케이션 게시에 따라 이 애플리케이션을 Windows Azure 웹 사이트에 배포할 수 있습니다.


요약

이 Hands-On 랩을 완료하면 ASP.NET MVC의 기본 사항을 알아보았습니다.

  • MVC 애플리케이션의 핵심 요소 및 상호 작용하는 방법
  • ASP.NET MVC 애플리케이션을 만드는 방법
  • URL 및 쿼리 문자열을 통해 전달된 매개 변수를 처리하도록 컨트롤러를 추가하고 구성하는 방법
  • 레이아웃 master 페이지를 추가하여 일반적인 HTML 콘텐츠에 대한 템플릿을 설정하는 방법, 모양과 느낌을 향상시키는 StyleSheet 및 HTML 콘텐츠를 표시하는 보기 템플릿
  • 뷰 템플릿에 속성을 전달하여 동적 정보를 표시하는 ViewModel 패턴을 사용하는 방법
  • 보기 템플릿에서 컨트롤러에 전달된 매개 변수를 사용하는 방법
  • ASP.NET MVC 애플리케이션 내의 페이지에 대한 링크를 추가하는 방법
  • 보기에서 동적 속성을 추가하고 사용하는 방법
  • ASP.NET MVC 4 프로젝트 템플릿의 향상된 기능

부록 A: 웹용 Visual Studio Express 2012 설치

Microsoft 웹 플랫폼 설치 관리자 사용하여 웹용 Microsoft Visual Studio Express 2012 또는 다른 "Express" 버전을 설치할 수 있습니다. 다음 지침은 Microsoft 웹 플랫폼 설치 관리자 사용하여 Visual Studio Express 2012 for Web을 설치하는 데 필요한 단계를 안내합니다.

  1. [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169)로 이동합니다. 또는 웹 플랫폼 설치 관리자를 이미 설치한 경우 이를 열고 "Windows Azure SDK를 사용하는 웹용 Visual Studio Express 2012" 제품을 검색할 수 있습니다.

  2. 지금 설치를 클릭합니다. 웹 플랫폼 설치 관리자가 없는 경우 먼저 다운로드하여 설치하도록 리디렉션됩니다.

  3. 웹 플랫폼 설치 관리자가 열리면 설치를 클릭하여 설치를 시작합니다.

    설치 Visual Studio Express

    설치 Visual Studio Express

  4. 모든 제품의 라이선스 및 약관을 읽고 동의 를 클릭하여 계속합니다.

    사용 조건 동의

    사용 조건 동의

  5. 다운로드 및 설치 프로세스가 완료될 때까지 기다립니다.

    설치 진행률

    설치 진행률

  6. 설치가 완료되면 마침을 클릭합니다.

    설치 완료됨

    설치 완료됨

  7. 종료를 클릭하여 웹 플랫폼 설치 관리자를 닫습니다.

  8. 웹용 Visual Studio Express 열려면 시작 화면으로 이동하여 "VS Express" 쓰기를 시작한 다음 웹용 VS Express 타일을 클릭합니다.

    웹용 VS Express 타일

    웹용 VS Express 타일

부록 B: 웹 배포를 사용하여 ASP.NET MVC 4 애플리케이션 게시

이 부록은 Windows Azure 관리 포털에서 새 웹 사이트를 만들고 랩에 따라 얻은 애플리케이션을 게시하는 방법을 보여 줍니다. Windows Azure에서 제공하는 웹 배포 게시 기능을 활용합니다.

작업 1 - Windows Azure Portal에서 새 웹 사이트 만들기

  1. Windows Azure 관리 포털로 이동하여 구독과 연결된 Microsoft 자격 증명을 사용하여 로그인합니다.

    참고

    Windows Azure를 사용하면 10개의 ASP.NET 웹 사이트를 무료로 호스트한 다음 트래픽이 증가함에 따라 크기를 조정할 수 있습니다. 여기에서 등록할 수 있습니다.

    Windows에 로그온Azure Portal

    Windows Azure 관리 포털에 로그온

  2. 명령 모음에서 새로 만들기를 클릭합니다.

    새 웹 사이트 만들기

    새 웹 사이트 만들기

  3. 컴퓨팅 | 웹 사이트를 클릭합니다. 그런 다음 , 빠른 만들기 옵션을 선택합니다. 새 웹 사이트에 사용 가능한 URL을 제공하고 웹 사이트 만들기를 클릭합니다.

    참고

    Windows Azure 웹 사이트는 제어하고 관리할 수 있는 클라우드에서 실행되는 웹 애플리케이션의 호스트입니다. 빠른 만들기 옵션을 사용하면 포털 외부에서 완료된 웹 애플리케이션을 Windows Azure 웹 사이트에 배포할 수 있습니다. 데이터베이스를 설정하는 단계는 포함되지 않습니다.

    빠른 만들기를 사용하여 새 웹 사이트 만들기

    빠른 만들기를 사용하여 새 웹 사이트 만들기

  4. 웹 사이트가 생성될 때까지 기다립니다.

  5. 웹 사이트가 만들어지면 URL 열 아래의 링크를 클릭합니다. 새 웹 사이트가 작동하는지 확인합니다.

    새 웹 사이트 찾아보

    새 웹 사이트로 검색

    실행 중인 웹 사이트를 실행하는 웹 사이트

    실행 중인 웹 사이트

  6. 포털로 돌아가기 이름 열 아래의 웹 사이트 이름을 클릭하여 관리 페이지를 표시합니다.

    웹 사이트 관리 페이지

    웹 사이트 관리 페이지 열기

  7. 대시보드 페이지의 빠른 보기 섹션에서 게시 프로필 다운로드 링크를 클릭합니다.

    참고

    게시 프로필에는 사용하도록 설정된 각 게시 방법에 대해 웹 애플리케이션을 Windows Azure 웹 사이트에 게시하는 데 필요한 모든 정보가 포함되어 있습니다. 게시 프로필에는 게시 방법이 사용 설정된 각 엔드포인트에 연결하고 이에 대해 인증하는 데 필요한 URL, 사용자 자격 증명 및 데이터베이스 문자열이 포함되어 있습니다. Microsoft WebMatrix 2, Microsoft Visual Studio Express for WebMicrosoft Visual Studio 2012는 게시 프로필 읽기를 지원하여 Windows Azure 웹 사이트에 웹 애플리케이션을 게시하기 위한 이러한 프로그램의 구성을 자동화합니다.

    웹 사이트 게시 프로필 다운로드

    웹 사이트 게시 프로필 다운로드

  8. 게시 프로필 파일을 알려진 위치에 다운로드합니다. 이 연습에서는 이 파일을 사용하여 Visual Studio에서 Windows Azure 웹 사이트에 웹 애플리케이션을 게시하는 방법을 알아보세요.

    게시 프로필 파일 저장

    게시 프로필 파일 저장

작업 2 - 데이터베이스 서버 구성

애플리케이션에서 SQL Server 데이터베이스를 사용하는 경우 SQL Database 서버를 만들어야 합니다. SQL Server 사용하지 않는 간단한 애플리케이션을 배포하려는 경우 이 작업을 건너뛸 수 있습니다.

  1. 애플리케이션 데이터베이스를 저장하려면 SQL Database 서버가 필요합니다. 구독의 SQL Database 서버는 Sql Databases | | 서버대시보드의 Windows Azure 관리 포털에서 볼 수 있습니다. 서버를 만들지 않은 경우 명령 모음의 추가 단추를 사용하여 서버를 만들 수 있습니다. 다음 작업에서 사용할 서버 이름 및 URL, 관리자 로그인 이름 및 암호를 기록해 둡니다. 데이터베이스는 이후 단계에서 생성되므로 아직 만들지 마세요.

    SQL Database 서버 대시보드

    SQL Database 서버 대시보드

  2. 다음 작업에서는 Visual Studio에서 데이터베이스 연결을 테스트합니다. 이러한 이유로 서버의 허용된 IP 주소 목록에 로컬 IP 주소를 포함해야 합니다. 이렇게 하려면 구성을 클릭하고 현재 클라이언트 IP 주소에서 IP 주소를 선택하고 시작 IP 주소끝 IP 주소 텍스트 상자에 붙여넣고 add-client-ip-address-ok-button 단추를 클릭합니다.

    클라이언트 IP 주소 추가

    클라이언트 IP 주소 추가

  3. 클라이언트 IP 주소가 허용된 IP 주소 목록에 추가되면 저장을 클릭하여 변경 내용을 확인합니다.

    변경 내용 확인

    변경 내용 확인

작업 3 - 웹 배포를 사용하여 ASP.NET MVC 4 애플리케이션 게시

  1. ASP.NET MVC 4 솔루션에 돌아가기. 솔루션 탐색기 웹 사이트 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 선택합니다.

    애플리케이션 게시 애플리케이션

    웹 사이트 게시

  2. 첫 번째 작업에서 저장한 게시 프로필을 가져옵니다.

    게시 프로필 가져오기 게시

    게시 프로필 가져오기

  3. 연결 유효성 검사를 클릭합니다. 유효성 검사가 완료되면 다음을 클릭합니다.

    참고

    연결 유효성 검사 단추 옆에 녹색 확인 표시가 표시되면 유효성 검사가 완료됩니다.

    연결 유효성 검사 연결

    연결 유효성 검사

  4. 설정 페이지의 데이터베이스 섹션에서 데이터베이스 연결의 텍스트 상자(예: DefaultConnection) 옆에 있는 단추를 클릭합니다.

    웹 배포 구성

    웹 배포 구성

  5. 다음과 같이 데이터베이스 연결을 구성합니다.

    • 서버 이름tcp: 접두사를 사용하여 SQL Database 서버 URL을 입력합니다.

    • 사용자 이름에 서버 관리자 로그인 이름을 입력합니다.

    • 암호에 서버 관리자 로그인 암호를 입력합니다.

    • 새 데이터베이스 이름(예: MVC4SampleDB)을 입력합니다.

      대상 연결 문자열 구성

      대상 연결 문자열 구성

  6. 그런 후 OK를 클릭합니다. 데이터베이스를 만들라는 메시지가 표시되면 예를 클릭합니다.

    데이터베이스 만들기

    데이터베이스 만들기

  7. Windows Azure에서 SQL Database 연결하는 데 사용할 연결 문자열은 기본 연결 텍스트 상자에 표시됩니다. 그런 후 Next 를 클릭합니다.

    SQL Database 가리키는 SQL Database

    SQL Database 가리키는 연결 문자열

  8. 미리 보기 페이지에서 게시를 클릭합니다.

    웹 애플리케이션 게시 웹

    웹 애플리케이션 게시

  9. 게시 프로세스가 완료되면 기본 브라우저가 게시된 웹 사이트를 엽니다.

    Windows Azure에 게시된 Windows Azure

    Windows Azure에 게시된 애플리케이션

부록 C: 코드 조각 사용

코드 조각을 사용하면 필요한 모든 코드를 손쉽게 사용할 수 있습니다. 랩 문서에서는 다음 그림과 같이 언제 사용할 수 있는지 정확히 알려줍니다.

Visual Studio 코드 조각을 사용하여 프로젝트에 코드 삽입

Visual Studio 코드 조각을 사용하여 프로젝트에 코드 삽입

키보드를 사용하여 코드 조각을 추가하려면(C#에만 해당)

  1. 코드를 삽입할 위치에 커서를 놓습니다.
  2. 공백이나 하이픈 없이 코드 조각 이름을 입력하기 시작합니다.
  3. IntelliSense가 일치하는 코드 조각의 이름을 표시하는지 확인합니다.
  4. 올바른 코드 조각을 선택하거나 전체 코드 조각의 이름이 선택될 때까지 계속 입력합니다.
  5. Tab 키를 두 번 눌러 커서 위치에 코드 조각을 삽입합니다.

코드 조각 이름 입력 시작 코드 조각

코드 조각 이름 입력 시작

Tab 키를 눌러 강조 표시된 코드 조각을 선택.

Tab 키를 눌러 강조 표시된 코드 조각을 선택합니다.

Tab 키를 다시 누르면 코드 조각이.

Tab 키를 다시 누르면 코드 조각이 확장됩니다.

마우스를 사용하여 코드 조각을 추가하려면(C#, Visual Basic 및 XML) 1. 코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭합니다.

  1. 코드 조각 삽입, 내 코드 조각을 차례로 선택합니다.
  2. 목록에서 관련 조각을 클릭하여 선택합니다.

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭하고 코드 조각 삽입을 마우스.

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭하고 코드 조각 삽입을 선택합니다.

목록에서 관련 코드 조각을 선택하고 목록에서 관련 코드 선택합니다.

목록에서 관련 코드 조각을 클릭하여 선택합니다.