ASP.NET Core의 태그 도우미

작성자: Rick Anderson

태그 도우미란?

태그 도우미를 사용하면 서버 쪽 코드가 파일에서 HTML 요소를 만들고 렌더링하는 데 참여할 수 있습니다 Razor . 예를 들어 기본 제공 이미지 이름에 ImageTagHelper 버전 번호를 추가할 수 있습니다. 이미지가 변경될 때마다 서버는 이미지에 대한 새 고유 버전을 생성하므로 클라이언트는 부실 캐시된 이미지 대신 현재 이미지를 가져올 수 있습니다. 양식 만들기, 링크, 자산 로드 등 일반적인 작업을 위한 많은 기본 제공 태그 도우미가 있으며, 공용 GitHub 리포지토리 및 NuGet 패키지로 사용할 수 있습니다. 태그 도우미는 C#으로 작성되며 요소 이름, 특성 이름 또는 부모 태그를 기반으로 HTML 요소를 대상으로 합니다. 예를 들어 기본 제공 LabelTagHelper 특성이 적용 될 때 <label> HTML LabelTagHelper 요소를 대상으로 할 수 있습니다. HTML 도우미에 익숙한 경우 태그 도우미는 보기에서 Razor HTML과 C# 간의 명시적 전환을 줄입니다. 대부분의 경우 HTML 도우미는 특정 태그 도우미에 대한 대체 방법을 제공하지만 태그 도우미가 HTML 도우미를 대체하지 않는다는 점을 인식하는 것이 중요합니다. 각 HTML 도우미에 대한 태그 도우미는 없습니다. HTML 도우미에 비해 태그 도우미 는 차이점을 더 자세히 설명합니다.

태그 도우미는 Razor 구성 요소에서 지원되지 않습니다. 자세한 내용은 ASP.NET Core Razor 구성 요소를 참조하세요.

태그 도우미가 제공하는 내용

HTML 친화적인 개발 환경

일반적으로 Razor 태그 도우미를 사용한 태그는 표준 HTML처럼 보입니다. HTML/CSS/JavaScript와 대화하는 프런트 엔드 디자이너는 C# Razor 구문을 학습하지 않고도 편집 Razor 할 수 있습니다.

HTML 및 Razor 태그를 만들기 위한 풍부한 IntelliSense 환경

이는 보기에서 태그의 서버 쪽 생성에 대한 이전 접근 방식인 HTML Helpers와는 대조적입니다 Razor . HTML 도우미에 비해 태그 도우미 는 차이점을 더 자세히 설명합니다. 태그 도우미에 대한 IntelliSense 지원 은 IntelliSense 환경을 설명합니다. C# 구문에 능숙한 개발자조차도 C# 마크업을 직접 작성하는 것보다 태그 도우미를 활용하는 것이 더 생산적입니다.

서버에서만 사용할 수 있는 정보를 사용하여 생산성을 향상시키고 더 강력하고 안정적이며 유지 관리 가능한 코드를 생성할 수 있는 방법

예를 들어 지금까지 이미지 업데이트의 진언은 이미지를 변경할 때 이미지의 이름을 변경하는 것이었습니다. 성능상의 이유로 이미지를 적극적으로 캐시해야 하며, 이미지 이름을 변경하지 않으면 클라이언트가 부실 복사본을 가져올 위험이 있습니다. 지금까지 이미지를 편집한 후에는 이름을 변경해야 했고 웹앱의 이미지에 대한 각 참조를 업데이트해야 했습니다. 이것은 매우 노동 집약적 일뿐만 아니라 오류가 발생하기 쉽습니다 (참조를 놓치고 실수로 잘못된 문자열을 입력 할 수 있습니다.) 기본 제공 ImageTagHelper 에서는 자동으로 이 작업을 수행할 수 있습니다. ImageTagHelper 이미지 이름에 버전 번호를 추가할 수 있으므로 이미지가 변경되면 서버에서 이미지에 대한 새 고유 버전을 자동으로 생성합니다. 클라이언트는 현재 이미지를 가져올 수 있습니다. 이러한 견고성과 인건비 절감은 ImageTagHelper을 사용함으로써 사실상 추가 비용 없이 얻을 수 있습니다.

대부분의 기본 제공 태그 도우미는 표준 HTML 요소를 대상으로 하며 요소에 대한 서버 쪽 특성을 제공합니다. 예를 들어 <input>Views/Account 폴더의 여러 보기에서 사용되는 요소에는 특성이 asp-for 포함됩니다. 이 특성은 지정된 모델 속성의 이름을 렌더링된 HTML로 추출합니다. 다음 모델을 사용하여 Razor 보기를 고려합니다.

public class Movie
{
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
}

다음 Razor 태그:

<label asp-for="Movie.Title"></label>

다음과 같은 HTML을 생성합니다.

<label for="Movie_Title">Title</label>

이 특성은 asp-for에서 For 속성에 의해 LabelTagHelper 사용할 수 있습니다. 자세한 내용은 작성자 태그 도우미 를 참조하세요.

태그 도우미 범위 관리

태그 도우미 범위는 @addTagHelper, @removeTagHelper 및 "!" 옵트아웃 선택 문자와의 조합으로 제어됩니다.

@addTagHelper 태그 도우미를 사용할 수 있도록 합니다.

AuthoringTagHelpers라는 새 ASP.NET Core 웹앱을 만드는 경우 다음 Views/_ViewImports.cshtml 파일이 프로젝트에 추가됩니다.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

지시문 @addTagHelper을 사용하면 태그 도우미를 보기에 사용할 수 있습니다. 이 경우 뷰 파일은 Pages/_ViewImports.cshtml기본적으로 Pages 폴더 및 하위 폴더의 모든 파일에서 상속되므로 태그 도우미를 사용할 수 있습니다. 앞의 코드는 와일드카드 구문("*")을 사용하여 지정된 어셈블리(Microsoft.AspNetCore.Mvc.TagHelpers)의 모든 태그 도우미를 Views 디렉터리 또는 하위 디렉터리의 모든 보기 파일에서 사용할 수 있도록 지정합니다. @addTagHelper 이후의 첫 번째 매개 변수는 로드할 태그 도우미(모든 태그 도우미 로드에는 "*"를 사용)를 지정하며, 두 번째 매개 변수 "Microsoft.AspNetCore.Mvc.TagHelpers"는 태그 도우미를 포함하는 어셈블리를 지정합니다. Microsoft.AspNetCore.Mvc.TagHelpers 는 기본 제공 ASP.NET 핵심 태그 도우미의 어셈블리입니다.

AuthoringTagHelpers라는 어셈블리를 만드는 이 프로젝트의 모든 태그 도우미를 노출하려면 다음을 사용합니다.

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

프로젝트에 EmailTagHelper 및 기본 네임스페이스(AuthoringTagHelpers.TagHelpers.EmailTagHelper)가 포함된 경우, 태그 도우미의 정규화된 이름(FQN)을 제공할 수 있습니다.

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers

FQN을 사용하여 뷰에 태그 도우미를 추가하려면 먼저 FQN(AuthoringTagHelpers.TagHelpers.EmailTagHelper)을 추가한 다음 어셈블리 이름(AuthoringTagHelpers)을 추가합니다. 대부분의 개발자는 "*" 와일드카드 구문을 사용하는 것을 선호합니다. 와일드카드 구문을 사용하면 와일드카드 문자 "*"를 FQN의 접미사로 삽입할 수 있습니다. 예를 들어, 다음 지시문 중 하나가 EmailTagHelper를 불러옵니다.

@addTagHelper AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.Email*, AuthoringTagHelpers

앞에서 설명한 것처럼 파일에 지시문을 @addTagHelper 추가 Views/_ViewImports.cshtml 하면 Views 디렉터리 및 하위 디렉터리의 모든 보기 파일에서 태그 도우미를 사용할 수 있습니다. 특정 보기 파일에서 @addTagHelper 지시문을 사용하여 해당 보기에서만 태그 도우미를 노출하기로 설정할 수 있습니다.

@removeTagHelper 태그 도우미 제거

@removeTagHelper은 @addTagHelper과 동일한 두 개의 매개 변수를 가지며, 이전에 추가된 태그 도우미를 제거합니다. 예를 들어 @removeTagHelper 특정 보기에 적용하면 뷰에서 지정된 태그 도우미가 제거됩니다. 파일에서 @removeTagHelper 사용하면 Views/Folder/_ViewImports.cshtml폴더의 모든 보기에서 지정된 태그 도우미가 제거됩니다.

_ViewImports.cshtml 파일을 사용하여 태그 도우미의 범위를 제어하기

뷰 폴더에 _ViewImports.cshtml 추가할 수 있으며 뷰 엔진은 해당 파일과 Views/_ViewImports.cshtml 파일 모두에서 지시문을 적용합니다. 빈 Views/Home/_ViewImports.cshtml 파일을 Home보기에 추가한 경우 _ViewImports.cshtml 파일이 가산적이므로 변경되지 않습니다. 기본 Views/_ViewImports.cshtml 파일에 없는 @addTagHelper 명령문을 Views/Home/_ViewImports.cshtml 파일에 추가하면, 이러한 태그 도우미는 Home 폴더 안의 뷰에서만 사용할 수 있습니다.

개별 요소 선택 해제

태그 도우미 옵트아웃 문자("!")를 사용하여 요소 수준에서 태그 도우미를 사용하지 않도록 설정할 수 있습니다. 예를 들어 Email에서는 태그 도우미 옵트아웃 문자를 사용하여 <span> 유효성 검사가 비활성화됩니다.

<!span asp-validation-for="Email" class="text-danger"></!span>

태그 도우미 옵트아웃 문자를 여는 태그와 닫는 태그에 적용해야 합니다. (여는 태그에 옵트아웃 문자를 추가할 때 Visual Studio 편집기에서는 옵트아웃 문자를 닫는 태그에 자동으로 추가합니다.) 옵트아웃 문자를 추가하면 요소 및 태그 도우미 특성이 더 이상 고유한 글꼴로 표시되지 않습니다.

태그 도우미 사용을 명시적으로 설정하는 데 사용 @tagHelperPrefix

지시 @tagHelperPrefix 문을 사용하면 태그 접두사 문자열을 지정하여 태그 도우미 지원을 사용하도록 설정하고 태그 도우미 사용을 명시적으로 지정할 수 있습니다. 예를 들어 Views/_ViewImports.cshtml 파일에 다음과 같은 마크업을 추가할 수 있습니다.

@tagHelperPrefix th:

다음 코드 이미지에서는 태그 도우미 접두사로 설정 th:되므로 접두 th: 사를 사용하는 요소만 태그 도우미를 지원합니다(태그 도우미 사용 요소에는 고유한 글꼴이 있습니다). <label> 요소와 <input> 요소에는 태그 도우미 접두사를 가지며 태그 도우미를 사용할 수 있지만 <span> 요소는 사용할 수 없습니다.

Razor 태그 도우미 접두사를 레이블 및 입력 요소 이름에 대해

@addTagHelper에 적용되는 동일한 계층 규칙은 @tagHelperPrefix에도 적용됩니다.

자체 닫기 태그 도우미

많은 태그 도우미는 자체 닫는 태그로 사용할 수 없습니다. 일부 태그 도우미는 자체 닫는 태그로 설계되었습니다. 자체 닫힘으로 설계되지 않은 태그 도우미를 사용하면 출력이 억제됩니다. 태그 도우미를 자체 닫으면 렌더링된 출력에서 자체 닫는 태그가 생성됩니다. 자세한 내용은 태그 도우미 작성에서 이 메모를 참조하세요.

태그 도우미의 속성/선언에서의 C#

태그 도우미는 요소의 특성 또는 태그 선언 영역에서 C#을 허용하지 않습니다. 예를 들어 다음 코드는 유효하지 않습니다.

<input asp-for="LastName"  
       @(Model?.LicenseId == null ? "disabled" : string.Empty) />

앞의 코드는 다음과 같이 작성할 수 있습니다.

<input asp-for="LastName" 
       disabled="@(Model?.LicenseId == null)" />

일반적으로 @ 연산자는 렌더링된 HTML 마크업에 식의 텍스트 표현을 삽입합니다. 그러나 식이 논리적 false으로 평가되면 프레임워크는 대신 특성을 제거합니다. 앞에서 예를 든 바와 같이, 속성 disabled는 true 또는 Model가 LicenseId인 경우에 null로 설정됩니다.

태그 도우미 이니셜라이저

특성을 사용하여 태그 도우미 ITagHelperInitializer<TTagHelper> 의 개별 인스턴스를 구성할 수 있지만 특정 종류의 모든 태그 도우미 인스턴스를 구성하는 데 사용할 수 있습니다. 앱 내의 모든 asp-append-version 인스턴스에 대해 AppendVersion 특성 또는 ScriptTagHelper 속성을 구성하는 태그 도우미 이니셜라이저의 다음 예제를 고려해 보십시오.

public class AppendVersionTagHelperInitializer : ITagHelperInitializer<ScriptTagHelper>
{
    public void Initialize(ScriptTagHelper helper, ViewContext context)
    {
        helper.AppendVersion = true;
    }
}

이니셜라이저를 사용하려면 애플리케이션 시작의 일부로 등록하여 구성합니다.

builder.Services.AddSingleton
    <ITagHelperInitializer<ScriptTagHelper>, AppendVersionTagHelperInitializer>();

wwwroot 외부에서 태그 도우미 자동 버전 생성

태그 도우미가 외부wwwroot의 정적 파일에 대한 버전을 생성하려면 여러 위치에서 파일 제공을 참조하세요.

태그 도우미에 대한 IntelliSense 지원

HTML <label> 요소를 작성하는 것이 좋습니다. Visual Studio 편집기를 입력 <l 하는 즉시 IntelliSense는 일치하는 요소를 표시합니다.

키보드에

HTML 도움말뿐만 아니라 아이콘(그 아래에 ""이 있는 "<>@" 기호)도 얻을 수 있습니다.

아이콘은 태그 도우미의 대상으로 요소를 식별합니다. 순수 HTML 요소(예: fieldset)는 "<>" 아이콘을 표시합니다.

순수 HTML <label> 태그는 HTML 태그(기본 Visual Studio 색 테마 포함)를 갈색 글꼴로 표시하고, 특성은 빨간색으로, 특성 값은 파란색으로 표시합니다.

예제

입력 <label한 후 IntelliSense는 사용 가능한 HTML/CSS 특성 및 태그 도우미 대상 특성을 나열합니다.

사용자가 여는 대괄호와 HTML 요소 이름

IntelliSense 문 완성을 사용하면 탭 키를 입력하여 선택한 값으로 문을 완료할 수 있습니다.

사용자가 여는 대괄호, HTML 요소 이름

태그 도우미 특성을 입력하는 즉시 태그 및 특성 글꼴이 변경됩니다. 기본 Visual Studio "파랑" 또는 "밝은" 색 테마를 사용하여 글꼴은 굵은 자주색입니다. "어둡게" 테마를 사용하는 경우 글꼴은 굵은 청록색입니다. 이 문서의 이미지는 기본 테마를 사용하여 촬영되었습니다.

사용자가 어두운 테마를 사용하지 않기 때문에 현재 굵은 자주색인

Visual Studio CompleteWord 바로 가기(Ctrl + 스페이스바가 기본값)는 큰따옴표("") 안에서 입력할 수 있으며, 이렇게 하면 C# 클래스에서처럼 C# 환경으로 전환됩니다. IntelliSense는 페이지 모델의 모든 메서드와 속성을 표시합니다. 속성 형식이 .이므로 ModelExpression메서드 및 속성을 사용할 수 있습니다. 다음 이미지에서 저는 Register 보기를 편집 중이므로, RegisterViewModel을 사용할 수 있습니다.

사용자가

IntelliSense는 페이지의 모델에서 사용할 수 있는 속성과 메서드를 나열합니다. 풍부한 IntelliSense 환경을 사용하면 CSS 클래스를 선택할 수 있습니다.

사용자가

사용자는

HTML 도우미와 비교한 태그 도우미

태그 도우미는 Razor 뷰에서 HTML 요소에 붙어 작동하고, HTML 도우미는 Razor 뷰에서 HTML과 함께 메서드로 호출됩니다. CSS 클래스 "caption"을 사용하여 HTML 레이블을 만드는 다음 Razor 태그를 고려합니다.

@Html.Label("FirstName", "First Name:", new {@class="caption"})

at(@) 기호는 이것이 코드의 시작임을 나타냅니다 Razor . 다음 두 매개 변수("FirstName" 및 "First Name:")는 문자열이므로 IntelliSense 를 도울 수 없습니다. 마지막 인수:

new {@class="caption"}

특성을 나타내는 데 사용되는 익명 개체입니다. C#의 예약 키워드인 class를 기호(속성 이름)로 해석하도록 하려면, @ 기호를 사용하여 @class=를 지정합니다. 프런트 엔드 디자이너(HTML/CSS/JavaScript 및 기타 클라이언트 측 기술에 익숙하지만 C#과 Razor에는 익숙하지 않은 사람)에게 대부분의 구문은 생소합니다. IntelliSense의 도움 없이 전체 줄을 작성해야 합니다.

LabelTagHelper를 사용하여 동일한 마크업을 다음과 같이 작성할 수 있습니다.

<label class="caption" asp-for="FirstName"></label>

태그 도우미 버전을 사용하면 Visual Studio 편집기에서 입력 <l 하는 즉시 IntelliSense에서 일치하는 요소를 표시합니다.

사용자가 키보드에

IntelliSense는 전체 줄을 작성하는 데 도움이 됩니다.

다음 코드 이미지는 Visual Studio에 포함된 ASP.NET 4.5.x MVC 템플릿에서 생성된 보기의 Views/Account/Register.cshtmlRazor 양식 부분을 보여 있습니다.

Razor

Visual Studio 편집기에서 회색 배경의 C# 코드를 표시합니다. 예를 들어 AntiForgeryToken HTML Helper:

@Html.AntiForgeryToken()

가 회색 배경으로 표시됩니다. 레지스터 보기에서 대부분의 태그는 C#입니다. 태그 도우미를 사용하는 동일한 접근 방식과 비교합니다.

Razor ASP.NET Core 프로젝트 템플릿의 Register Razor 보기 폼 섹션용 태그 도우미로 마크업 작성

태그는 HTML 도우미 접근 방식보다 훨씬 더 명확하고 읽기, 편집 및 유지 관리가 더 쉽습니다. C# 코드는 서버에서 알아야 할 최소값으로 줄어듭니다. Visual Studio 편집기는 태그 도우미가 대상으로 지정한 태그를 고유한 글꼴로 표시합니다.

전자 메일 그룹을 고려합니다.

<div class="form-group">
    <label asp-for="Email" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
</div>

각 "asp-" 특성의 값은 "Email"이지만 "Email"은 문자열이 아닙니다. 이 컨텍스트에서 "Email"은 에 대한 RegisterViewModelC# 모델 식 속성입니다.

Visual Studio 편집기는 등록 양식의 태그 도우미 접근 방식에서 모든 태그를 작성하는 데 도움이 되지만 Visual Studio는 HTML 도우미 접근 방식의 대부분의 코드에 대한 도움말을 제공하지 않습니다. 태그 도우미에 대한 IntelliSense 지원 은 Visual Studio 편집기에서 태그 도우미 작업에 대해 자세히 설명합니다.

웹 서버 컨트롤과 비교한 태그 도우미

  • 태그 도우미는 연결된 요소를 소유하지 않습니다. 요소 및 콘텐츠의 렌더링에 참여합니다. ASP.NET 웹 서버 컨트롤이 선언되고 페이지에서 호출됩니다.

  • ASP.NET 웹 서버 컨트롤에는 개발 및 디버깅을 어렵게 만들 수 있는 사소한 수명 주기가 있습니다.

  • 웹 서버 컨트롤을 사용하면 클라이언트 컨트롤을 사용하여 클라이언트 DOM 요소에 기능을 추가할 수 있습니다. 태그 도우미에는 DOM이 없습니다.

  • 웹 서버 컨트롤에는 자동 브라우저 검색이 포함됩니다. 태그 도우미는 브라우저에 대한 지식이 없습니다.

  • 일반적으로 웹 서버 컨트롤을 작성할 수 없는 동안 여러 태그 도우미가 동일한 요소( 태그 도우미 충돌 방지 참조)에 대해 작동할 수 있습니다.

  • 태그 도우미는 범위가 지정된 HTML 요소의 태그와 콘텐츠를 수정할 수 있지만 페이지에서 다른 항목은 직접 수정하지 않습니다. 웹 서버 컨트롤은 구체적인 범위가 덜 명확하며, 페이지의 다른 부분에 영향을 미칠 수 있는 작업을 수행할 수 있습니다. 그로 인해 의도치 않은 부작용이 발생할 수 있습니다.

  • 웹 서버 컨트롤은 형식 변환기를 사용하여 문자열을 개체로 변환합니다. 태그 도우미를 사용하면 기본적으로 C#에서 작업하므로 형식 변환을 수행할 필요가 없습니다.

  • 웹 서버 컨트롤 구성 요소 및 컨트롤의 런타임 및 디자인 타임 동작을 구현 하는 데 사용 System.ComponentModel 합니다. System.ComponentModel 에는 특성 및 형식 변환기를 구현하기 위한 기본 클래스 및 인터페이스, 데이터 원본에 바인딩 및 라이선스 구성 요소가 포함됩니다. 일반적으로 TagHelper에서 파생되는 태그 도우미와는 대조적으로, TagHelper 기본 클래스는 두 개의 메서드인 Process와 ProcessAsync만을 노출합니다.

태그 도우미 요소 글꼴 사용자 지정

도구>옵션>환경> 글꼴 및색에서 글꼴 및 색 지정을 사용자 지정할 수 있습니다.

Visual Studio의 옵션 대화 상자

기본 제공 ASP.NET 핵심 태그 도우미

앵커

캐시

구성 요소

분산 캐시

환경

형태

양식 작업

이미지

입력

레이블

링크

부분적인

구성 요소 상태 유지

스크립트

선택

Textarea

유효성 검사 메시지

유효성 검사 요약

추가 리소스

  • Last updated on