MVC Html Helpers

MVC View에서 HTML을 손쉽게 생성하기 위하여 Html Helper를 제공하고 있다. Html Helper는 모두 @Html 으로 시작하는데, 여기서 @은 Razor 문법이며 View 클래스(WebViewPage)의 Html 속성을 호출한다는 의미이다. 아래는 MVC View 클래스의 Base 클래스인 WebViewPage 클래스의 일부 멤버들인데, 여기서 Html 속성이 HtmlHelper 클래스 타입임을 볼 수 있다.

// MVC View의 Base 클래스
// 제네릭 버전의 WebViewPage<TModel> 클래스도 있음

public abstract class WebViewPage : WebPageBase
{
	public AjaxHelper<object> Ajax { get; set; }
	public override HttpContextBase Context { get; set; }
	public HtmlHelper<object> Html { get; set; }  // HtmlHelper
    public UrlHelper Url { get; set; }

    // 생략

    // Controller에서 전달되는 모델과 데이타 속성
	public object Model { get; }	
	public dynamic ViewBag { get; }
	public ViewDataDictionary ViewData { get; set; }
	public TempDataDictionary TempData { get; }		
}

HtmlHelper는 HTML을 쉽게 생성하기 위한 많은 메서드들을 가지고 있는데, 이들은 확장메서드(Extension Method) 형태로 구현되어 있다.

일반 HTML 대신 HtmlHelper를 사용하면 좋은 때는 모델 데이타 혹은 View 데이타를 바인딩 할 때이다. 즉, HtmlHelper는 데이타 바인딩을 쉽게 할 수 있는 기능을 제공하고 있다.
HtmlHelper는 크게 (1) Html.TextBox()와 같은 형태의 Weakly Typed 메서드와 (2) Html.TextBoxFor()와 같이 뒤에 For로 끝나는 Strongly Typed 메서드로 구분할 수 있다.
아래 예제는 Html.TextBox()와 Html.TextBoxFor()를 사용한 예이다.

@using GuestBook.Models
@model Guest
@{
    ViewBag.Title = "Guest Details";
}

<p>
    @Html.TextBox("Name", null, new { @class = "form-control" })
    <br />
    @Html.TextBoxFor(m => m.Message, new { @class = "form-control" })
    <br />
    Id: @Html.TextBoxFor(m => m.Id)
</p>

위 예제의 라인 8의 @Html.TextBox()는 첫번째 파라미터로 "Name" 을 지정하고 있는데, 이는 모델의 (여기서는 라인 2에 지정한 대로 Guest 객체) Name 속성을 사용한다는 의미이다. 여기서 Name 속성을 문자열로 지정했기 때문에 @Html.TextBox()가 Reflection을 사용한다는 면에서 Weakly Typed 메서드라 볼 수 있다. 두번째 파라미터는 텍스트 박스의 값인데, null로 지정하면 Guest.Name 속성을 표시하고 null이 아닌 문자열을 지정하면 지정한 문자열을 값을 설정한다. 세번째 파라미터는 HTML의 기타 attributes를 나타내는 익명 타입의 객체인데, HTML의 style이나 class 등의 attributes를 지정할 수 있다. Html.TextBox()는 여러 메서드 오버로드를 가지고 있으며, 첫번째 파라미터를 제외하고 Optional이다. 위의 Html.TextBox()는 예를 들어 아래와 같은 HTML로 변환된다.

<input class="form-control" id="Name" name="Name" type="text" value="Alex" />

위 예제의 라인 10의 @Html.TextBoxFor()는 첫번째 파라미터로 람다식을 지정하고 있는데, 람다식의 입력은 사용할 모델 객체 (Guest 객체) 이고, 출력은 바인딩할 그 모델의 속성이다. 즉, 라인 10에서는 Guest 모델 객체를 m 으로 받아들여 m.Message 속성을 리턴하는 것이다. Html.TextBoxFor()는 이 람다식을 사용해서 어떤 속성을 <input type="text" /> 안에 사용할 지를 결정한다. Html.TextBoxFor()는 여러 메서드 오버로드를 가지고 있으며, 첫번째 파라미터를 제외하고 Optional이다. 위의 Html.TextBoxFor()는 예를 들어 아래와 같은 HTML로 변환된다.

<input class="form-control" id="Message" name="Message" type="text" value="Congrats!" />

HtmlHelper로 자주 사용되는 기본 메서드들은 아래 표와 같다.

HtmlHelper	Strogly Typed	비고
Html.ActionLink	없음	a tag
Html.TextBox	Html.TextBoxFor
Html.TextArea	Html.TextAreaFor
Html.Display	Html.DisplayFor Html.DisplayForModel	모델 속성의 템플릿 사용하여 출력 모델 전체에 대해 템플릿 적용 출력
Html.Label	Html.LabelFor	<label> 태그
Html.Editor	Html.EditorFor Html.EditorForModel	모델 속성의 데이타 타입에 따라 HTML 생성 모델 전체에 대해 템플릿 적용하여 HTML 생성
Html.CheckBox	Html.CheckBoxFor
Html.RadioButton	Html.RadioButtonFor
Html.DropDownList	Html.DropDownListFor
Html.ListBox	Html.ListBoxFor
Html.Hidden	Html.HiddenFor
Password	Html.PasswordFor

HtmlHelper는 Model 클래스에 지정된 특성(attribute)들을 사용할 수 있다. 예를 들어, 아래 예제에서 Html.LabelFor()는 Guest 모델 클래스의 Display Name 값을 읽어 표시하고, Html.DisplayFor()는 DisplayFormat 에 지정된 날짜 포맷을 읽어 표시한다.

// Model 클래스에 Display* 특성 지정
public class Guest
{
    public int Id { get; set; }
    public string Name { get; set; }

    [Display(Name="작성일자")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")]
    public DateTime CreateDate { get; set; }

    public string Message { get; set; }
}


// View에서 LabelFor와 DisplayFor 사용
@model GuestBook.Models.Guest
<p>
    @Html.LabelFor(m => m.CreateDate)    @*작성일자 표시*@
    @Html.DisplayFor(m => m.CreateDate)  @*날짜를 yyyy-MM-dd 로*@ 
</p>

위 코드에 대한 HTML 은 출력은 아래와 같다.

작성일자 2017-02-11 

모델 전체에 대해 커스텀 템플릿을 만들고, Html.DisplayForModel() 혹은 Html.EditorForModel()을 사용하여 해당 모델 데이타를 출력하거나 편집하게 할 수도 있다.