Understanding Views, View Data, and HTML Helpers
이 튜토리얼의 목적은 ASP.NET MVC views, view data, 그리고 HTML Helpers 에 관한 설명을 할 것이다. 이 튜토리얼의 마지막에서, 새로운 views을 어떻게 만들고, controller에서 view로 데이터가 어떻게 이동하는지, 그리고 view에서 콘텐트를 가져오기 위해 HTML Helpers가 어떻게 사용되는지 이해할 수 있을 것이다.
Understanding Views
ASP.NET 이나 ASP와는 달리, ASP.NET MVC은 URL에 해당되는 페이지를 포함하지 않는다. ASP.NET 어플리케이션에서, 사용자가 브라우저 주소 바에 입력한 URL 경로에 대응하는 것은 디스크에 존재하는 페이지가 아니다. ASP.NET MVC 어플리케이션에서 페이지에 가장 가까운 것은 view 이다.
ASP.NET MVC 어플리케이션에서, 브라우저 입력 요청은 controller action과 매핑 된다. Controller action은 view을 리턴 한다. 그러나, controller action은 다른 controller action에 리다이렉트 하는 것처럼 다른 형태의 action을 취할 때도 있다.
다음 코드는 HomeController라는 간단한 controller이다. HomeController은 Index()와 Details()라는 두 개의 controller action을 나타낸다.
|
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApp.Controllers { [HandleError] public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Details() { return RedirectToAction("Index"); } } } |
브라우저 주소 바에 다음과 같은 URL을 입력하면, 첫 action으로 Index()가 불린다.
/Home/Index
브라우저 주소 바에 다음 URL을 입력하면, 두 번째 action으로 Detail()가 불린다.
/Home/Details
Index() action은 view을 리턴 한다. 사용자들이 만든 대부분의 action은 view을 리턴 한다. 그러나, action은 다른 형태의 결과를 리턴 하기도 하는데, 예를 들어, Details() action은 Index() action은 입력 요청을 Index() action으로 리다이렉트 하는 RedirectToActionResult을 리턴 한다.
Index() action은 다음 코드를 가지고 있다.
|
return View(); |
이 코드는 웹 서버에 다음 경로의 위치한 view을 리턴 한다.
\Views\Home\Index.aspx
View의 경로는 controller의 이름과 controller action의 이름으로 생각해 볼 수 있다.
마찬가지로 생각해 본다면, 다음 코드는 “Fred”라는 이름의 view을 리턴 할 것이다.
|
return View(“Fred”); |
이 코드가 실행될 때, view은 다음 경로를 리턴 할 것이다.
\Views\Home\Fred.aspx
Creating a View
View을 추가 할 때는, Controller 접미사를 제외한 controller와 같은 이름을 가진 폴더에 생성해야 한다. 예를 들어, ProductController라는 이름의 controller에 의해 리턴 되는 Index view을 만든다면, 프로젝트에서 다음 경로로 추가 시켜야 한다.
\Views\Product\Index.aspx
View을 가진 폴더 이름은 반드시 view을 리턴 하는 controller 이름과 일치하여야 한다.
Adding Content to a View
View은 스크립트를 포함할 수 있는 표준 HTML 문서이다. View에 동적 콘텐트를 위해 스크립트를 추가할 수 있다. 예를 들어 다음 코드의 view은 현재 날짜와 시간을 표시한다.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApp.Views.Home.Index" %> <!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 runat="server"> <title>Index</title> </head> <body> <div> The current date and time is: <% Response.Write(DateTime.Now);%> </div> </body> </html> |
위 코드의 HTML의 body은 다음 스크립트를 가지고 있다.
|
<% Response.Write(DateTime.Now);%> |
당신은 스크립트 시작과 끝에 나타낼 스크립트 구획 문자로 <% 과 %>을 사용한다. 이 스크립트는 C# 코드이고, 브라우저가 콘텐트를 렌더링 할 때 Response.Write()을 호출 함으로써 시간과 날짜를 표시한다.
Response.Write()을 자주 호출 하기에 마이크로소프트는 Response.Write() 메서드를 호출하기 위한 쉬운 방법을 제공한다. 다음 코드의 view에서 Response.Write() 호출을 간단히 하기 위해 구획 문자 <%= 와 %>을 사용한다.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApp.Views.Home.Index2" %> <!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 runat="server"> <title>Index2</title> </head> <body> <div> The current date and time is: <%=DateTime.Now%> </div> </body> </html> |
view에서 동적 콘텐트를 가져오기 위해 .NET 언어를 사용 할 수 있다. 일반적으로 Visual Basic .NET 이나 C#을 사용할 것이다.
Using HTML Helpers to Generate View Content
View에 콘텐트를 쉽게 추가할 수 있게, HTML Helper라 불리는 유용한 메소드를 사용할 수 있다. HTML Helper은 문자열을 가져오는 메소드이다. 예를 들어, textboxes, links, dropdown, 그리고 list boxes등과 같은 HTML 요소들을 사용하는 HTML Helper를 이용한다.
예를 들어, 다음 코드에서 view은 로그인 폼을 만들기 위하여 TextBox() 와 Password() Helper을 사용한다.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApp.Views.Home.Index3" %> <!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 runat="server"> <title>Login Form</title> </head> <body> <div> <form method="post" action="/Home/Login"> <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" /> </form> </div> </body> </html> |
모든 Html Helper 메소드는 view의 HTML 프로퍼티라 불린다. 예를 들어, Html.TextBox() 메소드를 호출 함으로써 TextBox 을 그린다.
HTML Helper을 호출할 때, 스크립트 구분 문자 <%= %>을 사용한다는 것을 알아두자. HTML Helper은 간단하게 문자열을 리턴 한다. 브라우저에 문자열을 그리기 위하여 Response.Write() 호출을 통해야 한다.
HTML Helper 메소드를 사용하는 것은 선택적이다. 하지만 이것을 사용함으로 작성해야 할 HTML과 스크립트 코드의 양을 줄일 수 있다. 다음 코드에서 view은 HTML Helpers을 사용하지 않고 위 코드의 view와 같은 폼을 브라우저에 표현한다.
|
<%@ 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 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 Helpers 작성은 선택적이다. 예를 들어, 자동적으로 HTML 테이블에 데이터베이스 레코드 집합을 보여주기 위한 GridView() 메소드를 만들 수 있다. 지금까지 Creating Custom HTML Helper를 주제로 이야기를 하였다.
Using View Data to Pass Data to a View
View는 ViewData라는 controller에서 view로 데이터를 전달하는 속성을 가지고 있다. 예를 들어, 다음 코드의 controller은 ViewData 에 메시지를 추가하는 코드이다.
|
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApp.Controllers { public class ProductController : Controller { public ActionResult Details() { ViewData["message"] = "Hello World!"; return View(); } } } |
ViewData controller 프로퍼티는 이름과 값으로 구성된 콜렉션을 나타낸다. 위 코드에서, Detail() 메소드는 “Hello World!” 라는 값을 가진 message라는 이름의 view data 콜렉션에 아이템을 추가한다. View가 Details() 메소드에 의해 리턴 되면, view data는 자동적으로 view에 전달된다.
아래의 코드에서 view은 view data로부터 message을 받고, 브라우저의 값을 렌더링 한다.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Details.aspx.cs" Inherits="MvcApp.Views.Product.Details" %> <!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 runat="server"> <title>Product Details</title> </head> <body> <div> <%=Html.Encode(ViewData["message"])%> </div> </body> </html> |
view에서 메시지가 렌더링 될 때, Html.Encode() HTML Helper 메소드가 갖는 이점이 있다. Html.Encode() HTML Helper은 특별한 문자, 예를 들어 웹 페이지에서 보여지는 안전한 문자로 인코딩한다. 당신이 사용자가 웹 사이트로 submit한 콘텐트를 렌더링 할 때 마다, 자바스크립트 인젝션 공격을 보호하기 위해 콘텐트를 인코딩 해야 한다.
위 코드에서 controller에서 view로 간단한 문자 메시지를 전송하는 view data을 보았다. 당신은 예를 들어, 데이터베이스 레코드 콜렉션처럼 여러 타입의 데이터를 전송하는 view data을 사용할 수 있다. View에 Product 데이터베이스 테이블의 콘텐트를 보여주기를 원한다면, view data로 데이터베이스 레코드 콜렉션을 전송해야 한다.
[ASP.NETMVC]04.UnderstandingViews,ViewData,andHTMLHelpers.docx
