ASP.NET Core] Tag Helper

Tag helper는 Razor Syntax에서 HTML elements를 쉽게 만들고 렌더링하는데 사용된다. HTML element처럼 보이지만, 서버 쪽 Razor engine에 의해 처리된다. 

 

예를들어 아래의 form tag는 

<form action="/home/create" method="post">

이렇게 쓸 수 있다. 

<form asp-action="create" asp-controller="home">

asp-action과 asp-controller는 Form Tag Helper의 attribute이다. 

위의 Form Tag Helper는 아래와 같이 태그를 생성한다. 

<form method="post" action="/Home/Create">
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8PlIso5McDBOjgPkVg9O4mnNiAE8U0HkVlA9e-Mtc76u7fSjCnoy909Co49eGlbyJxpp-nYphF_XkOrPo0tTGdygc2H8nCtZCcGURMZ9Uf01fPOg5jRARxTHXnb8N6yYADtdQSnJItXtYsir8GCWqZM" />
</form>

 

목적

Tag Helper 없이, form을 만들 수 있다. 하지만 Tag Helper는 html 태그를 생성하는데 필요한 코드를 단순하게 한다. 

사용법

Microsoft.AspNetCore.Mvc.TagHelpers를 add한다. 

'*' 는 모든 Tag Helper를 의미한다. 

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

view파일 전역에서 사용하기 위해서는 _ViewImports.cshtml 파일에 add 한다. 

 

특정 view파일에서 Tag Helper 사용하지 않으려면 @removeTagHelper 를 사용한다. 

@removeTagHelper ScriptTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers

Label Tag Helper

<label asp-for="@Model.Name"></label>

렌더링 하면 아래와 같다. 

<label asp-for="Name"></label>

Input Tag Helper

<input asp-for="Name" />

렌더링 하면 아래와 같다. 

<input type="text" id="Name" name="Name" value="" />

장점

• HTML 친화적인 개발 경험
• Rich IntelliSense Help

• Cleaner Code
• 확장성 : custom tag helper를 만들 수 있다.