ASP.NET MVC 보기 개요(C#)ASP.NET MVC Views Overview (C#)

Stephen Waltherby Stephen Walther

ASP.NET MVC 뷰는 무엇 이며 HTML 페이지와 어떻게 다릅니까?What is an ASP.NET MVC View and how does it differ from a HTML page? 이 자습서에서 Stephen Walther는 뷰를 소개 하 고 뷰 내에서 뷰 데이터 및 HTML 도우미를 활용 하는 방법을 보여 줍니다.In this tutorial, Stephen Walther introduces you to Views and demonstrates how you can take advantage of View Data and HTML Helpers within a View.

이 자습서의 목적은 ASP.NET MVC 뷰, 데이터 보기 및 HTML 도우미에 대 한 간략 한 소개를 제공 하는 것입니다.The purpose of this tutorial is to provide you with a brief introduction to ASP.NET MVC views, view data, and HTML Helpers. 이 자습서의 끝 부분에서는 새 뷰를 만들고, 컨트롤러에서 뷰로 데이터를 전달 하 고, HTML 도우미를 사용 하 여 보기에서 콘텐츠를 생성 하는 방법을 이해 해야 합니다.By the end of this tutorial, you should understand how to create new views, pass data from a controller to a view, and use HTML Helpers to generate content in a view.

뷰 이해Understanding Views

ASP.NET 또는 Active Server 페이지의 경우 ASP.NET MVC에는 페이지에 직접 해당 하는 항목이 포함 되지 않습니다.For ASP.NET or Active Server Pages, ASP.NET MVC does not include anything that directly corresponds to a page. ASP.NET MVC 응용 프로그램에서 브라우저의 주소 표시줄에 입력 하는 URL의 경로에 해당 하는 페이지가 디스크에 없습니다.In an ASP.NET MVC application, there is not a page on disk that corresponds to the path in the URL that you type into the address bar of your browser. ASP.NET MVC 응용 프로그램의 페이지에 가장 가까운 항목은 라고 합니다.The closest thing to a page in an ASP.NET MVC application is something called a view.

ASP.NET MVC 응용 프로그램에서 들어오는 브라우저 요청은 컨트롤러 작업에 매핑됩니다.In an ASP.NET MVC application, incoming browser requests are mapped to controller actions. 컨트롤러 작업에서 뷰를 반환할 수 있습니다.A controller action might return a view. 그러나 컨트롤러 작업은 다른 유형의 작업 (예: 다른 컨트롤러 작업으로 리디렉션)을 수행할 수 있습니다.However, a controller action might perform some other type of action such as redirecting you to another controller action.

목록 1은 HomeController 라는 간단한 컨트롤러를 포함 합니다.Listing 1 contains a simple controller named the HomeController. HomeController는 Index () 및 Details () 라는 두 개의 컨트롤러 동작을 노출 합니다.The HomeController exposes two controller actions named Index() and Details().

목록 1-HomeController.csListing 1 - HomeController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Details()
        {
            return RedirectToAction("Index");
        }
    }
}

브라우저 주소 표시줄에 다음 URL을 입력 하 여 첫 번째 작업 인 Index () 작업을 호출할 수 있습니다.You can invoke the first action, the Index() action, by typing the following URL into your browser address bar:

/Home/Index/Home/Index

브라우저에이 주소를 입력 하 여 두 번째 작업 인 Details () 작업을 호출할 수 있습니다.You can invoke the second action, the Details() action, by typing this address into your browser:

/Home/Details/Home/Details

Index () 작업은 뷰를 반환 합니다.The Index() action returns a view. 사용자가 만드는 대부분의 작업은 뷰를 반환 합니다.Most actions that you create will return views. 그러나 작업은 다른 유형의 작업 결과를 반환할 수 있습니다.However, an action can return other types of action results. 예를 들어 Details () 작업은 들어오는 요청을 Index () 작업으로 리디렉션하는 RedirectToActionResult를 반환 합니다.For example, the Details() action returns a RedirectToActionResult that redirects incoming request to the Index() action.

Index () 작업에는 다음 코드 줄 하나가 포함 됩니다.The Index() action contains the following single line of code:

View();View();

이 코드 줄은 웹 서버의 다음 경로에 있어야 하는 뷰를 반환 합니다.This line of code returns a view that must be located at the following path on your web server:

\Views\Home\Index.aspx\Views\Home\Index.aspx

뷰의 경로는 컨트롤러 이름 및 컨트롤러 작업의 이름에서 유추 됩니다.The path to the view is inferred from the name of the controller and the name of the controller action.

선호 하는 경우 보기에 대해 명시적으로 지정할 수 있습니다.If you prefer, you can be explicit about the view. 다음 코드 줄은 Fred 라는 뷰를 반환 합니다.The following line of code returns a view named Fred :

View( Fred );View( Fred );

이 코드 줄을 실행 하면 다음 경로에서 뷰가 반환 됩니다.When this line of code is executed, a view is returned from the following path:

\Views\Home\Fred.aspx\Views\Home\Fred.aspx

Note

ASP.NET MVC 응용 프로그램에 대 한 단위 테스트를 만들려는 경우 뷰 이름에 대해 명시적으로 확인 하는 것이 좋습니다.If you plan to create unit tests for your ASP.NET MVC application then it is a good idea to be explicit about view names. 이렇게 하면 단위 테스트를 만들어 컨트롤러 작업에서 예상한 뷰가 반환 되었는지 확인할 수 있습니다.That way, you can create a unit test to verify that the expected view was returned by a controller action.

뷰에 콘텐츠 추가Adding Content to a View

뷰는 스크립트를 포함할 수 있는 표준 (X) HTML 문서입니다.A view is a standard (X)HTML document that can contain scripts. 스크립트를 사용 하 여 동적 콘텐츠를 뷰에 추가 합니다.You use scripts to add dynamic content to a view.

예를 들어 목록 2의 보기는 현재 날짜 및 시간을 표시 합니다.For example, the view in Listing 2 displays the current date and time.

목록 2-\Views\Home\Index.aspxListing 2 - \Views\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <% Response.Write(DateTime.Now);%>

    </div>
</body>
</html>

목록 2에 있는 HTML 페이지의 본문에는 다음 스크립트가 포함 되어 있습니다.Notice that the body of the HTML page in Listing 2 contains the following script:

<% Response (날짜/시간);%><% Response.Write(DateTime.Now);%>

스크립트 구분 기호 <% 및%>를 사용 하 여 스크립트의 시작과 끝을 표시 합니다.You use the script delimiters <% and %> to mark the beginning and end of a script. 이 스크립트는로 C#작성 되었습니다.This script is written in C#. 브라우저에 콘텐츠를 렌더링 하는 Write () 메서드를 호출 하 여 현재 날짜 및 시간을 표시 합니다.It displays the current date and time by calling the Response.Write() method to render content to the browser. 스크립트 구분 기호 <% 및%>은 (는) 하나 이상의 문을 실행 하는 데 사용할 수 있습니다.The script delimiters <% and %> can be used to execute one or more statements.

자주 Write ()를 호출 하므로 Microsoft는 Response () 메서드를 호출 하는 바로 가기를 제공 합니다.Since you call Response.Write() so often, Microsoft provides you with a shortcut for calling the Response.Write() method. 목록 3의 뷰에서는 <% = 및%> 구분 기호를 사용 하 여 Response () 호출에 대 한 바로 가기로 사용 합니다.The view in Listing 3 uses the delimiters <%= and %> as a shortcut for calling Response.Write().

목록 3-Views\Home\Index2.aspxListing 3 - Views\Home\Index2.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <%=DateTime.Now %>

    </div>
</body>
</html>

모든 .NET 언어를 사용 하 여 뷰에서 동적 콘텐츠를 생성할 수 있습니다.You can use any .NET language to generate dynamic content in a view. 일반적으로 Visual Basic .NET 또는 C# 를 사용 하 여 컨트롤러 및 뷰를 작성 합니다.Normally, you'll use either Visual Basic .NET or C# to write your controllers and views.

HTML 도우미를 사용 하 여 뷰 콘텐츠 생성Using HTML Helpers to Generate View Content

보기에 콘텐츠를 더 쉽게 추가할 수 있도록 HTML 도우미라는 기능을 활용할 수 있습니다.To make it easier to add content to a view, you can take advantage of something called an HTML Helper. 일반적으로 HTML 도우미는 문자열을 생성 하는 메서드입니다.An HTML Helper, typically, is a method that generates a string. HTML 도우미를 사용 하 여 텍스트 상자, 링크, 드롭다운 목록 및 목록 상자와 같은 표준 HTML 요소를 생성할 수 있습니다.You can use HTML Helpers to generate standard HTML elements such as textboxes, links, dropdown lists, and list boxes.

예를 들어 목록 4의 뷰는 세 가지 HTML 도우미 인 Html.beginform (), TextBox () 및 Password () 도우미를 사용 하 여 로그인 폼을 생성 합니다 (그림 1 참조).For example, the view in Listing 4 takes advantage of three HTML Helpers -- the BeginForm(), the TextBox() and Password() helpers -- to generate a Login form (see Figure 1).

목록 4--\Views\Home\Login.aspxListing 4 -- \Views\Home\Login.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form</title>
</head>
<body>
    <div>
    
    <% using (Html.BeginForm())
       { %>

        <label for="UserName">User Name:</label>
        <br />
        <%= Html.TextBox("UserName") %>
        
        <br /><br />
            
        <label for="Password">Password:</label>
        <br />
        <%= Html.Password("Password") %>
        
        <br /><br />

        <input type="submit" value="Log in" />        
    
    <% } %>
    
    </div>
</body>
</html>

새 프로젝트 대화 상자 The New Project dialog box

그림 01: 표준 로그인 양식 (전체 크기 이미지를 보려면 클릭)Figure 01: A standard Login form (Click to view full-size image)

모든 HTML 도우미 메서드는 뷰의 Html 속성에서 호출 됩니다.All of the HTML Helpers methods are called on the Html property of the view. 예를 들어, Html. TextBox () 메서드를 호출 하 여 텍스트 상자를 렌더링 합니다.For example, you render a TextBox by calling the Html.TextBox() method.

Html. TextBox () 및 Html. Password () 도우미를 모두 호출할 때 스크립트 구분 기호 <% = 및%>를 사용 합니다.Notice that you use the script delimiters <%= and %> when calling both the Html.TextBox() and Html.Password() helpers. 이러한 도우미는 단순히 문자열을 반환 합니다.These helpers simply return a string. 브라우저에 문자열을 렌더링 하기 위해 Write ()를 호출 해야 합니다.You need to call Response.Write() in order to render the string to the browser.

HTML 도우미 메서드 사용은 선택 사항입니다.Using HTML Helper methods is optional. 이러한 작업을 수행 하면 작성 해야 하는 HTML 및 스크립트의 양이 줄어들어 더 쉽게 사용할 수 있습니다.They make your life easier by reducing the amount of HTML and script that you need to write. 목록 5의 뷰는 HTML 도우미를 사용 하지 않고 목록 4의 뷰와 정확히 동일한 폼을 렌더링 합니다.The view in Listing 5 renders the exact same form as the view in Listing 4 without using HTML Helpers.

목록 5--\Views\Home\Login.aspxListing 5 -- \Views\Home\Login.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form without Help</title>
</head>
<body>
    <div>

    <form method="post" action="/Home/Login">
    
    <label for="userName">User Name:</label>
    <br />
    <input name="userName" />
    
    <br /><br />
    
    <label for="password">Password:</label>
    <br />
    <input name="password" type="password" />
    
    <br /><br />
    <input type="submit" value="Log In" />
    
    </form>
    
    </div>
</body>
</html>

사용자 고유의 HTML 도우미를 만들 수도 있습니다.You also have the option of creating your own HTML Helpers. 예를 들어, HTML 테이블에 데이터베이스 레코드 집합을 자동으로 표시 하는 GridView () 도우미 메서드를 만들 수 있습니다.For example, you can create a GridView() helper method that displays a set of database records in an HTML table automatically. 사용자 지정 HTML 도우미 만들기자습서의이 항목을 탐색 합니다.We explore this topic in the tutorial Creating Custom HTML Helpers.

뷰 데이터를 사용 하 여 보기에 데이터 전달Using View Data to Pass Data to a View

데이터 보기를 사용 하 여 컨트롤러에서 보기로 데이터를 전달 합니다.You use view data to pass data from a controller to a view. 메일을 통해 보내는 패키지와 같은 뷰 데이터를 생각해 보십시오.Think of view data like a package that you send through the mail. 컨트롤러에서 뷰로 전달 된 모든 데이터는이 패키지를 사용 하 여 보내야 합니다.All data passed from a controller to a view must be sent using this package. 예를 들어 목록 6의 컨트롤러는 데이터를 볼 수 있도록 메시지를 추가 합니다.For example, the controller in Listing 6 adds a message to view data.

목록 6-ProductController.csListing 6 - ProductController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Index()
        {
            ViewData["message"] = "Hello World!";
            return View();
        }

    }
}

Controller ViewData 속성은 이름/값 쌍의 컬렉션을 나타냅니다.The controller ViewData property represents a collection of name and value pairs. 목록 6에서 Index () 메서드는 값이 Hello World! 인 message 라는 뷰 데이터 컬렉션에 항목을 추가 합니다.In Listing 6, the Index() method adds an item to the view data collection named message with the value Hello World!. Index () 메서드에서 뷰를 반환 하는 경우 뷰 데이터는 뷰에 자동으로 전달 됩니다.When the view is returned by the Index() method, the view data is passed to the view automatically.

목록 7의 뷰는 보기 데이터에서 메시지를 검색 하 고 브라우저에 메시지를 렌더링 합니다.The view in Listing 7 retrieves the message from the view data and renders the message to the browser.

목록 7--\Views\Product\Index.aspxListing 7 -- \Views\Product\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Product Index</title>
</head>
<body>
    <div>
    
    <%= Html.Encode(ViewData["message"]) %>
    
    </div>
</body>
</html>

뷰에서는 메시지를 렌더링할 때 Html 도우미 메서드를 사용 합니다.Notice that the view takes advantage of the Html.Encode() HTML Helper method when rendering the message. Html. 인코드 () HTML 도우미는 < >와 같은 특수 문자를 웹 페이지에 표시 하기에 안전한 문자로 인코딩합니다.The Html.Encode() HTML Helper encodes special characters such as < and > into characters that are safe to display in a web page. 사용자가 웹 사이트로 전송 하는 콘텐츠를 렌더링할 때마다 JavaScript 주입 공격을 방지 하기 위해 콘텐츠를 인코딩해야 합니다.Whenever you render content that a user submits to a website, you should encode the content to prevent JavaScript injection attacks.

(제품 컨트롤러에서 메시지를 직접 만들었기 때문에 메시지를 인코딩할 필요가 없습니다.(Because we created the message ourselves in the ProductController, we don't really need to encode the message. 그러나 뷰 내의 뷰 데이터에서 검색 된 콘텐츠를 표시 하는 경우 항상 Html. 인코드 () 메서드를 호출 하는 것이 좋습니다.However, it is a good habit to always call the Html.Encode() method when displaying content retrieved from view data within a view.)

목록 7에서는 보기 데이터를 활용 하 여 컨트롤러에서 뷰로 간단한 문자열 메시지를 전달 했습니다.In Listing 7, we took advantage of view data to pass a simple string message from a controller to a view. 데이터 보기를 사용 하 여 컨트롤러에서 보기에 데이터베이스 레코드 컬렉션과 같은 다른 유형의 데이터를 전달할 수도 있습니다.You also can use view data to pass other types of data, such as a collection of database records, from a controller to a view. 예를 들어 Products 데이터베이스 테이블의 내용을 뷰에 표시 하려면 데이터 보기에서 데이터베이스 레코드의 컬렉션을 전달 합니다.For example, if you want to display the contents of the Products database table in a view, then you would pass the collection of database records in view data.

또한 컨트롤러에서 뷰로 강력한 형식의 뷰 데이터를 전달 하는 옵션도 있습니다.You also have the option of passing strongly typed view data from a controller to a view. 강력한 형식의 뷰 데이터 및 뷰 이해자습서의이 항목을 탐색 합니다.We explore this topic in the tutorial Understanding Strongly Typed View Data and Views.

요약Summary

이 자습서에서는 ASP.NET MVC 뷰, 데이터 보기 및 HTML 도우미에 대 한 간략 한 소개를 제공 했습니다.This tutorial provided a brief introduction to ASP.NET MVC views, view data, and HTML Helpers. 첫 번째 섹션에서는 프로젝트에 새 뷰를 추가 하는 방법을 알아보았습니다.In the first section, you learned how to add new views to your project. 특정 컨트롤러에서 호출 하려면 보기를 오른쪽 폴더에 추가 해야 한다는 것을 배웠습니다.You learned that you must add a view to the right folder in order to call it from a particular controller. 다음으로 HTML 도우미 항목에 대해 설명 했습니다.Next, we discussed the topic of HTML Helpers. HTML 도우미를 사용 하 여 표준 HTML 콘텐츠를 쉽게 생성 하는 방법을 배웠습니다.You learned how HTML Helpers enable you to easily generate standard HTML content. 마지막으로, 보기 데이터를 활용 하 여 컨트롤러에서 보기로 데이터를 전달 하는 방법을 배웠습니다.Finally, you learned how to take advantage of view data to pass data from a controller to a view.