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

  • 아티클

작성자 : Stephen Walther

ASP.NET MVC 보기란 무엇이며 HTML 페이지와 어떻게 다른가요? 이 자습서에서 Stephen Walther는 뷰를 소개하고 보기 내에서 데이터 보기 및 HTML 도우미를 활용하는 방법을 보여 줍니다.

이 자습서의 목적은 MVC 뷰 ASP.NET, 데이터 보기 및 HTML 도우미에 대한 간략한 소개를 제공하는 것입니다. 이 자습서를 마치면 새 뷰를 만들고, 컨트롤러에서 보기로 데이터를 전달하고, HTML 도우미를 사용하여 보기에서 콘텐츠를 생성하는 방법을 이해해야 합니다.

뷰 이해

ASP.NET 또는 활성 서버 페이지의 경우 ASP.NET MVC에는 페이지에 직접 해당하는 항목이 포함되지 않습니다. ASP.NET MVC 애플리케이션에는 브라우저의 주소 표시줄에 입력하는 URL의 경로에 해당하는 페이지가 디스크에 없습니다. ASP.NET MVC 애플리케이션의 페이지에 가장 가까운 것은 보기라고 하는 것입니다.

ASP.NET MVC 애플리케이션에서 들어오는 브라우저 요청은 컨트롤러 작업에 매핑됩니다. 컨트롤러 작업은 보기를 반환할 수 있습니다. 그러나 컨트롤러 작업은 다른 컨트롤러 작업으로 리디렉션하는 것과 같은 다른 유형의 작업을 수행할 수 있습니다.

목록 1에는 HomeController라는 간단한 컨트롤러가 포함되어 있습니다. HomeController는 Index() 및 Details()라는 두 개의 컨트롤러 작업을 노출합니다.

목록 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() 작업을 호출할 수 있습니다.

/Home/Index

브라우저에 이 주소를 입력하여 두 번째 작업인 Details() 작업을 호출할 수 있습니다.

/Home/Details

Index() 작업은 뷰를 반환합니다. 만드는 대부분의 작업은 보기를 반환합니다. 그러나 작업은 다른 유형의 작업 결과를 반환할 수 있습니다. 예를 들어 Details() 작업은 들어오는 요청을 Index() 작업으로 리디렉션하는 RedirectToActionResult를 반환합니다.

Index() 작업에는 다음과 같은 단일 코드 줄이 포함됩니다.

View();

이 코드 줄은 웹 서버의 다음 경로에 있어야 하는 보기를 반환합니다.

\Views\Home\Index.aspx

뷰의 경로는 컨트롤러의 이름과 컨트롤러 작업의 이름에서 유추됩니다.

원하는 경우 보기에 대해 명시적으로 지정할 수 있습니다. 다음 코드 줄은 Fred라는 뷰를 반환합니다.

보기( Fred );

이 코드 줄을 실행하면 다음 경로에서 뷰가 반환됩니다.

\Views\Home\Fred.aspx

참고

ASP.NET MVC 애플리케이션에 대한 단위 테스트를 만들려는 경우 보기 이름에 대해 명시적으로 지정하는 것이 좋습니다. 이렇게 하면 단위 테스트를 만들어 예상되는 뷰가 컨트롤러 작업에 의해 반환되었는지 확인할 수 있습니다.

보기에 콘텐츠 추가

뷰는 스크립트를 포함할 수 있는 표준(X)HTML 문서입니다. 스크립트를 사용하여 동적 콘텐츠를 보기에 추가합니다.

예를 들어 목록 2의 보기에는 현재 날짜와 시간이 표시됩니다.

목록 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 페이지 본문에는 다음 스크립트가 포함되어 있습니다.

<% Response.Write(DateTime.Now);%>

스크립트 구분 기호 <%와 %를> 사용하여 스크립트의 시작과 끝을 표시합니다. 이 스크립트는 C#으로 작성되었습니다. Response.Write() 메서드를 호출하여 콘텐츠를 브라우저에 렌더링하여 현재 날짜와 시간을 표시합니다. 스크립트 구분 기호 <% 및 %를> 사용하여 하나 이상의 문을 실행할 수 있습니다.

Response.Write()를 자주 호출하므로 Microsoft는 Response.Write() 메서드를 호출하기 위한 바로 가기를 제공합니다. 목록 3의 보기는 Response.Write()를 호출하기 위한 바로 가기로 구분 기호 <%= 및 %를> 사용합니다.

목록 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 언어를 사용하여 보기에서 동적 콘텐츠를 생성할 수 있습니다. 일반적으로 Visual Basic .NET 또는 C#을 사용하여 컨트롤러와 뷰를 작성합니다.

HTML 도우미를 사용하여 콘텐츠 보기 생성

보기에 콘텐츠를 더 쉽게 추가할 수 있도록 HTML 도우미라는 항목을 활용할 수 있습니다. 일반적으로 HTML 도우미는 문자열을 생성하는 메서드입니다. HTML 도우미를 사용하여 텍스트 상자, 링크, 드롭다운 목록 및 목록 상자와 같은 표준 HTML 요소를 생성할 수 있습니다.

예를 들어 목록 4의 보기는 BeginForm(), TextBox() 및 Password() 도우미라는 세 가지 HTML 도우미를 활용하여 로그인 양식을 생성합니다(그림 1 참조).

목록 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>

새 프로젝트 대화 상자

그림 01: 표준 로그인 양식(전체 크기 이미지를 보려면 클릭)

모든 HTML 도우미 메서드는 보기의 Html 속성에서 호출됩니다. 예를 들어 Html.TextBox() 메서드를 호출하여 TextBox를 렌더링합니다.

Html.TextBox() 및 Html.Password() 도우미 <를 모두 호출할 때 스크립트 구분 기호 %= 및 %를> 사용합니다. 이러한 도우미는 단순히 문자열을 반환합니다. 문자열을 브라우저에 렌더링하려면 Response.Write()를 호출해야 합니다.

HTML 도우미 메서드를 사용하는 것은 선택 사항입니다. 작성해야 하는 HTML 및 스크립트의 양을 줄여 삶을 더 쉽게 만들 수 있습니다. 목록 5의 보기는 HTML 도우미를 사용하지 않고 목록 4의 보기와 정확히 동일한 형식을 렌더링합니다.

목록 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 도우미를 만들 수도 있습니다. 예를 들어 HTML 테이블에 데이터베이스 레코드 집합을 자동으로 표시하는 GridView() 도우미 메서드를 만들 수 있습니다. 이 항목은 사용자 지정 HTML 도우미 만들기 자습서에 있습니다.

뷰 데이터를 사용하여 뷰에 데이터 전달

뷰 데이터를 사용하여 컨트롤러에서 뷰로 데이터를 전달합니다. 보기 데이터를 메일을 통해 보내는 패키지와 같이 생각해 보세요. 컨트롤러에서 뷰로 전달되는 모든 데이터는 이 패키지를 사용하여 보내야 합니다. 예를 들어 목록 6의 컨트롤러는 데이터를 보는 메시지를 추가합니다.

목록 6 - ProductController.cs

using System.Web.Mvc;

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

    }
}

컨트롤러 ViewData 속성은 이름 및 값 쌍의 컬렉션을 나타냅니다. 목록 6에서 Index() 메서드는 값이 헬로 월드!인 message라는 뷰 데이터 컬렉션에 항목을 추가합니다. Index() 메서드에서 뷰를 반환하면 뷰 데이터가 자동으로 뷰에 전달됩니다.

목록 7의 보기는 보기 데이터에서 메시지를 검색하고 메시지를 브라우저로 렌더링합니다.

목록 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.Encode() HTML 도우미 메서드를 활용합니다. Html.Encode() HTML 도우미는 과 > 같은 < 특수 문자를 웹 페이지에 표시할 수 있는 문자로 인코딩합니다. 사용자가 웹 사이트에 제출하는 콘텐츠를 렌더링할 때마다 JavaScript 삽입 공격을 방지하기 위해 콘텐츠를 인코딩해야 합니다.

(ProductController에서 직접 메시지를 만들었기 때문에 메시지를 인코딩할 필요가 없습니다. 그러나 보기 내의 보기 데이터에서 검색된 콘텐츠를 표시할 때는 항상 Html.Encode() 메서드를 호출하는 것이 좋습니다.

목록 7에서는 보기 데이터를 활용하여 컨트롤러에서 보기로 간단한 문자열 메시지를 전달했습니다. 뷰 데이터를 사용하여 컨트롤러에서 뷰로 데이터베이스 레코드 컬렉션과 같은 다른 유형의 데이터를 전달할 수도 있습니다. 예를 들어 Products 데이터베이스 테이블의 내용을 보기에 표시하려는 경우 뷰 데이터에 데이터베이스 레코드 컬렉션을 전달합니다.

또한 컨트롤러에서 보기로 강력한 형식의 뷰 데이터를 전달하는 옵션도 있습니다. 이 항목은 강력한 형식의 보기 데이터 및 뷰 이해 자습서에서 살펴봅니다.

요약

이 자습서에서는 MVC 보기, 데이터 보기 및 HTML 도우미를 ASP.NET 간단한 소개를 제공했습니다. 첫 번째 섹션에서는 프로젝트에 새 뷰를 추가하는 방법을 알아보았습니다. 특정 컨트롤러에서 호출하려면 올바른 폴더에 뷰를 추가해야 한다는 것을 배웠습니다. 다음으로 HTML 도우미의 항목에 대해 설명했습니다. HTML 도우미를 사용하여 표준 HTML 콘텐츠를 쉽게 생성하는 방법을 알아보았습니다. 마지막으로 보기 데이터를 활용하여 컨트롤러에서 뷰로 데이터를 전달하는 방법을 알아보았습니다.

다음