MVC 애플리케이션에 뷰 추가

아티클
07/13/2023

참고

이 자습서의 업데이트된 버전은 최신 버전의 Visual Studio를 사용하여 여기에서 사용할 수 있습니다. 새 자습서에서는 ASP.NET Core MVC를 사용하여 이 자습서에 비해 많은 개선 사항을 제공합니다.

이 자습서에서는 컨트롤러와 보기를 통해 ASP.NET Core MVC에 설명합니다. Razor Pages는 웹 UI를 더 쉽고 생산성을 높이는 페이지 기반 프로그래밍 모델인 ASP.NET Core 새로운 대안입니다. MVC 버전 이전의 Razor 페이지 자습서를 사용해 보는 것이 좋습니다. Razor 페이지 자습서:

자습서 내용을 좀 더 쉽게 진행할 수 있습니다.
더 많은 기능을 다룹니다.
새 앱 개발에 선호되는 방법입니다.

이 섹션에서는 뷰 템플릿 파일을 사용하여 클라이언트에 HTML 응답을 생성하는 프로세스를 깔끔하게 캡슐화하도록 클래스를 수정 HelloWorldController 합니다.

Razor 뷰 엔진을 사용하여 뷰 템플릿 파일을 만듭니다. Razor 기반 뷰 템플릿에는 .cshtml 파일 확장명이 있으며 C#을 사용하여 HTML 출력을 만드는 우아한 방법을 제공합니다. Razor는 보기 템플릿을 작성할 때 필요한 문자 및 키 입력 수를 최소화하고 빠르고 유동적인 코딩 워크플로를 사용하도록 설정합니다.

현재 Index 메서드는 컨트롤러 클래스에서 하드 코딩된 메시지 문자열을 반환합니다. Index 다음 코드와 같이 컨트롤러 View 메서드를 호출하도록 메서드를 변경합니다.

public ActionResult Index() 
{ 
    return View(); 
}

위의 메서드는 Index 보기 템플릿을 사용하여 브라우저에 대한 HTML 응답을 생성합니다. 위의 메서드와 같은 Index 컨트롤러 메서드(작업 메서드라고도 함)는 일반적으로 문자열과 같은 기본 형식이 아닌 ActionResult(또는 ActionResult에서 파생된 클래스)를 반환합니다.

Views\HelloWorld 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 클릭한 다음 레이아웃이 있는 MVC 5 보기 페이지(Razor)를 클릭합니다.

솔루션 탐색기 창을 보여 주는 스크린샷 헬로 월드 마우스 오른쪽 단추 클릭 메뉴와 하위 메뉴 추가가 열려 있고 레이아웃 Razor가 있는 M V C 5 보기 페이지가 선택되어 있습니다.

항목 이름 지정 대화 상자에서 인덱스 를 입력한 다음 확인을 클릭합니다.

항목의 이름 지정 대화 상자를 보여 주는 스크린샷 인덱스는 항목 이름 필드에 있습니다.

레이아웃 페이지 선택 대화 상자에서 기본 _Layout.cshtml을 적용하고 확인을 클릭합니다.

레이아웃 선택 페이지를 보여 주는 스크린샷 공유 하위 폴더가 열려 있고 레이아웃 점 c s h t m l이 선택됩니다.

위의 대화 상자의 왼쪽 창에서 Views\Shared 폴더가 선택됩니다. 다른 폴더에 사용자 지정 레이아웃 파일이 있는 경우 선택할 수 있습니다. 자습서의 뒷부분에서 레이아웃 파일에 대해 설명합니다.

MvcMovie\Views\HelloWorld\Index.cshtml 파일이 만들어집니다.

솔루션 탐색기 창을 보여 주는 스크린샷 Views 폴더와 헬로 월드 하위 폴더가 열려 있습니다.

강조 표시된 다음 태그를 추가합니다.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Index.cshtml 파일을 마우스 오른쪽 단추로 클릭하고 브라우저에서 보기를 선택합니다.

Index.cshtml 파일을 마우스 오른쪽 단추로 클릭하고 페이지 검사기 보기를 선택할 수도 있습니다. 자세한 내용은 페이지 검사기 자습서를 참조하세요.

또는 애플리케이션을 실행하고 컨트롤러(http://localhost:xxxx/HelloWorld)로 이동합니다HelloWorld. 컨트롤러의 메서드는 Index 많은 작업을 수행하지 않았습니다. 단순히 메서드가 뷰 템플릿 파일을 사용하여 브라우저에 응답을 렌더링하도록 지정한 문을 return View()실행했습니다. 사용할 뷰 템플릿 파일의 이름을 명시적으로 지정하지 않았기 때문에 ASP.NET MVC는 기본적으로 \Views\HelloWorld 폴더의 Index.cshtml 뷰 파일을 사용합니다. 아래 이미지는 보기에 하드 코딩된 "보기 템플릿의 Hello!" 문자열을 보여 줍니다.

인덱스 페이지와 보기 템플릿의 Hello 텍스트를 보여 주는 스크린샷

꽤 좋아 보인다. 그러나 브라우저의 제목 표시줄에 "인덱스 - 내 ASP.NET 애플리케이션"이 표시되고 페이지 맨 위에 있는 큰 링크에 "애플리케이션 이름"이 표시됩니다. 브라우저 창을 얼마나 작게 만들었는지에 따라 오른쪽 위에 있는 세 개의 막대를 클릭하여 홈, 정보, 연락처, 등록 및 로그인 링크를 확인해야 할 수 있습니다.

보기 및 레이아웃 페이지 변경

먼저 페이지 맨 위에 있는 "애플리케이션 이름" 링크를 변경하려고 합니다. 해당 텍스트는 모든 페이지에 공통적으로 적용됩니다. 애플리케이션의 모든 페이지에 표시되더라도 프로젝트의 한 곳에서만 실제로 구현됩니다. 솔루션 탐색기/Views/Shared 폴더로 이동하여 _Layout.cshtml 파일을 엽니다. 이 파일을 레이아웃 페이지 라고 하며 다른 모든 페이지에서 사용하는 공유 폴더에 있습니다.

_LayoutCshtml

레이아웃 템플릿을 사용하면 한 곳에서 사이트의 HTML 컨테이너 레이아웃을 지정한 다음 사이트의 여러 페이지에 걸쳐 적용할 수 있습니다. @RenderBody() 줄을 찾습니다. RenderBody 은 사용자가 만든 모든 보기별 페이지가 레이아웃 페이지에 "래핑"된 자리 표시자입니다. 예를 들어 정보 링크를 선택하면 Views\Home\About.cshtml 보기가 메서드 내부에 RenderBody 렌더링됩니다.

제목 요소의 콘텐츠를 변경합니다. 레이아웃 템플릿의 ActionLink 를 "애플리케이션 이름"에서 "MVC 무비"로 변경하고 컨트롤러를 에서 로 HomeMovies변경합니다. 전체 레이아웃 파일은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

애플리케이션을 실행하고 이제 "MVC 무비"라고 표시됩니다. 정보 링크를 클릭하면 해당 페이지에 "MVC 동영상"도 표시되는 방식이 표시됩니다. 레이아웃 템플릿에서 한 번 변경하고 사이트의 모든 페이지에 새 제목이 반영되도록 할 수 있었습니다.

M V C 동영상 정보 페이지를 보여 주는 스크린샷

Views\HelloWorld\Index.cshtml 파일을 처음 만들 때 다음 코드가 포함되어 있습니다.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

위의 Razor 코드는 레이아웃 페이지를 명시적으로 설정합니다. Views\_ViewStart.cshtml 파일을 검사합니다. 이 파일에는 정확히 동일한 Razor 태그가 포함되어 있습니다. Views\_ViewStart.cshtml 파일은 모든 보기에서 사용할 공통 레이아웃을 정의하므로 Views\HelloWorld\Index.cshtml 파일에서 해당 코드를 주석 처리하거나 제거할 수 있습니다.

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Layout 속성을 사용하여 다른 레이아웃 보기를 설정하거나 레이아웃 파일을 사용하지 않도록 null로 설정할 수 있습니다.

이제 인덱스 보기의 제목을 변경해 보겠습니다.

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. 레이아웃 템플릿( Views\Shared\_Layout.cshtml )은 요소에서 <title> 이전에 수정한 HTML 섹션의 <head> 일부로 이 값을 사용합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

이 ViewBag 방법을 사용하면 보기 템플릿과 레이아웃 파일 간에 다른 매개 변수를 쉽게 전달할 수 있습니다.

애플리케이션을 실행합니다. 브라우저 제목, 기본 제목 및 작은 제목이 변경된 것을 확인합니다. (브라우저에 변경 내용이 표시되지 않으면 캐시된 콘텐츠를 볼 수 있습니다. 브라우저에서 Ctrl+F5를 눌러 서버의 응답을 강제로 로드합니다.) 브라우저 제목은 Index.cshtml 보기 템플릿에 설정한 및 레이아웃 파일에 추가된 추가 "- 영화 앱"을 사용하여 만들어집니다ViewBag.Title.

또한 Index.cshtml 보기 템플릿의 콘텐츠가 _Layout.cshtml 보기 템플릿과 병합되고 단일 HTML 응답이 브라우저로 전송된 방법도 확인합니다. 레이아웃 템플릿을 사용하면 애플리케이션의 모든 페이지에 걸쳐 적용되는 변경 내용을 쉽게 만들 수 있습니다.

M V C 동영상 내 영화 목록 페이지를 보여 주는 스크린샷.

하지만 약간의 "데이터"(이 경우 "보기 템플릿의 Hello!" 메시지)는 하드 코딩되어 있습니다. 이 MVC 애플리케이션에는 "V"(보기)가 있고 "C"(컨트롤러)가 있지만 아직 "M"(모델)은 없습니다. 곧 데이터베이스를 만들고 데이터베이스에서 모델 데이터를 검색하는 방법을 살펴보겠습니다.

컨트롤러에서 보기로 데이터 전달

데이터베이스로 이동하여 모델에 대해 이야기하기 전에 먼저 컨트롤러에서 보기로 정보를 전달하는 방법에 대해 살펴보겠습니다. 컨트롤러 클래스는 들어오는 URL 요청에 대한 응답으로 호출됩니다. 컨트롤러 클래스는 들어오는 브라우저 요청을 처리하고, 데이터베이스에서 데이터를 검색하고, 궁극적으로 브라우저로 다시 보낼 응답 유형을 결정하는 코드를 작성하는 위치입니다. 그런 다음 컨트롤러에서 보기 템플릿을 사용하여 브라우저에 대한 HTML 응답을 생성하고 서식을 지정할 수 있습니다.

컨트롤러는 보기 템플릿이 브라우저에 응답을 렌더링하기 위해 필요한 데이터 또는 개체를 제공해야 합니다. 모범 사례: 보기 템플릿은 비즈니스 논리를 수행하거나 데이터베이스와 직접 상호 작용해서는 안 됩니다. 대신 보기 템플릿은 컨트롤러에서 제공한 데이터에서만 작동해야 합니다. 이 "문제 분리"를 유지 관리하면 코드를 클린 테스트 가능하고 유지 관리하기 쉽게 유지할 수 있습니다.

현재 클래스의 Welcome action 메서드 HelloWorldController 는 및 매개 변수를 numTimes 사용하여 name 값을 브라우저에 직접 출력합니다. 컨트롤러가 이 응답을 문자열로 렌더링하는 대신 보기 템플릿을 사용하도록 컨트롤러를 변경해 보겠습니다. 보기 템플릿은 동적 응답을 생성합니다. 즉, 응답을 생성하기 위해 컨트롤러에서 보기로 일부 적절한 데이터를 전달해야 합니다. 컨트롤러가 뷰 템플릿에서 액세스할 수 있는 개체에 뷰 템플릿에 필요한 ViewBag 동적 데이터(매개 변수)를 배치하여 이 작업을 수행할 수 있습니다.

HelloWorldController.cs 파일로 돌아가서 메서드를 Welcome 변경하여 개체에 및 NumTimes 값을 ViewBag 추가 Message 합니다. ViewBag 은 동적 개체입니다. 즉, 원하는 내용을 넣을 수 있습니다. ViewBag 개체 안에 무언가를 넣을 때까지 정의된 속성이 없습니다. ASP.NET MVC 모델 바인딩 시스템은 주소 표시줄의 쿼리 문자열에서 명명된 매개 변수(name 및 numTimes)를 메서드의 매개 변수에 자동으로 매핑합니다. 전체 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 뷰에 자동으로 전달되는 데이터가 포함됩니다. 다음으로 시작 보기 템플릿이 필요합니다. 빌드 메뉴에서 솔루션 빌드(또는 Ctrl+Shift+B)를 선택하여 프로젝트가 컴파일되었는지 확인합니다. Views\HelloWorld 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 클릭한 다음 레이아웃이 있는 MVC 5 보기 페이지(Razor)를 클릭합니다.

솔루션 탐색기 창을 보여 주는 스크린샷 헬로 월드 마우스 오른쪽 단추 클릭 메뉴와 하위 메뉴 추가가 열려 있습니다. 레이아웃 Razor가 있는 M V C 5 보기 페이지가 선택되어 있습니다.

항목 이름 지정 대화 상자에서 환영을 입력한 다음 확인을 클릭합니다.

레이아웃 페이지 선택 대화 상자에서 기본 _Layout.cshtml을 적용하고 확인을 클릭합니다.

레이아웃 선택 페이지를 보여 주는 스크린샷 공유라는 레이블이 지정된 하위 폴더가 열려 있고 레이아웃 점 c s h t m l이 선택됩니다.

MvcMovie\Views\HelloWorld\Welcome.cshtml 파일이 만들어집니다.

Welcome.cshtml 파일의 태그를 바꿉니다. 사용자가 말하는 만큼 "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 VC 영화 시작 페이지를 보여 주는 스크린샷.

위의 샘플에서는 개체를 ViewBag 사용하여 컨트롤러에서 뷰로 데이터를 전달했습니다. 자습서의 뒷부분에서 보기 모델을 사용하여 컨트롤러에서 보기로 데이터를 전달합니다. 데이터 전달에 대한 뷰 모델 접근 방식은 일반적으로 뷰 모음 접근 방식보다 훨씬 선호됩니다. 자세한 내용은 블로그 항목 Dynamic V 강력한 형식의 보기를 참조하세요.

이는 모델에 대한 일종의 "M"이었지만 데이터베이스 종류는 아니었습니다. 지금까지 학습한 것을 살펴보고 동영상의 데이터베이스를 만들어 보겠습니다.

이전 다음

다음을 통해 공유

MVC 애플리케이션에 뷰 추가

보기 및 레이아웃 페이지 변경

컨트롤러에서 보기로 데이터 전달

피드백

추가 리소스