04 View

MVC View

MVC의 View는 UI를 표현하는 역할을 하며 View 파일을 랜더링해 HTML 파일을 생성해 리턴한다

View는 기본적으로 HTML, CSS로 UI를 구성하지만, MVC에서 View Engine을 통해 특별한 구문 및 Helper 함수들을 제공하기도 한다

MVC에서 가장 많이 쓰이는 View Engine은 Razor 엔진으로 View를 작성할 때 HTML과 Razor 문법을 함께 사용한다

MVC의 View 파일은 /Views/{컨트롤러명} 폴더에 위치해야 하며 파일명은 Action 메소드의 이름과 동일해야 한다

View 파일을 생성하는 간단한 방법은 Controller의 Action 메소드 블록 안에서 마우스 우클릭 -> Add View 메뉴를 선택하면 된다

View Layout

ASP.NET MVC의 View는 기본 마스터 템플릿을 계층적으로 가질 수 있으며 이를 Layout이라 한다

디폴트 레이아웃 파일은 /Views/Shared/_Layout.cshtml이며 별도로 레이아웃을 지정하지 않으면 자동으로 이를 사용한다

@{    
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}
 
<p>
    My View
</p>

Partial View

View의 특정 부분을 별도의 부분 View로 만들어 사용할 수 있다

<p>
    My View
</p>
 
@{     
    Html.RenderPartial("bottomPartialView.cshtml");    
}

Controller에서 View로 데이터 전달

MVC의 Controller는 View에 데이터나 객체를 보낼 수 있다

1. Controller의 View() 메서드의 파라미터로 Model 객체 전달

View는 넘어온 모델 객체의 타입을 @model과 함께 지정한다

2. ViewData(컬렉션)

Dictionary(해시테이블) 타입으로 Key에 Value를 지정해서 데이터 전달

3. ViewBag(dynamic)

dynamic 타입으로 개발자 임의의 속성들을 지정해 전달할 수 있으며 View에서도 동일한 속성명으로 사용할 수 있다

ViewBag은 내부적으로 ViewData 객체를 사용하는데, 해시테이블 데이터를 dynamic 타입으로 보다 현리하게 제공하기 위한 Wrapper이다

// Controller: Action 메소드
public ActionResult MyView(int id)
{
    ViewBag.Title = id + " 자료"; // 3. ViewBag
    ViewData["MethodName"] = nameof(ShowGuest); // 2. ViewData
 
    Guest guest = new Guest
    {
        Id = 1,
        Name = "Alex",
        CreateDate = DateTime.Now,
        Message = "Congrats!"
    };
 
    return View(guest); // 1. Method parameter
}
 
// Model
public class Guest
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime CreateDate { get; set; }
    public string Message { get; set; }
}
 
 
// View
@using GuestBook.Models
@model Guest // 1. Method parameter
 
<h2>@ViewBag.Title</h2> // 3. ViewBag
<p>
    Method: @ViewData["MethodName"] // 2. ViewData
    <br />
     
    <div>@Model.Id : @Model.Name</div>
    <div>
        @Model.Message
    </div>    
</p>

출처: http://www.csharpstudy.com/