ASP.NET MVC 4 기본 사항

아티클
07/13/2023

웹 캠프 팀별

이 실습 랩은 MVC 및 Visual Studio를 ASP.NET 사용하는 방법을 단계별로 소개하고 설명하는 자습서 애플리케이션인 MVC(모델 뷰 컨트롤러) Music Store를 기반으로 합니다. 랩 전체에서 이러한 기술을 함께 사용할 때의 단순성을 학습할 수 있습니다. 간단한 애플리케이션으로 시작하고 MVC 4 웹 애플리케이션에 ASP.NET 완벽하게 작동할 때까지 빌드합니다.

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

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

이 실습 랩에서는 개발자가 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는 모델 데이터에서 만들어집니다. 예를 들어 텍스트 상자를 표시하는 앨범의 편집 보기와 Album 개체의 현재 상태를 기반으로 하는 드롭다운 목록이 있습니다.
컨트롤러: 컨트롤러는 사용자 상호 작용을 처리하고, 모델을 조작하고, 궁극적으로 UI를 렌더링할 뷰를 선택하는 구성 요소입니다. MVC 애플리케이션에서 보기는 정보만 표시합니다. 컨트롤러가 사용자 입력 및 상호 작용을 처리하고 응답합니다.

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

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

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

목표

이 실습 랩에서는 다음 방법을 알아봅니다.

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

필수 조건

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

Visual Studio 2012 Express for Web(부록 A를 설치하는 방법에 대한 지침 참조)

설정

코드 조각 설치

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

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

연습

이 실습 랩은 다음 연습으로 구성됩니다.

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

참고 항목

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

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

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

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

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

이 작업에서는 MVC Visual Studio 템플릿을 사용하여 빈 ASP.NET MVC 애플리케이션 프로젝트를 만듭니다. 웹용 VS Express를 시작 합니다.
파일 메뉴에서 새 프로젝트를 클릭합니다.
새 프로젝트 대화 상자에서 Visual C#, 웹 템플릿 목록 아래에 있는 ASP.NET MVC 4 웹 애플리케이션 프로젝트 유형을 선택합니다.
이름을 MvcMusicStore로 변경합니다.
[YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin과 같이 이 연습의 원본 폴더에 있는 새 Begin 폴더 내에 솔루션의 위치를 설정합니다. 확인을 클릭합니다.

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

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

작업 2 - 솔루션 구조 탐색

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

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

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

솔루션 탐색기 MVC 폴더 구조 ASP.NET
1. 컨트롤러. 이 폴더에는 컨트롤러 클래스가 포함됩니다. MVC 기반 애플리케이션에서 컨트롤러는 최종 사용자 상호 작용을 처리하고, 모델을 조작하고, 궁극적으로 UI를 렌더링할 뷰를 선택할 책임이 있습니다.
  
  참고 항목
  
  MVC 프레임워크를 사용하려면 모든 컨트롤러의 이름이 "Controller"(예: HomeController, LoginController 또는 ProductController)로 끝나야 합니다.
2. 모델. 이 폴더는 MVC 웹 애플리케이션의 애플리케이션 모델을 나타내는 클래스에 대해 제공됩니다. 여기에는 일반적으로 개체를 정의하는 코드와 데이터 저장소와 상호 작용하기 위한 논리가 포함됩니다. 일반적으로 실제 모델 개체는 별도의 클래스 라이브러리에 있습니다. 그러나 새 애플리케이션을 만들 때 클래스를 포함하고 개발 주기의 이후 지점에서 별도의 클래스 라이브러리로 이동할 수 있습니다.
3. 보기. 이 폴더는 애플리케이션의 사용자 인터페이스 표시를 담당하는 구성 요소인 보기에 권장되는 위치입니다. 뷰는 렌더링 뷰와 관련된 다른 파일 외에도 .aspx, .ascx, .cshtml 및 .master 파일을 사용합니다. 뷰 폴더에는 각 컨트롤러에 대한 폴더가 포함됩니다. 폴더의 이름은 컨트롤러 이름 접두사로 지정됩니다. 예를 들어 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을 처리할 컨트롤러 클래스를 추가합니다.

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

컨트롤러 추가 명령
컨트롤러 추가 대화 상자가 나타납니다. 컨트롤러 HomeController의 이름을 지정하고 Add 키를 누릅니다.

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

(코드 조각 - ASP.NET MVC 4 기본 사항 - Ex1 HomeController 인덱스)
```
public string Index()
{
    return "Hello from Home";
}
```

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

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

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

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

참고 항목

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

연습 2: 컨트롤러 만들기

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

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

이 연습의 범위에 대해 이러한 작업은 이제 문자열만 반환합니다.

작업 1 - 새 StoreController 클래스 추가

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

아직 열리지 않은 경우 웹 2012용 VS Express를 시작합니다.
파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex02-CreatingAController\Begin으로 이동하여 Begin.sln 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 사용할 수 있습니다.
1. 제공 된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.
  
  참고 항목
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
새 컨트롤러를 추가합니다. 이렇게 하려면 솔루션 탐색기 내의 Controllers 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 컨트롤러 명령을 선택합니다. 컨트롤러 이름을 StoreController로 변경하고 추가를 클릭합니다.

컨트롤러 추가 대화 상자

작업 2 - StoreController의 작업 수정

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

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

(코드 조각 - ASP.NET MVC 4 기본 사항 - Ex2 StoreController 인덱스)
```
public string Index()
{
  return "Hello from Store.Index()";
}
```
찾아보기 및 세부 정보 메서드를 추가합니다. 이렇게 하려면 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 - 애플리케이션 실행

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

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 변경하여 각 작업의 구현을 확인합니다.
1. /Store. "Hello from Store.Index()"가 표시됩니다.
2. /Store/Browse. "Hello from Store.Browse()"가 표시됩니다.
3. /Store/Details. "Hello from Store.Details()"가 표시됩니다.
  
  찾아보기 /스토어/찾아보기
브라우저를 닫습니다.

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

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

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

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

아직 열리지 않은 경우 웹용 VS Express를 시작합니다.
파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex03-PassingParametersToAController\Begin으로 이동하여 Begin.sln 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 사용할 수 있습니다.
1. 제공 된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.
  
  참고 항목
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
StoreController 클래스를 엽니다. 이렇게 하려면 솔루션 탐색기 Controllers 폴더를 확장하고 StoreController.cs 두 번 클릭합니다.
찾아보기 메서드를 변경하고 특정 장르에 대해 요청할 문자열 매개 변수를 추가합니다. ASP.NET MVC는 호출될 때 장르라는 쿼리 문자열 또는 양식 게시 매개 변수를 이 작업 메서드에 자동으로 전달합니다. 이렇게 하려면 Browse 메서드를 다음 코드로 바꿉다.

(코드 조각 - ASP.NET MVC 4 기본 사항 - 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 - 애플리케이션 실행

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

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /Store/Browse로 변경하시겠습니까? Genre=Disco 를 사용하여 작업이 장르 매개 변수를 받는지 확인합니다.

찾아보기 /스토어/찾아보기 Genre=Disco
브라우저를 닫습니다.

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

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

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

(코드 조각 - ASP.NET MVC 4 기본 사항 - Ex3 StoreController DetailsMethod)
```
// GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}
```

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

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

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /Store/Details/5 로 변경하여 작업이 ID 매개 변수를 받는지 확인합니다.

찾아보기 /스토어/세부 정보/5

연습 4: 보기 만들기

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

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

작업 1 - _layout.cshtml 파일 수정

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

아직 열리지 않은 경우 웹용 VS Express를 시작합니다.
파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex04-CreatingAView\Begin으로 이동하여 Begin.sln 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 사용할 수 있습니다.
1. 제공 된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.
  
  참고 항목
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.

_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>

사이트의 모든 페이지에서 홈페이지 및 스토어 영역에 대한 링크가 있는 공통 헤더를 추가합니다. 이렇게 하려면 다음 코드를 본문> 아래에 <추가합니다. (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>

각 페이지의 본문 섹션을 렌더링하는 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 스타일시트를 추가하여 사이트의 스타일을 정의합니다.

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

스타일 내용 끌기
Site.css 파일 및 일부 기존 이미지를 바꿀 지 확인하는 경고 대화 상자가 나타납니다. 모든 항목에 적용을 선택하고 [예]를 클릭합니다.

작업 3 - 보기 템플릿 추가

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

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

(코드 조각 - ASP.NET MVC 4 기본 사항 - Ex4 HomeController 인덱스)
```
public class HomeController : Controller
{
    //
    // GET: /Home/

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

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

보기 추가 대화 상자
Visual Studio는 Views\Home 폴더 내에 Index.cshtml 뷰 템플릿을 생성한 다음 엽니다.

홈 인덱스 보기 생성됨

참고 항목

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

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

이러한 방식으로 ASP.NET MVC는 이 명명 규칙을 사용하여 보기를 반환할 때 보기 템플릿의 이름이나 위치를 명시적으로 지정하지 않아도 됩니다.
생성된 뷰 템플릿은 이전에 정의된 _layout.cshtml 템플릿을 기반으로 합니다. ViewBag.Title 속성을 홈으로 업데이트하고 아래 코드와 같이 기본 콘텐츠를 홈 페이지로 변경합니다.
```
@{
    ViewBag.Title = "Home";
}

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

작업 4: 확인

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

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

View 템플릿이 표준 명명 규칙을 따랐기 때문에 HomeController의 인덱스 작업 메서드는 반환 View()라는 코드에도 불구하고 \Views\Home\Index.cshtml View 템플릿을 찾아서 표시했습니다.
홈페이지에는 \Views\Home\Index.cshtml 보기 템플릿 내에 정의된 환영 메시지가 표시됩니다.
홈페이지는 _layout.cshtml 템플릿을 사용하므로 환영 메시지가 표준 사이트 HTML 레이아웃 내에 포함됩니다.

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

연습 5: 보기 모델 만들기

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

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

작업 1 - ViewModel 클래스 만들기

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

아직 열리지 않은 경우 웹용 VS Express를 시작합니다.
파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex05-CreatingAViewModel\Begin으로 이동하여 Begin.sln 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 사용할 수 있습니다.
1. 제공 된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.
  
  참고 항목
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
ViewModel을 저장할 ViewModels 폴더를 만듭니다. 이렇게 하려면 최상위 MvcMusicStore 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가 및 새 폴더를 선택합니다.

새 폴더 추가
폴더 이름을 ViewModels로 지정합니다.

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

새 클래스 추가

StoreIndexViewModel 클래스 만들기

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

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

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

StoreIndexViewModel 클래스에 NumberOfGenres 및 Genres 속성을 추가합니다. 이렇게 하려면 클래스 정의에 다음 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 클래스는 응답을 생성하기 위해 StoreController의 Index 메서드에서 View 템플릿으로 전달하는 데 필요한 정보를 캡슐화합니다.

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

StoreController 클래스를 엽니다.

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

(코드 조각 - ASP.NET MVC 4 기본 사항 - ViewModel을 사용하는 Ex5 StoreIndexViewModel)
```
using MvcMusicStore.ViewModels;
```
StoreIndexViewModel 개체를 만들고 채우도록 StoreController의 Index 작업 메서드를 변경한 다음 뷰 템플릿에 전달하여 HTML 응답을 생성합니다.

참고 항목

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

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

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

(코드 조각 - ASP.NET MVC 4 기본 사항 - 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# 컴파일러는 변수에 할당한 내용에 따라 형식 유추를 사용하여 viewModel이 StoreIndexViewModel 형식인지 확인합니다. 또한 로컬 viewModel 변수를 StoreIndexViewModel 형식으로 컴파일하여 컴파일 시간 검사 및 Visual Studio 코드 편집기 지원을 받습니다.

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

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

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

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

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

보기 추가 대화 상자

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

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

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

참고 항목

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

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

@model MvcMusicStore.ViewModels.StoreIndexViewModel

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

<h2>Browse Genres</h2>

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

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>

F5 키를 눌러 애플리케이션을 실행하고 /Store를 찾습니다. StoreController에서 View 템플릿으로 StoreIndexViewModel 개체에 전달된 장르 목록이 표시됩니다.

장르 목록을 표시하는 보기

장르 목록을 표시하는 보기

브라우저를 닫습니다.

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

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

작업 1 - 모델 클래스 추가

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

아직 열리지 않은 경우 웹용 VS Express를 시작 합니다.
파일 메뉴에서 프로젝트 열기를 선택합니다. 프로젝트 열기 대화 상자에서 Source\Ex06-UsingParametersInView\Begin으로 이동하여 Begin.sln 선택하고 열기를 클릭합니다. 또는 이전 연습을 완료한 후 얻은 솔루션을 계속 사용할 수 있습니다.
1. 제공 된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.
  
  참고 항목
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
장르 모델 클래스를 추가합니다. 이렇게 하려면 솔루션 탐색기 Models 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 새 항목 옵션을 선택합니다. 코드에서 클래스 항목을 선택하고 파일 이름을 Genre.cs 다음 추가를 클릭합니다.

새 항목 추가

장르 모델 클래스 추가

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; }
    }
}

이전과 동일한 절차에 따라 Album 클래스를 추가합니다. 이렇게 하려면 솔루션 탐색기 Models 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 새 항목 옵션을 선택합니다. 코드에서 클래스 항목을 선택하고 파일 이름을 Album.cs 다음 추가를 클릭합니다.

앨범 클래스에 장르와 제목이라는 두 가지 속성을 추가합니다. 이렇게 하려면 다음 코드를 추가합니다.

(코드 조각 - 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은 선택한 장르와 일치하는 앨범을 표시하는 데 사용됩니다. 이 작업에서는 이 클래스를 만든 다음 장르와 앨범 목록을 처리하는 두 개의 속성을 추가합니다.

StoreBrowseViewModel 클래스를 추가합니다. 이렇게 하려면 솔루션 탐색기 ViewModels 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 새 항목 옵션을 선택합니다. 코드에서 클래스 항목을 선택하고 파일 이름을 StoreBrowseViewModel.cs 다음 추가를 클릭합니다.
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
    {
    }
}
```

StoreBrowseViewModel 클래스에 장르 및 앨범의 두 가지 속성을 추가합니다. 이렇게 하려면 다음 코드를 추가합니다.

(코드 조각 - 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; }
    }
}

참고 항목

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

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

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

작업 3 - StoreController에서 새 ViewModel 사용

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

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;
```

StoreViewBrowseController 클래스를 사용하도록 Browse 작업 메서드를 바꿉니다. 더미 데이터를 사용하여 장르 및 두 개의 새 Albums 개체를 만듭니다(다음 실습 랩에서는 데이터베이스의 실제 데이터를 사용합니다). 이렇게 하려면 Browse 메서드를 다음 코드로 바꿉다.

(코드 조각 - ASP.NET MVC 4 기본 사항 - 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);
}

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 - 찾아보기 보기 템플릿 추가

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

새 보기 템플릿을 만들기 전에 뷰 추가 대화 상자에서 사용할 ViewModel 클래스를 알 수 있도록 프로젝트를 빌드해야 합니다. 빌드 메뉴 항목을 선택한 다음, 빌드 MvcMusicStore를 선택하여 프로젝트를 빌드합니다.
찾아보기 보기를 추가합니다. 이렇게 하려면 StoreController의 찾아보기 작업 메서드를 마우스 오른쪽 단추로 클릭하고 보기 추가를 클릭합니다.
보기 추가 대화 상자에서 보기 이름이 찾아보기인지 확인합니다. 강력한 형식의 보기 만들기 확인란을 선택하고 모델 클래스 드롭다운에서 StoreBrowseViewModel을 선택합니다. 다른 필드는 기본값으로 둡니다. 그런 다음, 추가를 클릭합니다.

찾아보기 보기 추가

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 - 애플리케이션 실행

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

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /Store/Browse로 변경하시겠습니까? Genre=Disco 를 사용하여 두 개의 앨범이 반환되는지 확인합니다.

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

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

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

필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다. StoreController의 세부 정보 작업 메서드에 대한 새 세부 정보 보기를 추가합니다. 이렇게 하려면 StoreController 클래스에서 Details 메서드를 마우스 오른쪽 단추로 클릭하고 보기 추가를 클릭합니다.
보기 추가 대화 상자에서 보기 이름이 세부 정보인지 확인합니다. 강력한 형식의 보기 만들기 확인란을 선택하고 모델 클래스 드롭다운에서 앨범을 선택합니다. 다른 필드는 기본값으로 둡니다. 그런 다음, 추가를 클릭합니다. 그러면 \Views\Store\Details.cshtml 파일이 만들어지고 열립니다.

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

@{
    ViewBag.Title = "Details";
}

<h2>Album: @Model.Title</h2>
```

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

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

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /Store/Details/5 로 변경하여 앨범 정보를 확인합니다.

앨범 세부 정보 찾아보기

작업 8 - 페이지 간 링크 추가

이 작업에서는 스토어 보기에 링크를 추가하여 모든 장르 이름에 적절한 /Store/찾아보기 URL에 대한 링크를 갖습니다. 이러한 방식으로 장르(예: 디스코)를 클릭하면 /Store/Browse?genre=Disco URL로 이동합니다.

필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다. 인덱스 페이지를 업데이트하여 찾아보기 페이지에 대한 링크를 추가합니다. 이렇게 하려면 솔루션 탐색기 Views 폴더를 확장한 다음 스토어 폴더를 확장하고 Index.cshtml 페이지를 두 번 클릭합니다.
선택한 장르를 나타내는 찾아보기 보기에 대한 링크를 추가합니다. 이렇게 하려면 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>

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

Html.ActionLink에는 여러 오버로드가 있습니다. 이 연습에서는 다음 세 가지 매개 변수를 사용하는 매개 변수를 사용합니다.
1. 장르 이름을 표시하는 링크 텍스트
2. 컨트롤러 작업 이름(찾아보기)
3. 이름(Genre)과 값(장르 이름)을 모두 지정하여 매개 변수 값을 라우팅합니다.

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

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

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /Store로 변경하여 각 장르가 적절한 /Store/찾아보기 URL에 연결되는지 확인합니다.

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

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

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

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

필요한 경우 브라우저를 닫고 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"] 구문을 사용하여 속성에 액세스할 수도 있습니다.

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

솔루션에 별 이미지 추가

View Store/Index.cshtml 을 열고 콘텐츠를 수정합니다. ViewBag 컬렉션에서 "starred" 속성을 읽고 현재 장르 이름이 목록에 있는지 묻습니다. 이 경우 장르 링크에 바로 별 아이콘이 표시됩니다. (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 - 애플리케이션 실행

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

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /Store로 변경하여 각 주요 장르에 관련 레이블이 있는지 확인합니다.

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

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

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

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

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

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

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

참고 항목

Razor 구문은 ASP.NET MVC 3에 도입되었습니다. 목표는 파일에 필요한 문자 및 키 입력 수를 최소화하여 빠르고 유동적인 코딩 워크플로를 가능하게 하는 것입니다. Razor는 기존 C#/VB(또는 기타) 언어 기술을 활용하고 멋진 HTML 생성 워크플로를 가능하게 하는 템플릿 태그 구문을 제공합니다.
F5 키를 눌러 솔루션을 실행하고 갱신된 템플릿을 확인합니다. 다음 기능을 확인할 수 있습니다.
1. 최신 스타일 템플릿
  
  템플릿이 갱신되어 보다 현대적인 스타일을 제공합니다.
  
  ASP.NET MVC 4 서식 파일
2. 적응형 렌더링
  
  브라우저 창 크기 조정을 확인하고 페이지 레이아웃이 새 창 크기에 동적으로 조정되는 방식을 확인합니다. 이러한 템플릿은 적응 렌더링 기술을 사용하여 사용자 지정 없이 데스크톱 및 모바일 플랫폼 모두에서 제대로 렌더링합니다.
  
  다양한 브라우저 크기로 MVC 4 프로젝트 템플릿 ASP.NET
브라우저를 닫아 디버거를 중지하고 Visual Studio로 돌아갑니다.
이제 솔루션을 탐색하고 프로젝트 템플릿에서 MVC 4를 ASP.NET 도입된 새로운 기능 중 일부를 확인할 수 있습니다.

ASP.NET MVC 4 인터넷 애플리케이션 프로젝트 템플릿
1. HTML5 태그
  
  템플릿 보기를 찾아 새 테마 태그를 확인합니다. 예를 들어 홈 폴더 내에서 About.cshtml 보기를 엽니다.
  
  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에 포함됩니다.
    
    참고 항목
    
    이 링크 http://learn.knockoutjs.com/에서 KnockOutJS 라이브러리에 대한 자세한 정보를 얻을 수 있습니다.
  4. Modernizr: 이 라이브러리는 자동으로 실행되므로 HTML5 및 CSS3 기술을 사용할 때 사이트가 이전 브라우저와 호환됩니다.
    
    참고 항목
    
    다음 링크 http://www.modernizr.com/에서 Modernizr 라이브러리에 대한 자세한 정보를 얻을 수 있습니다.
3. 솔루션에 포함된 SimpleMembership
  
  SimpleMembership은 이전 ASP.NET 역할 및 멤버 자격 공급자 시스템을 대체하도록 설계되었습니다. 개발자가 보다 유연한 방식으로 웹 페이지를 더 쉽게 보호할 수 있도록 하는 많은 새로운 기능이 있습니다.
  
  인터넷 템플릿은 이미 SimpleMembership을 통합하기 위해 몇 가지 사항을 설정했습니다. 예를 들어 AccountController는 OAuthWebSecurity(OAuth 계정 등록, 로그인, 관리 등) 및 웹 보안을 사용할 준비가 되어 있습니다.
  
  솔루션에 포함된 SimpleMembership
  
  참고 항목
  
  MSDN에서 OAuthWebSecurity에 대한 자세한 정보를 찾습니다.

참고 항목

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

요약

이 실습 랩을 완료하면 ASP.NET MVC의 기본 사항을 배웠습니다.

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

부록 A: Visual Studio Express 2012 for Web 설치

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

[https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169)로 이동합니다. 또는 웹 플랫폼 설치 관리자를 이미 설치한 경우 해당 설치 관리자를 열고 "Visual Studio Express 2012 for Web with Windows Azure SDK" 제품을 검색할 수 있습니다.
지금 설치를 클릭합니다. 웹 플랫폼 설치 관리자가 없는 경우 먼저 다운로드하여 설치하도록 리디렉션됩니다.
웹 플랫폼 설치 관리자가 열리면 설치를 클릭하여 설치를 시작합니다.

Visual Studio Express 설치
모든 제품의 라이선스 및 사용 약관을 읽고 동의를 클릭하여 계속합니다.

사용 조건 동의
다운로드 및 설치 프로세스가 완료될 때까지 기다립니다.

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

설치 완료
종료를 클릭하여 웹 플랫폼 설치 관리자를 닫습니다.
Visual Studio Express for Web을 열려면 시작 화면으로 이동하여 "VS Express" 쓰기를 시작한 다음 VS Express for Web 타일을 클릭합니다.

VS Express for Web 타일

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

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

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

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

참고 항목

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

Windows Azure 관리 포털에 로그온
명령 모음에서 새로 만들기를 클릭합니다.

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

참고 항목

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

빠른 만들기를 사용하여 새 웹 사이트 만들기
새 웹 사이트가 생성될 때까지 기다립니다.
웹 사이트가 만들어지면 URL 열 아래의 링크를 클릭합니다. 새 웹 사이트가 작동하는지 확인합니다.

새 웹 사이트로 검색

실행 중인 웹 사이트
포털로 돌아가서 이름 열 아래에 있는 웹 사이트의 이름을 클릭하여 관리 페이지를 표시합니다.

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

참고 항목

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

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

게시 프로필 파일 저장

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

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

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

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

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

변경 내용 확인

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

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

웹 사이트 게시
첫 번째 작업에 저장한 게시 프로필을 가져옵니다.

게시 프로필 가져오기
연결 유효성 검사를 클릭합니다. 유효성 검사가 완료되면 다음을 클릭합니다.

참고 항목

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

연결 유효성 검사
설정 페이지의 데이터베이스 섹션에서 데이터베이스 연결의 텍스트 상자 옆에 있는 단추(즉, DefaultConnection)를 클릭합니다.

웹 배포 구성
다음과 같이 데이터베이스 연결을 구성합니다.
- 서버 이름에 tcp: 접두사를 사용하여 SQL Database 서버 URL을 입력합니다.
- 사용자 이름에 서버 관리자 로그인 이름을 입력합니다.
- 암호에 서버 관리자 로그인 암호를 입력합니다.
- 새 데이터베이스 이름(예: MVC4SampleDB)을 입력합니다.
  
  대상 연결 문자열 구성
그런 후 OK를 클릭합니다. 데이터베이스를 만들라는 메시지가 표시되면 [예]를 클릭합니다.

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

SQL Database를 가리키는 연결 문자열
미리 보기 페이지에서 게시를 클릭합니다.

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

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