Tag Helper

TagHelper

Razor 페이지 또는 뷰에서 HTML 태그를 더 쉽게 작성할 수 있음

TagHelper 사용하면 직관적이고 가독성 높은 코드 작성 가능

서버 측 코드와 HTML 마크업을 더욱 쉽게 통합할 수 있음

한마디로 HTML 코드와 C# 코드의 융합! (razor 개념과 비슷..?)

 

 

사용 이유

가독성 향상

Tag Helper 사용하면 HTML 코드가 더 읽기 쉬워지고 명확해짐

C# 코드를 통해 동적으로 속성을 설정하고 서버 측 코드와 HTML 마크업을 통합할 수 있어 유지보수가 용이함

asp- 표시된 부분이 Tag Helper 영역임

아래 코드를 해석하면 Account 컨트롤러의 Login 액션함수에 post 방식으로 전송 하겠다는 의미

좀 더 명확성을 가지기 때문에 접근성이 좋아진 것 같긴함.

<form asp-controller="Account" asp-action="Login" method="post">
    <!-- 폼 필드 -->
    <input asp-for="Username" />
    <input asp-for="Password" />
    <button type="submit">Login</button>
</form>

 

 

동기화

내가 Tag Helper를 사용하는 이유임. 아래처럼 스크립트 버전 관리하는데는 아주 유용함

asp-append-version = "true" 일 경우, 해당 스크립트가 변경 되었을 때 자동 동기화 시켜줌

css 마찬가지...!

<script src="~/js/site.js" asp-append-version="true"></script>

 

 

 

사용 방법

_ViewImports.cshtml 파일에 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 선언

* 는 모든 Tag Helper 의미함. 아래처럼 선언해주면 뷰 및 razor 에서 사용 가능

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

 

특정 페이지에서 Tag Helper 사용 하고 싶지 않을 경우, 아래 처럼 선언

@removeTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers