보기 추가(C#)
작성자 : Rick Anderson
참고
이 자습서의 업데이트된 버전은 ASP.NET MVC 5 및 Visual Studio 2013 사용하는 여기에서 사용할 수 있습니다. 더 안전하고 따라하기가 훨씬 더 간단하며 더 많은 기능을 보여 줍니다.
이 자습서에서는 무료 버전의 Microsoft Visual Studio인 Microsoft Visual Web Developer 2010 Express Service Pack 1을 사용하여 ASP.NET MVC 웹 애플리케이션을 빌드하는 기본 사항을 설명합니다. 시작하기 전에 아래에 나열된 필수 구성 요소를 설치했는지 확인합니다. 웹 플랫폼 설치 관리자 링크를 클릭하여 모두 설치할 수 있습니다. 또는 다음 링크를 사용하여 필수 구성 요소를 개별적으로 설치할 수 있습니다.
Visual Web Developer 2010 대신 Visual Studio 2010을 사용하는 경우 Visual Studio 2010 필수 구성 요소 링크를 클릭하여 필수 구성 요소를 설치합니다.
C# 소스 코드가 포함된 Visual Web Developer 프로젝트를 이 항목과 함께 사용할 수 있습니다. C# 버전을 다운로드합니다. Visual Basic을 선호하는 경우 이 자습서의 Visual Basic 버전 으로 전환합니다.
이 섹션에서는 뷰 템플릿 파일을 사용하여 클라이언트에 대한 HTML 응답을 생성하는 프로세스를 깔끔하게 캡슐화하도록 클래스를 수정 HelloWorldController 합니다.
ASP.NET MVC 3에 도입된 새 Razor 보기 엔진 을 사용하여 보기 템플릿 파일을 만듭니다. Razor 기반 뷰 템플릿에는 .cshtml 파일 확장명이 있으며 C#을 사용하여 HTML 출력을 만드는 우아한 방법을 제공합니다. Razor는 보기 템플릿을 작성할 때 필요한 문자 및 키 입력 수를 최소화하고 빠르고 유동적인 코딩 워크플로를 가능하게 합니다.
먼저 클래스의 메서드와 함께 Index 뷰 템플릿을 HelloWorldController 사용합니다. 현재 Index 메서드는 컨트롤러 클래스에서 하드 코딩된 메시지 문자열을 반환합니다. Index 다음과 같이 개체를 View 반환하도록 메서드를 변경합니다.
public ActionResult Index()
{
return View();
}
이 코드는 보기 템플릿을 사용하여 브라우저에 대한 HTML 응답을 생성합니다. 프로젝트에서 메서드와 함께 사용할 수 있는 보기 템플릿을 추가합니다 Index . 이렇게 하려면 메서드 내부를 마우스 오른쪽 단추로 Index 클릭하고 보기 추가를 클릭합니다.
보기 추가 대화 상자가 나타납니다. 기본값은 그대로 두고 추가 단추를 클릭합니다.
MvcMovie\Views\HelloWorld 폴더와 MvcMovie\Views\HelloWorld\Index.cshtml 파일이 만들어집니다. 솔루션 탐색기 볼 수 있습니다.
다음은 생성된 Index.cshtml 파일을 보여 줍니다.
태그 아래에 HTML을 추가합니다 <h2> . 수정된 MvcMovie\Views\HelloWorld\Index.cshtml 파일은 다음과 같습니다.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
애플리케이션을 실행하고 컨트롤러(http://localhost:xxxx/HelloWorld)로 이동합니다HelloWorld. 컨트롤러의 메서드는 Index 많은 작업을 수행하지 않았습니다. 메서드가 뷰 템플릿 파일을 사용하여 브라우저에 응답을 렌더링하도록 지정한 문을 return View()실행했습니다. 사용할 보기 템플릿 파일의 이름을 명시적으로 지정하지 않았기 때문에 ASP.NET MVC는 기본적으로 \Views\HelloWorld 폴더에서 Index.cshtml 보기 파일을 사용합니다. 아래 이미지는 보기에서 하드 코딩된 문자열을 보여줍니다.
꽤 좋아 보인다. 그러나 브라우저의 제목 표시줄에 "인덱스"가 표시되고 페이지의 큰 제목에 "내 MVC 애플리케이션"이 표시됩니다. 변경해 보겠습니다.
보기 및 레이아웃 페이지 변경
먼저 페이지 맨 위에 있는 "내 MVC 애플리케이션" 제목을 변경하려고 합니다. 해당 텍스트는 모든 페이지에 공통적으로 적용됩니다. 실제로는 애플리케이션의 모든 페이지에 표시되더라도 프로젝트의 한 곳에서만 구현됩니다. 솔루션 탐색기/Views/Shared 폴더로 이동하여 _Layout.cshtml 파일을 엽니다. 이 파일을 레이아웃 페이지 라고 하며 다른 모든 페이지에서 사용하는 공유 "셸"입니다.
레이아웃 템플릿을 사용하면 한 곳에서 사이트의 HTML 컨테이너 레이아웃을 지정한 다음 사이트의 여러 페이지에 걸쳐 적용할 수 있습니다. @RenderBody() 파일 아래쪽 근처에 있는 줄을 확인합니다. RenderBody 는 사용자가 만든 모든 보기별 페이지가 레이아웃 페이지에 "래핑"된 자리 표시자입니다. 레이아웃 템플릿의 제목 제목을 "내 MVC 애플리케이션"에서 "MVC 동영상 앱"으로 변경합니다.
<div id="title">
<h1>MVC Movie App</h1>
</div>
애플리케이션을 실행하고 이제 "MVC 무비 앱"이 표시됩니다. 정보 링크를 클릭하면 해당 페이지에 "MVC 영화 앱"도 표시되는 방식이 표시됩니다. 레이아웃 템플릿에서 한 번 변경하고 사이트의 모든 페이지에 새 제목이 반영되도록 할 수 있었습니다.
전체 _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>
<div class="page">
<header>
<div id="title">
<h1>MVC Movie App</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
이제 인덱스 페이지(보기)의 제목을 변경해 보겠습니다.
MvcMovie\Views\HelloWorld\Index.cshtml을 엽니다. 변경할 위치는 두 가지입니다. 첫째, 브라우저의 제목에 표시되는 텍스트, 보조 헤더( <h2> 요소)의 텍스트입니다. 어떤 코드에서 어떤 앱의 부분을 변경하는지 볼 수 있도록 약간 다르게 할 수 있습니다.
@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
표시할 HTML 제목을 나타내기 위해 위의 코드는 개체의 ViewBag 속성(Index.cshtml 뷰 템플릿에 있는)을 설정합니다Title. 레이아웃 템플릿의 소스 코드를 다시 살펴보면 템플릿이 HTML 섹션의 <head> 일부로 요소에서 <title> 이 값을 사용하는 것을 알 수 있습니다. 이 방법을 사용하면 보기 템플릿과 레이아웃 파일 간에 다른 매개 변수를 쉽게 전달할 수 있습니다.
애플리케이션을 실행하고 로 이동합니다 http://localhost:xx/HelloWorld. 브라우저 제목, 기본 제목 및 작은 제목이 변경된 것을 확인합니다. (브라우저에 변경 내용이 표시되지 않으면 캐시된 콘텐츠를 볼 수 있습니다. 브라우저에서 Ctrl+F5를 눌러 서버의 응답을 강제로 로드합니다.)
또한 Index.cshtml 뷰 템플릿의 콘텐츠가 _Layout.cshtml 뷰 템플릿과 병합되고 단일 HTML 응답이 브라우저로 전송된 방법을 확인합니다. 레이아웃 템플릿을 사용하면 애플리케이션의 모든 페이지에 걸쳐 적용되는 변경 내용을 쉽게 만들 수 있습니다.
하지만 약간의 "데이터"(이 경우 "보기 템플릿에서 Hello!" 메시지)는 하드 코딩되어 있습니다. 이 MVC 애플리케이션에는 "V"(보기)가 있고 "C"(컨트롤러)가 있지만 아직 "M"(모델)은 없습니다. 곧 데이터베이스를 만들고 데이터베이스에서 모델 데이터를 검색하는 방법을 살펴보겠습니다.
컨트롤러에서 보기로 데이터 전달
데이터베이스로 이동하여 모델에 대해 이야기하기 전에 먼저 컨트롤러에서 보기로 정보를 전달하는 방법에 대해 살펴보겠습니다. 들어오는 URL 요청에 대한 응답으로 컨트롤러 클래스가 호출됩니다. 컨트롤러 클래스는 들어오는 매개 변수를 처리하고, 데이터베이스에서 데이터를 검색하고, 궁극적으로 브라우저로 다시 보낼 응답 유형을 결정하는 코드를 작성하는 곳입니다. 그런 다음 컨트롤러에서 보기 템플릿을 사용하여 브라우저에 대한 HTML 응답을 생성하고 서식을 지정할 수 있습니다.
컨트롤러는 보기 템플릿이 브라우저에 응답을 렌더링하기 위해 필요한 모든 데이터 또는 개체를 제공해야 합니다. 뷰 템플릿은 비즈니스 논리를 수행하거나 데이터베이스와 직접 상호 작용해서는 안 됩니다. 대신 컨트롤러에서 제공하는 데이터에서만 작동합니다. 이 "문제 분리"를 유지 관리하면 코드를 클린 유지 관리할 수 있습니다.
현재 클래스의 Welcome 작업 메서드 HelloWorldController 는 및 매개 변수를 numTimes 사용한 name 다음, 값을 브라우저에 직접 출력합니다. 컨트롤러가 이 응답을 문자열로 렌더링하는 대신 보기 템플릿을 사용하도록 컨트롤러를 변경해 보겠습니다. 보기 템플릿은 동적 응답을 생성합니다. 즉, 응답을 생성하기 위해 컨트롤러에서 보기로 일부 적절한 데이터를 전달해야 합니다. 컨트롤러가 뷰 템플릿에 필요한 동적 데이터를 뷰 템플릿이 액세스할 수 있는 개체에 ViewBag 배치하여 이 작업을 수행할 수 있습니다.
HelloWorldController.cs 파일로 돌아가서 메서드를 Welcome 변경하여 개체에 Message 및 NumTimes 값을 ViewBag 추가합니다. ViewBag 은 동적 개체입니다. 즉, 원하는 대로 배치할 수 있습니다. ViewBag 개체 안에 무언가를 넣을 때까지 정의된 속성이 없습니다. 전체 HelloWorldController.cs 파일은 다음과 같습니다.
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;
return View();
}
}
}
이제 개체에 ViewBag 뷰에 자동으로 전달되는 데이터가 포함됩니다.
다음으로 시작 보기 템플릿이 필요합니다. 디버그 메뉴에서 빌드 MvcMovie를 선택하여 프로젝트가 컴파일되었는지 확인합니다.
그런 다음 메서드 내부를 마우스 오른쪽 단추로 Welcome 클릭하고 보기 추가를 클릭합니다. 보기 추가 대화 상자는 다음과 같습니다.
추가를 클릭한 다음 새 Welcome.cshtml 파일의 <h2> 요소 아래에 다음 코드를 추가합니다. 사용자가 말하는 만큼 "Hello"라는 루프를 만듭니다. 전체 Welcome.cshtml 파일은 다음과 같습니다.
@{
ViewBag.Title = "Welcome";
}
<h2>Welcome</h2>
<ul>
@for (int i=0; i < ViewBag.NumTimes; i++) {
<li>@ViewBag.Message</li>
}
</ul>
애플리케이션을 실행하고 다음 URL로 이동합니다.
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
이제 데이터가 URL에서 가져와 컨트롤러에 자동으로 전달됩니다. 컨트롤러는 데이터를 개체에 ViewBag 패키지하고 해당 개체를 뷰에 전달합니다. 그런 다음 보기는 데이터를 사용자에게 HTML로 표시합니다.
이는 모델에 대한 일종의 "M"이었지만 데이터베이스 종류는 아니었습니다. 지금까지 학습한 것을 살펴보고 동영상의 데이터베이스를 만들어 보겠습니다.
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기