이 자습서에서는 ASP.NET MVC의 기본 사항을 소개합니다. 데이터베이스에서 읽고 쓰는 간단한 웹 애플리케이션을 만듭니다. 다른 ASP.NET MVC 자습서 및 샘플을 찾으려면 ASP.NET MVC 학습 센터를 방문하세요.
이 섹션에서는 HelloWorldController 클래스가 View 템플릿 파일을 사용하여 생성되는 HTML 응답을 클라이언트에 다시 깔끔하게 캡슐화하는 방법을 살펴보겠습니다.
먼저 Index 메서드와 함께 View 템플릿을 사용해 보겠습니다. 메서드를 Index라고 하며 HelloWorldController에 있습니다. 현재 Index() 메서드는 Controller 클래스 내에서 하드 코딩된 메시지와 함께 문자열을 반환합니다.
public string Index()
{
return "<html><body>This is my default action...</body></html>";
}
이제 Index 메서드를 다음과 같이 변경해 보겠습니다.
public ActionResult Index()
{
return View();
}
이제 Index() 메서드에 사용할 수 있는 보기 템플릿을 프로젝트에 추가해 보겠습니다. 이렇게 하려면 Index 메서드 중간에 있는 마우스로 마우스를 마우스 오른쪽 단추로 클릭하고 보기 추가...를 클릭합니다.
그러면 Index 메서드에서 사용할 수 있는 보기 템플릿을 만드는 방법에 대한 몇 가지 옵션을 제공하는 "보기 추가" 대화 상자가 표시됩니다. 지금은 아무것도 변경하지 말고 추가 단추를 클릭합니다.
추가를 클릭하면 여기에 표시된 대로 솔루션 폴더에 새 폴더와 새 파일이 표시됩니다. 이제 Views 아래에 HelloWorld 폴더가 있고 해당 폴더 내에 Index.aspx 파일이 있습니다.
새 인덱스 파일도 이미 열려 있으며 편집할 준비가 되어 있습니다. 첫 번째 <h2 Index</h2>> 아래에 "헬로 월드"와 같은 텍스트를 추가합니다.
<h2>Index</h2>
Hello world!
애플리케이션을 실행하고 브라우저에서 다시 방문 http://localhost:xx/HelloWorld 합니다. 이 예제에서 컨트롤러의 Index 메서드는 아무 작업도 수행하지 않았지만 뷰 템플릿 파일을 사용하여 응답을 클라이언트에 다시 렌더링하려고 함을 나타내는 "return View()"를 호출했습니다. 사용할 보기 템플릿 파일의 이름을 명시적으로 지정하지 않았기 때문에 ASP.NET MVC는 기본적으로 \Views\HelloWorld 폴더 내의 Index.aspx 뷰 파일을 사용합니다. 이제 보기에서 하드 코딩한 문자열이 표시됩니다.
꽤 좋아 보인다. 그러나 브라우저의 제목에 "인덱스"가 표시되고 페이지의 큰 제목에 "내 MVC 애플리케이션"이 표시됩니다. 변경해 보겠습니다.
보기 및 마스터 페이지 변경
먼저 "내 MVC 애플리케이션"이라는 텍스트를 변경해 보겠습니다. 해당 텍스트는 공유되며 모든 페이지에 표시됩니다. 앱의 모든 페이지에 있더라도 실제로 코드에서 한 곳에만 표시됩니다. 솔루션 탐색기 /Views/Shared 폴더로 이동하여 Site.Master 파일을 엽니다. 이 파일을 마스터 페이지라고 하며 다른 모든 페이지에서 사용하는 공유 "셸"입니다.
이 파일에서 ContentPlaceholder "MainContent"라는 일부 텍스트를 확인합니다.
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
이 자리 표시자는 만드는 모든 페이지가 master 페이지에 "래핑"으로 표시되는 위치입니다. 제목을 변경한 다음, 앱을 실행하고 여러 페이지를 방문합니다. 하나의 변경 내용이 여러 페이지에 표시되는 것을 알 수 있습니다.
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
이제 모든 페이지에는 "내 MVC 영화 애플리케이션"의 기본 제목(H1)이 있습니다. 모든 페이지에서 공유되는 맨 위에 있는 흰색 텍스트를 처리합니다.
다음은 Site.Master 전체에서 변경된 제목입니다.
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
이제 인덱스 페이지의 제목을 변경해 보겠습니다.
/HelloWorld/Index.aspx를 엽니다. 변경해야 할 두 가지 장소가 있습니다. 먼저 브라우저의 제목에 표시되는 제목, 보조 헤더(H2)도 표시됩니다. 앱의 어떤 부분이 변경되는지 코드 비트를 볼 수 있도록 각각 약간 다르게 만듭니다.
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Movie List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>My Movie List</h2>
Hello World!
</asp:Content>
앱을 실행하고 /Movies를 방문합니다. 브라우저 제목, 기본 제목 및 보조 제목이 변경되었습니다. 보기가 약간 변경되어 앱에서 큰 변경을 쉽게 수행할 수 있습니다.
"데이터"(이 경우 "헬로 월드!" 메시지)의 작은 부분도 하드 코딩되었습니다. V(보기)가 있고 C(컨트롤러)가 있지만 M(모델)은 아직 없습니다. 곧 데이터베이스를 만들고 데이터베이스에서 모델 데이터를 검색하는 방법을 살펴보겠습니다.
ViewModel 전달
데이터베이스로 이동하여 모델에 대해 이야기하기 전에 먼저 "ViewModels"에 대해 이야기해 보겠습니다. 이러한 개체는 보기 템플릿이 HTML 응답을 클라이언트에 다시 렌더링하는 데 필요한 항목을 나타내는 개체입니다. 일반적으로 컨트롤러 클래스를 통해 만들어지고 View 템플릿에 전달되며 보기 템플릿에 필요한 데이터만 포함해야 하며 더 이상 포함되지 않아야 합니다.
이전에는 HelloWorld 샘플에서 Welcome() 작업 메서드가 이름과 numTimes 매개 변수를 가져와서 브라우저에 출력했습니다. 컨트롤러가 이 응답을 직접 렌더링하는 대신, 해당 데이터를 저장할 작은 클래스를 만들고 뷰 템플릿에 전달하여 HTML 응답을 사용하여 다시 렌더링해 보겠습니다. 이러한 방식으로 컨트롤러는 한 가지와 보기 템플릿에 대해 서로 관련이 있습니다. 이를 통해 애플리케이션 내에서 "문제 분리"클린 유지할 수 있습니다.
HelloWorldController.cs 파일로 돌아가서 새 "WelcomeViewModel" 클래스를 추가하고 컨트롤러 내에서 Welcome 메서드를 변경합니다. 다음은 동일한 파일에 새 클래스가 있는 전체 HelloWorldController.cs입니다.
using System.Web.Mvc;
namespace Movies.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
var viewModel = new WelcomeViewModel
{
Message = "Hello " + name,
NumTimes = numTimes
};
return View(viewModel);
}
public class WelcomeViewModel
{
public string Message { get; set; }
public int NumTimes { get; set; }
}
}
}
여러 줄에 있지만 Welcome 메서드는 실제로 두 개의 코드 문에 불과합니다. 첫 번째 문은 두 매개 변수를 ViewModel 개체로 패키지하고 두 번째 문은 결과 개체를 View에 전달합니다.
이제 시작 보기 템플릿이 필요합니다. 시작 방법을 마우스 오른쪽 단추로 클릭하고 보기 추가를 선택합니다. 이번에는 "강력한 형식의 보기 만들기"를 검사 드롭다운 목록에서 WelcomeViewModel 클래스를 선택합니다. 이 새 보기는 WelcomeViewModels에 대해서만 알 수 있으며 다른 유형의 개체는 알 수 없습니다.
참고: 드롭다운 목록에 표시하려면 WelcomeViewModel을 추가한 후 한 번 컴파일해야 합니다.
보기 추가 대화 상자의 모양은 다음과 같습니다. 추가 단추를 클릭합니다.
새 Welcome.aspx의 <h2> 아래에 이 코드를 추가합니다. 루프를 만들고 사용자가 말하는 대로 Hello를 여러 번 말하겠습니다.
<% for(int i=0;i<Model.NumTimes;i++) { %>
<%h3><%: Model.Message %></h3>
<% } %>
또한 입력하는 동안 다음 스크린샷에 표시된 것처럼 Model 개체를 참조할 때마다 이 View에 WelcomeViewModel(결혼, 기억하시겠습니까?)에 대해 설명했으므로 Intellisense에 도움이 됩니다.
애플리케이션을 실행하고 다시 방문 http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 합니다. 이제 URL에서 데이터를 가져오고 컨트롤러에 자동으로 전달되고 컨트롤러는 데이터를 ViewModel로 패키지하고 해당 개체를 View에 전달합니다. 보다 보기는 데이터를 사용자에게 HTML로 표시합니다.
글쎄, 그것은 모델에 대한 일종의 "M"이었지만 데이터베이스 종류는 아니었습니다. 배운 내용을 가져와서 영화 데이터베이스를 만들어 보겠습니다.