ASP.NET Core MVC–Tag Helperコンポーネント

6908 ワード
ASP.NET Core Tag Helpersシリーズカタログ、これは第5編、計5編です.
  • ASP.NET Core MVC–Tag Helpers紹介
  • ASP.NET Core MVC – Caching Tag Helpers
  • ASP.NET Core MVC – Form Tag Helpers
  • ASP.NET Core MVC–カスタムTag Helpers
  • ASP.NET Core MVC–Tag Helperコンポーネント

    • Tag Helperコンポーネント-概要


    前にいくつかの文章でTag Helpersについて話しましたが、今回は他のことについて議論します.
    ASP.NET Core 2はまた、新しい機能であるTag Helperコンポーネントを提供しています.
    Tag Helperコンポーネントは、Tag Helperとともに動作する特定のHTMLの生成または変更を担当します.
    Tag HelperはTag Helperコンポーネントを実行します.
    Tag Helperコンポーネントは、HTMLに動的にコンテンツを追加する最も完璧な選択です.
    Tag Helperコンポーネントを実行するには、特定のTag Helperを設定する必要があります.このTag Helperは,内蔵抽象クラスからTagHelperComponentTagHelperを継承する必要がある.
    私は知っています.私はこの命名が非常に困惑していることを知っています.TagHelperComponentTagHelperから継承されるタイプはTag Helperであり、これに一致するTag Helperコンポーネントが実行される.

    ステップ


    まず新しいTag Helperコンポーネントを作成します.headとbodyラベルを内蔵したTag Helperコンポーネントを作成できます.特殊クラスTagHelperComponentTagHelperから継承されたTag Helperは、いずれもTag Helperコンポーネントを作成することができる.
    例を見てみましょう.
    新しいRazor Pagesテンプレートの作成から始めます.
        dotnet new razor

    Tag Helperコンポーネントを正常に動作させるには、次の手順に従います.
  • 新しいTag Helperコンポーネント
    • を作成
  • は、DI
    • にコンポーネントを注入する.
  • TagHelperComponentTagHelperから継承されたTag Helperクラス
    • を作成
  • Tag Helperを_ViewImports.cshtmlファイルに含む
    • .
    新しいTag Helperコンポーネントを作成します.
        public class ArticleTagHelperComponent : TagHelperComponent
    {
        public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            if (string.Equals(context.TagName, "article", StringComparison.OrdinalIgnoreCase))
            {
                output.PostContent.AppendHtml("console.log('ASP.NET Core - Love From Console');");
            }
            return Task.CompletedTask;
        }
    }

    Tag Helperを使用したことがある場合は、よく知っているはずです.例では、組み込まれたTagHelperComponent抽象クラスから継承され、ProcessAsyncメソッドが書き換えられる.
    Tag Helperコンポーネントをアプリケーションの一部として、サービスコンテナに注入する必要があります.
        public void ConfigureServices(IServiceCollection services)
    {
        services.AddTransient();
        services.AddMvc();
    }

    作成したTag Helperコンポーネントを使用できます!
    Tag Helperの作成:
        [HtmlTargetElement("article")]
    [EditorBrowsable(EditorBrowsableState.Never)]
    public class ArticleTagHelperComponentTagHelper : TagHelperComponentTagHelper
    {
        public CodingBlastTagHelper(ITagHelperComponentManager componentManager, ILoggerFactory loggerFactory)
            : base(componentManager, loggerFactory)
        {
        }
    }

    最初の行に注意してください.このTag Helperアシスタントのターゲットは、HTML内のすべてのarticle要素/タグです.
    このTag Helperをアプリケーションに知らせるには、_ViewImports.cshtmlファイルに追加する必要があります.
        @using IntroTagHelperComponent
    @namespace IntroTagHelperComponent.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper SampleTagHelperComponent.ArticleTagHelperComponentTagHelper, SampleTagHelperComponent

    実際の効果を見るには、コードに少なくとも1つのarticleラベルが必要です.そのため、Index.cshtmlページを変更します.
    @model IndexModel
@{
    ViewData["Title"] = "Home page";
}
 

    
 

    
    TagHelperComponent will add stuff here.

    Tag Helperを内蔵したTag Helperコンポーネント

    目前有两个内置的 Tag Helper 继承自TagHelperComponentTagHelper类，它们位于 Microsoft.AspNetCore.Mvc.TagHelpers 程序集中 。

    这两个标签助手是 HeadTagHelper 和 BodyTagHelper。它们使我们很容易将内容注入 head 和 body 中。我们所要做的是创建 Tag Helper 组件并将其注入我们的应用程序中。

    这是 HeadTagHelper 的代码(aspnet/Mvc GitHub 仓库)：

    // Copyright (c) .NET Foundation. All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
using System.ComponentModel;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.Extensions.Logging;
namespace Microsoft.AspNetCore.Mvc.Razor.TagHelpers
{
    /// 
    /// A  targeting the <head> HTML element.
    /// 
    [HtmlTargetElement("head")]
    [EditorBrowsable(EditorBrowsableState.Never)]
    public class HeadTagHelper : TagHelperComponentTagHelper
    {
        /// 
        /// Creates a new .
        /// 
        /// The  which contains the collection
        /// of s.
        /// The .
        public HeadTagHelper(ITagHelperComponentManager manager, ILoggerFactory loggerFactory)
            : base(manager, loggerFactory)
        {
        }
    }
}

    コードは非常に簡単で、TagHelperComponentTagHelperクラスから継承され、head HTML要素がターゲットです.
    デフォルトの_ViewImports.cshtmlファイルの内容を表示すると、デフォルトでは次の内容が含まれます.
    @using IntroTagHelperComponent
@namespace IntroTagHelperComponent.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

    内蔵HeadTagHelperは、カスタムTag Helperコンポーネントを使用してheadラベルを変更できます.
    すべてのheadラベルを確認するTag Helperコンポーネントを追加します.
    public class HeadTagHelperComponent : TagHelperComponent
{
    public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        if (string.Equals(context.TagName, "head", StringComparison.OrdinalIgnoreCase))
        {
            output.PostContent.AppendHtml("<script>console.log('head tag');</script>");
        }
        return Task.CompletedTask;
    }
}

    もちろん、追加されたHeadTagHelperComponentをアプリケーションに注入する必要があります.
        public void ConfigureServices(IServiceCollection services)
    {
        services.AddTransient();
        services.AddMvc();
    }

    コード#コード#


    サンプルコードはGitHub-SampleTagHelperComponentです.

    まとめ

  • Tag Helperコンポーネントは、HTMLにコンテンツを動的に追加するために使用することができる
    • .
  • 特殊Tag Helper(TagHelperComponentTagHelperクラスから継承)は、すべての一致するTag Helperコンポーネント
    • を実行する
    原文:『ASP.NET Core MVC–Tag Helper Components』https://codingblast.com/tag-helper-components/翻訳:Sweet Tang本文のアドレス:http://www.cnblogs.com/tdfblog/p/tag-helper-components-in-asp-net-core-mvc.html転載を歓迎して、明らかな位置で出典とリンクを出してください.
    C#datatableの作成
    ASP.NET DropDownListコントロールの使い方