3부: 보기 및 ViewModels
MVC Music Store는 웹 개발을 위해 ASP.NET MVC 및 Visual Studio를 사용하는 방법을 단계별로 소개하고 설명하는 자습서 애플리케이션입니다.
MVC Music Store는 온라인으로 음악 앨범을 판매하고 기본 사이트 관리, 사용자 로그인 및 쇼핑 카트 기능을 구현하는 간단한 샘플 저장소 구현입니다.
이 자습서 시리즈에서는 ASP.NET MVC Music Store 샘플 애플리케이션을 빌드하기 위해 수행되는 모든 단계를 자세히 설명합니다. 3부에서는 Views 및 ViewModels를 다룹니다.
지금까지 컨트롤러 작업에서 문자열을 반환했습니다. 컨트롤러의 작동 방식을 파악하는 좋은 방법이지만 실제 웹 애플리케이션을 빌드하는 방법은 아닙니다. 사이트를 방문하는 브라우저에 HTML을 다시 생성하는 더 나은 방법을 원할 것입니다. 템플릿 파일을 사용하여 HTML 콘텐츠 보내기를 보다 쉽게 사용자 지정할 수 있습니다. 이것이 바로 보기가 하는 일입니다.
보기 템플릿 추가
뷰 템플릿을 사용하려면 HomeController Index 메서드를 변경하여 ActionResult를 반환하고 아래와 같이 View()를 반환하도록 합니다.
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
위의 변경 내용은 문자열을 반환하는 대신 "보기"를 사용하여 결과를 다시 생성하려고 했음을 나타냅니다.
이제 프로젝트에 적절한 보기 템플릿을 추가합니다. 이렇게 하려면 인덱스 작업 메서드 내에 텍스트 커서를 배치한 다음 마우스 오른쪽 단추를 클릭하고 "보기 추가"를 선택합니다. 그러면 보기 추가 대화 상자가 표시됩니다.
"보기 추가" 대화 상자를 사용하면 템플릿 파일 보기를 빠르고 쉽게 생성할 수 있습니다. 기본적으로 "보기 추가" 대화 상자는 뷰 템플릿을 사용할 작업 메서드와 일치하도록 만들려는 뷰 템플릿의 이름을 미리 채웁니다. HomeController의 Index() 작업 메서드 내에서 "보기 추가" 상황에 맞는 메뉴를 사용했기 때문에 위의 "보기 추가" 대화 상자에는 기본적으로 미리 채워진 보기 이름으로 "Index"가 있습니다. 이 대화 상자의 옵션을 변경할 필요가 없으므로 추가 단추를 클릭합니다.
추가 단추를 클릭하면 Visual Web Developer가 \Views\Home 디렉터리에 새 Index.cshtml 보기 템플릿을 만들어 아직 없는 경우 폴더를 만듭니다.
"Index.cshtml" 파일의 이름 및 폴더 위치는 중요하며 기본 ASP.NET MVC 명명 규칙을 따릅니다. 디렉터리 이름 \Views\Home은 HomeController라는 컨트롤러와 일치합니다. 뷰 템플릿 이름 인덱스 는 보기를 표시할 컨트롤러 작업 메서드와 일치합니다.
ASP.NET MVC를 사용하면 이 명명 규칙을 사용하여 뷰를 반환할 때 보기 템플릿의 이름이나 위치를 명시적으로 지정하지 않아도 됩니다. HomeController 내에서 아래와 같은 코드를 작성할 때 기본적으로 \Views\Home\Index.cshtml 뷰 템플릿을 렌더링합니다.
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
Visual Web Developer는 "보기 추가" 대화 상자에서 "추가" 단추를 클릭한 후 "Index.cshtml" 보기 템플릿을 만들고 열었습니다. Index.cshtml의 내용은 다음과 같습니다.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
이 보기는 ASP.NET Web Forms 및 이전 버전의 ASP.NET MVC에 사용되는 Web Forms 뷰 엔진보다 더 간결한 Razor 구문을 사용합니다. Web Forms 뷰 엔진은 ASP.NET MVC 3에서 계속 사용할 수 있지만 많은 개발자는 Razor 보기 엔진이 MVC 개발 ASP.NET 매우 적합하다는 것을 알게 됩니다.
처음 세 줄은 ViewBag.Title을 사용하여 페이지 제목을 설정합니다. 이 작업이 곧 어떻게 작동하는지 자세히 살펴보겠습니다. 하지만 먼저 텍스트 제목 텍스트를 업데이트하고 페이지를 살펴보겠습니다. <아래와 같이 h2> 태그를 업데이트하여 "이것은 홈 페이지입니다"라고 말합니다.
@{
ViewBag.Title = "Index";
}
<h2>This is the Home Page</h2>
애플리케이션을 실행하면 새 텍스트가 홈페이지에 표시됩니다.
일반적인 사이트 요소에 레이아웃 사용
대부분의 웹 사이트에는 탐색, 바닥글, 로고 이미지, 스타일시트 참조 등 여러 페이지 간에 공유되는 콘텐츠가 있습니다. Razor 보기 엔진을 사용하면 /Views/Shared 폴더 내에 자동으로 만들어진 _Layout.cshtml이라는 페이지를 사용하여 쉽게 관리할 수 있습니다.
이 폴더를 두 번 클릭하여 아래에 표시된 내용을 봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"
type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
개별 보기의 콘텐츠는 명령에 의해 표시되며, 외부에 @RenderBody() 표시하려는 일반적인 콘텐츠는 _Layout.cshtml 태그에 추가할 수 있습니다. MVC Music Store에 사이트의 모든 페이지에 홈 페이지 및 스토어 영역에 대한 링크가 있는 공통 헤더가 있으므로 해당 @RenderBody() 문 바로 위의 템플릿에 추가하겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"
type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>
ASP.NET MVC MUSIC STORE</h1>
<ul id="navlist">
<li class="first"><a href="/"
id="current">Home</a></li>
<li><a
href="/Store/">Store</a></li>
</ul>
</div>
@RenderBody()
</body>
</html>
StyleSheet 업데이트
빈 프로젝트 템플릿에는 유효성 검사 메시지를 표시하는 데 사용되는 스타일만 포함하는 매우 간소화된 CSS 파일이 포함되어 있습니다. 디자이너는 사이트의 모양과 느낌을 정의하는 몇 가지 추가 CSS 및 이미지를 제공했으므로 지금 추가하겠습니다.
업데이트된 CSS 파일 및 이미지는 MVC-Music-Store에서 사용할 수 있는 MvcMusicStore-Assets.zip 콘텐츠 디렉터리에 포함되어 있습니다. Windows Explorer 두 항목을 모두 선택하고 아래와 같이 Visual Web Developer의 솔루션 콘텐츠 폴더에 삭제합니다.
기존 Site.css 파일을 덮어쓸지 확인하라는 메시지가 표시됩니다. 예를 클릭합니다.
이제 애플리케이션의 Content 폴더가 다음과 같이 표시됩니다.
이제 애플리케이션을 실행하고 홈 페이지에서 변경 내용이 어떻게 표시되는지 살펴보겠습니다.
- 변경된 내용을 검토해 보겠습니다. View 템플릿이 표준 명명 규칙을 따랐기 때문에 "return View()"라는 코드에도 불구하고 HomeController의 Index 작업 메서드가 \Views\Home\Index.cshtmlView 템플릿을 찾아서 표시했습니다.
- 홈페이지에는 \Views\Home\Index.cshtml 보기 템플릿 내에 정의된 간단한 환영 메시지가 표시됩니다.
- 홈페이지는 _Layout.cshtml 템플릿을 사용하므로 환영 메시지가 표준 사이트 HTML 레이아웃 내에 포함됩니다.
모델을 사용하여 뷰에 정보 전달
하드 코딩된 HTML만 표시하는 보기 템플릿은 매우 흥미로운 웹 사이트를 만들지 않습니다. 동적 웹 사이트를 만들려면 컨트롤러 작업의 정보를 보기 템플릿으로 전달하려고 합니다.
Model-View-Controller 패턴에서 Model이라는 용어는 애플리케이션의 데이터를 나타내는 개체를 나타냅니다. 모델 개체는 데이터베이스의 테이블에 해당하는 경우가 많지만 필요하지는 않습니다.
ActionResult를 반환하는 컨트롤러 작업 메서드는 모델 개체를 뷰에 전달할 수 있습니다. 이를 통해 컨트롤러는 응답을 생성하는 데 필요한 모든 정보를 정리한 다음, 적절한 HTML 응답을 생성하는 데 사용할 보기 템플릿에 이 정보를 전달할 수 있습니다. 작동 중인 것을 확인하여 이해하기가 가장 쉽기 때문에 시작해 보겠습니다.
먼저 스토어 내에서 장르 및 앨범을 나타내는 몇 가지 모델 클래스를 만듭니다. 먼저 Genre 클래스를 만들어 보겠습니다. 프로젝트 내에서 "Models" 폴더를 마우스 오른쪽 단추로 클릭하고 "클래스 추가" 옵션을 선택한 다음 파일 이름을 "Genre.cs"로 지정합니다.
그런 다음, 생성된 클래스에 공용 문자열 Name 속성을 추가합니다.
public class Genre
{
public string Name { get; set; }
}
참고: 궁금한 경우 { get; set; } 표기법이 C#의 자동 구현 속성 기능을 사용합니다. 이렇게 하면 지원 필드를 선언할 필요 없이 속성의 이점을 얻을 수 있습니다.
다음으로 동일한 단계에 따라 Title 및 Genre 속성이 있는 Album 클래스(Album.cs)를 만듭니다.
public class Album
{
public string Title { get; set; }
public Genre Genre { get; set; }
}
이제 모델의 동적 정보를 표시하는 뷰를 사용하도록 StoreController를 수정할 수 있습니다. 지금 데모용으로 요청 ID를 기준으로 앨범 이름을 지정한 경우 아래 보기와 같이 해당 정보를 표시할 수 있습니다.
먼저 스토어 세부 정보 작업을 변경하여 단일 앨범에 대한 정보를 표시합니다. StoreControllers 클래스의 맨 위에 "using" 문을 추가하여 MvcMusicStore.Models 네임스페이스를 포함하므로 앨범 클래스를 사용할 때마다 MvcMusicStore.Models.Album을 입력할 필요가 없습니다. 이제 해당 클래스의 "usings" 섹션이 다음과 같이 표시됩니다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;
다음으로, HomeController의 Index 메서드와 마찬가지로 문자열이 아닌 ActionResult를 반환할 수 있도록 Details 컨트롤러 작업을 업데이트합니다.
public ActionResult Details(int id)
이제 Album 개체를 뷰로 반환하도록 논리를 수정할 수 있습니다. 이 자습서의 뒷부분에서는 데이터베이스에서 데이터를 검색하지만 지금은 "더미 데이터"를 사용하여 시작합니다.
public ActionResult Details(int id)
{
var album = new Album { Title = "Album " + id };
return View(album);
}
참고: C#에 익숙하지 않은 경우 var을 사용하면 앨범 변수가 늦게 바인딩된다고 가정할 수 있습니다. 정답이 아닙니다. C# 컴파일러는 변수에 할당하는 내용에 따라 형식 유추를 사용하여 앨범이 Album 형식인지 확인하고 로컬 앨범 변수를 앨범 유형으로 컴파일하므로 컴파일 시간 검사 및 Visual Studio 코드 편집기 지원을 받습니다.
이제 앨범을 사용하여 HTML 응답을 생성하는 보기 템플릿을 만들어 보겠습니다. 이렇게 하기 전에 보기 추가 대화 상자에서 새로 만든 Album 클래스에 대해 알 수 있도록 프로젝트를 빌드해야 합니다. 디버그⇨빌드 MvcMusicStore 메뉴 항목을 선택하여 프로젝트를 빌드할 수 있습니다(추가 크레딧의 경우 Ctrl-Shift-B 바로 가기를 사용하여 프로젝트를 빌드할 수 있습니다).
이제 지원 클래스를 설정했으므로 보기 템플릿을 빌드할 준비가 되었습니다. Details 메서드 내에서 마우스 오른쪽 단추를 클릭하고 "보기 추가..."를 선택합니다. 상황에 맞는 메뉴에서
HomeController를 사용하여 이전에 했던 것처럼 새 보기 템플릿을 만들겠습니다. StoreController에서 만들기 때문에 기본적으로 \Views\Store\Index.cshtml 파일에 생성됩니다.
이전과 달리 "강력한 형식의 보기 만들기" 확인란을 검사. 그런 다음, "데이터 클래스 보기" 드롭다운 목록 내에서 "Album" 클래스를 선택합니다. 이렇게 하면 "보기 추가" 대화 상자가 Album 개체가 사용할 수 있도록 전달될 것으로 예상되는 보기 템플릿을 만듭니다.
"추가" 단추를 클릭하면 다음 코드를 포함하는 \Views\Store\Details.cshtml View 템플릿이 만들어집니다.
@model MvcMusicStore.Models.Album
@{
ViewBag.Title = "Details";
}
<h2>Details</h2>
이 보기가 Album 클래스에 강력한 형식임을 나타내는 첫 번째 줄을 확인합니다. Razor 뷰 엔진은 Album 개체가 전달되었음을 이해하므로 모델 속성에 쉽게 액세스하고 Visual Web Developer 편집기에서 IntelliSense의 이점을 누릴 수 있습니다.
<다음과 같이 표시되도록 해당 줄을 수정하여 앨범의 Title 속성을 표시하도록 h2> 태그를 업데이트합니다.
<h2>Album: @Model.Title</h2>
키워드(keyword) 이후 @Model 기간을 입력하면 IntelliSense가 트리거되어 Album 클래스에서 지원하는 속성과 메서드가 표시됩니다.
이제 프로젝트를 다시 실행하고 /Store/Details/5 URL을 방문해 보겠습니다. 아래와 같은 앨범의 세부 정보가 표시됩니다.
이제 Store 찾아보기 작업 메서드에 대해 유사한 업데이트를 수행합니다. ActionResult를 반환하도록 메서드를 업데이트하고 메서드 논리를 수정하여 새 Genre 개체를 만들고 View로 반환합니다.
public ActionResult Browse(string genre)
{
var genreModel = new Genre { Name = genre };
return View(genreModel);
}
찾아보기 메서드를 마우스 오른쪽 단추로 클릭하고 "보기 추가..."를 선택합니다. 상황에 맞는 메뉴에서 강력한 형식의 뷰를 추가하여 Genre 클래스에 강력한 형식의 을 추가합니다.
뷰 코드의 <h2> 요소(/Views/Store/Browse.cshtml)를 업데이트하여 장르 정보를 표시합니다.
@model MvcMusicStore.Models.Genre
@{
ViewBag.Title = "Browse";
}
<h2>Browsing Genre: @Model.Name</h2>
이제 프로젝트를 다시 실행하고 /Store/Browse로 이동해 보겠습니다. Genre=Disco URL. 아래와 같이 찾아보기 페이지가 표시됩니다.
마지막으로 스토어 인덱 스 작업 메서드를 약간 더 복잡하게 업데이트하고 스토어의 모든 장르 목록을 표시하도록 살펴보겠습니다. 단일 장르가 아닌 장르 목록을 모델 개체로 사용하여 이 작업을 수행합니다.
public ActionResult Index()
{
var genres = new List<Genre>
{
new Genre { Name = "Disco"},
new Genre { Name = "Jazz"},
new Genre { Name = "Rock"}
};
return View(genres);
}
스토어 인덱스 작업 메서드를 마우스 오른쪽 단추로 클릭하고 이전처럼 보기 추가를 선택하고, 장르를 모델 클래스로 선택한 다음, 추가 단추를 누릅니다.
먼저 선언을 @model 변경하여 뷰에 하나만이 아닌 여러 Genre 개체가 있음을 나타냅니다. /Store/Index.cshtml의 첫 번째 줄을 다음과 같이 읽도록 변경합니다.
@model IEnumerable<MvcMusicStore.Models.Genre>
이렇게 하면 Razor 뷰 엔진이 여러 Genre 개체를 보유할 수 있는 모델 개체로 작업할 것임을 알 수 있습니다. 목록>< 장르가 아닌 IEnumerable<Genre>을 사용하는 것이 일반적이므로 나중에 모델 형식을 IEnumerable 인터페이스를 지원하는 개체 형식으로 변경할 수 있습니다.
다음으로, 아래 완성된 뷰 코드와 같이 모델의 Genre 개체를 반복합니다.
@model IEnumerable<MvcMusicStore.Models.Genre>
@{
ViewBag.Title = "Store";
}
<h3>Browse Genres</h3>
<p>
Select from @Model.Count()
genres:</p>
<ul>
@foreach (var genre in Model)
{
<li>@genre.Name</li>
}
</ul>
이 코드를 입력할 때 모든 IntelliSense 지원이 지원되므로 "@Model"를 입력하면 Genre 형식의 IEnumerable에서 지원하는 모든 메서드와 속성이 표시됩니다.
"foreach" 루프 내에서 Visual Web Developer는 각 항목이 Genre 형식임을 알고 있으므로 각 장르 유형에 대한 IntelliSense가 표시됩니다.
다음으로, 스캐폴딩 기능은 Genre 개체를 검사하고 각 개체에 Name 속성이 있음을 확인하여 반복하여 작성합니다. 또한 각 개별 항목에 대한 편집, 세부 정보 및 삭제 링크를 생성합니다. 나중에 스토어 관리자에서 이를 활용하지만 지금은 대신 간단한 목록을 만들고 싶습니다.
애플리케이션을 실행하고 /Store로 이동하면 장르의 개수와 목록이 모두 표시됩니다.
페이지 간 링크 추가
장르를 나열하는 /Store URL은 현재 장르 이름을 일반 텍스트로 나열합니다. 일반 텍스트 대신 적절한 /Store/Browse URL에 대한 장르 이름 링크가 있으므로 "Disco"와 같은 음악 장르를 클릭하면 /Store/Browse?genre=Disco URL로 이동되도록 변경해 보겠습니다. 아래와 같은 코드를 사용하여 이러한 링크를 출력하도록 \Views\Store\Index.cshtml View 템플릿을 업데이트할 수 있습니다 (에서 입력하지 마세요. 개선하겠습니다).
<ul>
@foreach (var genre in Model)
{
<li><a href="/Store/Browse?genre=@genre.Name">@genre.Name</a></li>
}
</ul>
작동하지만 하드 코딩된 문자열에 의존하므로 나중에 문제가 발생할 수 있습니다. instance 컨트롤러의 이름을 바꾸려면 코드를 검색하여 업데이트해야 하는 링크를 찾아야 합니다.
사용할 수 있는 다른 방법은 HTML 도우미 메서드를 활용하는 것입니다. ASP.NET MVC에는 다음과 같은 다양한 일반적인 작업을 수행하기 위해 템플릿 보기 코드에서 사용할 수 있는 HTML 도우미 메서드가 포함되어 있습니다. Html.ActionLink() 도우미 메서드는 특히 유용하며 HTML <> 링크를 쉽게 빌드할 수 있으며 URL 경로가 URL 인코딩되었는지 확인하는 등 성가신 세부 정보를 처리합니다.
Html.ActionLink()에는 링크에 필요한 만큼의 정보를 지정할 수 있는 여러 가지 오버로드가 있습니다. 가장 간단한 경우 클라이언트에서 하이퍼링크를 클릭할 때 이동하는 링크 텍스트와 Action 메서드만 입력합니다. 예를 들어 다음 호출을 사용하여 "Store 인덱스로 이동" 링크 텍스트가 있는 Store 세부 정보 페이지의 "/Store/" Index() 메서드에 연결할 수 있습니다.
@Html.ActionLink("Go
to the Store Index", "Index")
참고: 이 경우 현재 뷰를 렌더링하는 동일한 컨트롤러 내의 다른 작업에 연결하기 때문에 컨트롤러 이름을 지정할 필요가 없었습니다.
찾아보기 페이지에 대한 링크는 매개 변수를 전달해야 하므로 세 가지 매개 변수를 사용하는 Html.ActionLink 메서드의 또 다른 오버로드를 사용합니다.
-
- 장르 이름을 표시하는 링크 텍스트
-
- 컨트롤러 작업 이름(찾아보기)
-
- 이름(Genre)과 값(장르 이름)을 모두 지정하여 매개 변수 값을 라우팅합니다.
이 모든 것을 종합하면 이러한 링크를 스토어 인덱스 보기에 작성하는 방법은 다음과 같습니다.
<ul>
@foreach (var genre in Model)
{
<li>@Html.ActionLink(genre.Name,
"Browse", new { genre = genre.Name })</li>
}
</ul>
이제 프로젝트를 다시 실행하고 /Store/URL에 액세스하면 장르 목록이 표시됩니다. 각 장르는 하이퍼링크입니다. 클릭하면 /Store/Browse?genre=[genre] URL로 이동합니다.
장르 목록의 HTML은 다음과 같습니다.
<ul>
<li><a href="/Store/Browse?genre=Disco">Disco</a>
</li>
<li><a href="/Store/Browse?genre=Jazz">Jazz</a>
</li>
<li><a href="/Store/Browse?genre=Rock">Rock</a>
</li>
</ul>
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기