본문 바로가기
.NET

[.NET] 태그 헬퍼(Tag Helpers)

by 가든가든 2023. 3. 9.
728x90

태그 헬퍼(Tag Helpers)는 Razor View Engine에서 HTML을 생성할 때 사용하는 방법이며, 기존에 HTML Helper를 사용하는 방법보다 더 직관적이고 유연한 방법입니다.

태그 헬퍼는 C# 코드에서 HTML 태그를 생성하는 것과 유사하게 작동하고, HTML Helper를 사용하는 경우보다 더 읽기 쉽고 유지 보수하기 쉬운 코드를 작성할 수 있습니다. 예를 들어, 태그 헬퍼를 사용하여 다음과 같은 HTML 코드를 생성할 수 있습니다.

Ex 1.

<select asp-for="CountryId" asp-items="Model.Countries"></select>

위 코드에서 asp-for 속성은 모델의 속성을 바인딩하고, asp-items 속성은 드롭다운 리스트의 항목을 정의합니다. 이 코드는 다음과 같은 HTML 코드를 생성합니다.

<select id="CountryId" name="CountryId">
  <option value="1">USA</option>
  <option value="2">Canada</option>
  <option value="3">Mexico</option>
</select>

Ex 2.

아래의 코드는 div 태그에 asp-controller와 asp-action 속성이 추가된 것입니다. 이를 통해 Home 컨트롤러의 Index 액션 메서드와 연결되는 HTML 링크를 생성할 수 있습니다.

<div asp-controller="Home" asp-action="Index">Home</div>

태그 헬퍼는 다양한 종류가 있습니다. 몇 가지 예를 들어보면 다음과 같습니다.

  • asp-controller: 컨트롤러 이름을 지정하는 속성입니다.
  • asp-action: 액션 메서드 이름을 지정하는 속성입니다.
  • asp-route-id: 매개 변수를 지정하는 속성입니다.
  • asp-for: 모델 속성에 연결하는 속성입니다.

태그 헬퍼는 ASP.NET Core MVC에서 기본적으로 제공되며, 매우 유용한 기능 중 하나입니다. 이를 사용하여 HTML 코드를 생성하면 더 직관적이고 유연한 코드를 작성할 수 있습니다. 또한 태그 헬퍼를 사용하여 HTML 코드를 작성하면 이식성이 더 높아집니다.

728x90