ASP. NET Core – 사용자 지정 태그 도우미 만들기

ASP.NET Core는 TagHelpers를 사용하여 사용자 지정 태그로 Razor 구문을 확장하는 방법을 제공합니다. TagHelpers를 사용하면 html 모양으로 인해 C#이 아닌 사용자가 Razor 보기를 훨씬 쉽게 이해할 수 있습니다. 이제 레이블을 만들기 위해 HTML 도우미를 사용하는 대신 TagHelper를 사용할 수 있습니다.

예를 들어 사용자 이름 입력에 대한 레이블을 만들려면 다음 구문을 사용해야 합니다.

@Html.Label("Username", "Username:", new { @class = "control-label" })

레이블에 속성을 설정하려면 익명 개체를 세 번째 매개 변수로 제공해야 합니다. 프런트 엔드 개발자 또는 C#이 아닌 사용자에게는 이 구문이 익숙하지 않을 수 있으며 클래스를 변경하거나 클래스 또는 속성을 추가하려면 C#에 대한 더 나은 지식이 필요합니다.

LabelTagHelper를 사용하여 동일한 작업을 수행할 수 있습니다.

<ig-loader css-path="http://localhost/css"
           javascript-path="http://localhost/css"
           resources="combo"/>

위의 줄은 C # 코드가 아닌 마크 업 선언이기 때문에 훨씬 이해하기 쉽고 html에 더 잘 맞습니다.

TagHelpers를 사용하고 있으므로 Visual Studio IntelliSence 지원을 활용할 수 있습니다.

이것은 매우 멋져 보이지만 사용자 정의 TagHelpers를 만드는 것은 어떨까요?

대답은 예, 이것이 가능하며 그리드 및 드롭다운 등과 같은 복잡한 컨트롤을 만들 수 있다는 것입니다.

사용자 정의 TagHelper를 만들려면 TagHelper 클래스(여기에 하이퍼링크 삽입)를 상속하기만 하면 됩니다.

자바스크립트와 CSS와 같은 리소스를 로드하는 Loader라는 TagHelper를 만들어 보겠습니다. 로더는 Ignite UI AMD 구성 요소입니다.

새 항목 추가 메뉴에서 Visual Studio의 템플릿을 사용할 수 있습니다.

그러면 다음 클래스가 생성됩니다.

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace WebApplication1.TagHelpers {
    // You may need to install the Microsoft.AspNetCore.Razor.Runtime package into your project
    [HtmlTargetElement("tag-name")]
    public class LoaderTagHelper: TagHelper {
        public override void Process(TagHelperContext context, TagHelperOutput output) {}
    }
}

LoaderTagHelper는 다음과 같은 구조를 갖습니다

<ig-loader css-path="http://localhost/css"
           javascript-path="http://localhost/css"
           resources="combo" />

다음은 html을 포함하는 스크립트 태그로 렌더링됩니다.

TagHelper는 HtmlTargetElement의 값을 "ig-loader"로 변경하여 ig-loader에 매핑해야 합니다. TagHelper 특성은 C# 속성에 매핑되어야 하며, 이를 위해 태그 도우미 특성의 이름을 값으로 제공하는 HtmlAttributeName을 사용합니다.

이제 클래스가 다음과 같아야 합니다.

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace WebApplication1.TagHelpers {
    [HtmlTargetElement("ig-loader")]
    public class LoaderTagHelper: TagHelper {
        [HtmlAttributeName("css-path")]
        public string CssPath {
            get;
            set;
        }
        [HtmlAttributeName("javascript-path")]
        public string JavaScriptPath {
            get;
            set;
        }
        [HtmlAttributeName("resources")]
        public string Resources {
            get;
            set;
        }
        public override void Process(TagHelperContext context, TagHelperOutput output) {}
    }
}

HTML을 출력하도록 TagHelper를 렌더링하려면 Process 메서드를 사용합니다. 우리는 출력을 설정할 것입니다. TagName을 빈 문자열로 만들고 html을 출력 콘텐츠에 추가합니다.

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    output.TagName = string.Empty;
    output.Content.AppendHtml($" ");
}

이것은 훌륭하지만 그들 사이의 관계를 가진 더 복잡한 TagHelpers를 만드는 방법은 무엇입니까?

관계를 생성하기 위해 TagHelperContext.Items 사전을 사용하여 자식 TagHelper와 통신할 수 있습니다.

다중 선택 기능을 가질 ComboTagHelper를 만들어 보겠습니다.

우리는 다음과 같은 구조를 제공하고 있습니다.

<ig-combo ig-data-source="@Model" ig-key="Id" ig-value="Name">
    <ig-combo-multi-selection ig-is-enabled="true" ig-enable-checkboxes="true" />
</ig-combo>

상대적으로 다음과 같은 C # 클래스가 있습니다.

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace WebApplication1.TagHelpers {
    [HtmlTargetElement("ig-combo")]
    public class ComboTagHelper: TagHelper {
        [HtmlAttributeName("ig-key")]
        public string Key {
            get;
            set;
        }
        [HtmlAttributeName("ig-value")]
        public string Value {
            get;
            set;
        }
        [HtmlAttributeName("ig-data-source")]
        public object DataSource {
            get;
            set;
        }
        public MultiSelectionTagHelper MultiSelection {
            get;
            set;
        }
        public override void Process(TagHelperContext context, TagHelperOutput output) {}
    }
}

그리고

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace WebApplication1.TagHelpers {
    [HtmlTargetElement("ig-combo-multi-selection")]
    public class MultiSelectionTagHelper: TagHelper {
        [HtmlAttributeName("ig-enable-checkboxes")]
        public bool EnableCheckBoxes {
            get;
            set;
        }
        [HtmlAttributeName("ig-is-enabled")]
        public bool Enabled {
            get;
            set;
        }
        public override void Process(TagHelperContext context, TagHelperOutput output) {}
    }
}

TagHelpers 간의 관계를 만들고 올바른 컨텍스트를 사용하여 부모의 MultiSelection 속성을 초기화하기 위해 해당 컨텍스트의 항목 컬렉션에 부모의 인스턴스를 전달합니다.

부모 프로세스 메서드에서 이것을 ComboTagHelper 키에 전달하고 자식 컨텍스트를 가져와 해당 속성을 구문 분석할 수 있습니다.

public async override void Process(TagHelperContext context, TagHelperOutput output)
{
    context.Items.Add(typeof(ComboTagHelper), this);
    await output.GetChildContentAsync();
    // Set the output of the TagHelper
}

자식 프로세스에서는 부모의 MultiSelection 속성에 대한 참조를 설정하고 출력을 표시하지 않습니다.

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    ((ComboTagHelper)context.Items[typeof(ComboTagHelper)]).MultiSelectionSettings = this;
    output.SuppressOutput();
}

이제 자식 TagHelper가 부모의 속성으로 처리되었으며 이를 사용하여 출력을 렌더링할 수 있습니다.

TagHelpers는 Ignite UI의 볼륨 릴리스 16.2에서 사용할 수 있습니다.