[ASP.NET] Razor Pages - Tag Helpers

• Tag Helpers는 Razor Pages에서 서버 측 속성을 사용하여 HTML 요소를 생성하는 도구
• Tag Helpers는 개발자가 HTML/CSS 지식을 활용해 동적으로 HTML 콘텐츠를 생성하고, 서버 데이터를 UI에 쉽게 연결 할 수 있도록 도움

<!-- 기존 HTML 코드 -->
<a href="/Attendee?attendeeid=10">View Attendee</a>

<!-- Tag Helper 사용한 코드 -->
<a asp-page="/Attendee" asp-route-attendeeid="10">View Attendee</a>

• 주요 Tag Helpers
  1. Link Tag Helpers
     • asp-page: 페이지 URL을 지정한다.
     • asp-route-{parameter}: 쿼리 매개변수를 설정한다.

  코드
  <a asp-page="/Attendee" asp-route-attendeeid="10">View Attendee</a>
  
  결과
  <a href="/Attendee?attendeeid=10">View Attendee</a>
  

  1. Form Tag Helpers
     • asp-action: 폼 데이터를 처리할 메서드(액션) 이름을 지정한다.
     • asp-controller: 컨트롤러 이름을 지정한다.

  html 코드
  <form asp-controller="Account" asp-action="Login" method="post">
      <input type="text" name="username" />
      <button type="submit">Login</button>
  </form>
  
  출력 결과 코드
  <form action="/Account/Login" method="post">
      <input type="text" name="username" />
      <button type="submit">Login</button>
  </form>
  

1. Partial Tag Helper
   • Partial Tag Helper는 Partial 파일의 내용을 삽입한다.
   • 옵션 속성
     • for: 현재 모델을 Partial에 전달
     • model: 특정 모델을 Partial에 전달
     • view-data: ViewData를 전달

   <partial name="_ItemPartial" for="Item" />
   <partial name="_ItemPartial" model="Model.Item" />
   

2. Partial Tag Helper 사용법
   • 기본 사용
     • Partial 파일 _ItemPartial.cshtml을 렌더링

     <partial name="_ItemPartial" />
     

   • 데이터 전달
     • for
       • 현재 모델의 특정 속성을 Partial에 전달

       <partial name="_ItemPartial" for ="Item" />
       

     • model
       • 새 모델을 Partial에 전달

       <partial name="_ItemPartial" 
                model='new Item { Number = 1, Name = "Test Item", Price = 10 }' />
       

     • view-data
       • ViewDataDictionary를 Partial에 전달

       @{
           ViewData["IsItemReadOnly"] = true;
       }
       <partial name="_ItemPartial" view-data="ViewData" />
       
       

3. Tag Helpers의 장점
   • HTML과 서버 데이터의 결합
   • 가독성 향상
   • 코드 중복 감소
   • 표준화된 출력
4. 주요 ASP.NET Tag Helpers
   • Anchor Tag Helper: 링크 생성 (asp-page, asp-route-*).
   • Form Tag Helper: 폼 생성 (asp-action, asp-controller).
   • Partial Tag Helper: Partial 파일 렌더링 (<partial>).
   • Input Tag Helper: 입력 요소 생성 (asp-for).
   • Environment Tag Helper: 환경별 자산 로드 (<environment>).

따라서 Tag Helpers는 HTML 태그에 서버 측 기능을 추가하여 코드 중복을 줄이고, 더 간결하고 읽기 쉬운 HTML을 작성하도록 돕는다. 특히 Link, Form, Partial 등을 동적으로 처리할 때 강력한 도구로 사용한다.

 

예제 코드)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyApp.Namespace
{
    public class ExplorellaModel : PageModel
    {
        public string Country { get; set; }
        public List<SelectListItem> Countries { get; set; }
        
        public void OnGet()
        {
          new SelectListItem("AR", "Argentina");
          new SelectListItem("FR", "France");
          new SelectListItem("BR", "Brazil");
          new SelectListItem("GER", "Germany");
          new SelectListItem("CHI", "China");
        }
    }
}

 

위와 같은 C# 코드가 있다. 그리고 아래는 HTML 코드다

@page
@model MyApp.Namespace.ExplorellaModel
@{
}

<div class="jumbotron jumbotron text-white" style="background-image: url(https://c1.staticflickr.com/1/725/20835879729_66b87b0759_b.jpg); background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;">
	<div class="container">
		<h2 class="text-center display-3 mb-4">Welcome to Explorella!</h1>
	</div>
</div>
<h1 class="display-5">Pick your next destination!</h1>

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  
  <!-- Select Tag Helper -->
  <select class="custom-select my-1 mr-sm-2">
    <option selected>Choose...</option>
    <option value="AR">Argentina</option>
    <option value="FR">France</option>
    <option value="BR">Brazil</option>
    <option value="GER">Germany</option>
    <option value="CHI">China</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

 

기존에 드랍다운 메뉴나 선택 옵션을 만들기 위해서는 위에서 보이는 Select 태그를 사용해서 option으로 데이터를 파싱했다. 자, 이 코드를 웹 브라우저로 보게 되면

 

현재 이미지와 같게 나온다. 뭐 물론 css를 담당해야하지만... 위 HTML 태그들에서 select와 option태그를 보면 많은 코드가 반복되고 있는 것이 보인다. 그럼 우리는 List를 C#에서 선언해두었기 때문에 Tag Helpers를 사용해서 어떻게 사용하는지 알아보자

@page
@model MyApp.Namespace.ExplorellaModel
@{
}

<div class="jumbotron jumbotron text-white" style="background-image: url(https://c1.staticflickr.com/1/725/20835879729_66b87b0759_b.jpg); background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;">
	<div class="container">
		<h2 class="text-center display-3 mb-4">Welcome to Explorella!</h1>
	</div>
</div>
<h1 class="display-5">Pick your next destination!</h1>

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  
  <!-- Select Tag Helper -->
  <select class="custom-select my-1 mr-sm-2" asp-for="Country" asp-items="Model.Countries"></select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

 

위 코드는 변경된 코드이다.

 

Select 태그가 있는 부분에 Option 태그가 사라지고 단순히 asp-for와 asp-items를 사용해서 데이터를 파싱했다. 매우 간결해지지 않았나? 이와 같이 tag helpers는 코드를 간결하고 가독성있게 도와준다. 그럼 출력 결과도 보자.

 

변경된 것이 없이 동일한 동작을 수행하는 것을 볼 수 있다. 이 처럼 반복되는 코드를 중복을 제거하고 가독성있고 간결하게 도와주는 것이 Tag Helpers라고 이해하고 넘어가면 될 것 같다.