カスタムタグヘルパーの作成.ネットコア

前の記事ではASPの基本を説明しました.NETコアタグヘルパーと私はいくつかの組み込みのタグヘルパーのASPで利用可能な導入を与えた.ネットコア.Webアプリケーションは、光の速度と開発者は、ほぼ毎日新しい機能と要件を実装する必要が進化しています.ASPを利用できるなら良いでしょう.NETコアタグヘルパーインフラストラクチャと独自のカスタムタグヘルパーを作成し、複数のアプリケーション間で私たちのカスタムタグヘルパーを再利用することによって生産性になります.このガイドでは、カスタムASPを実装するために必要なすべてを説明します.ネットタグヘルパー.Open Graph Meta Tagsをレンダリングするカスタムタグヘルパーを作成します.

カスタムタグヘルパー基本

ASPのすべてのタグヘルパー.NETコアはITagHelper名前空間で利用可能なMicrosoft.AspNetCore.Razor.TagHelpersインターフェイスを実装する必要があります.このインターフェイスの既定の実装は、TagHelperクラスとすべての組み込みASPで利用できます.Taghelperクラスから派生したNETコアタグヘルパー.我々は、同様のアプローチに従うことができますTaghelperクラスからカスタムタグヘルパークラスを継承し、我々の要件に従っていずれかのプロセスまたはProcessAsyncメソッドをオーバーライドできます.
タグヘルパーは通常、ページ上でカスタマイズされたHTML出力を生成するために使用され、タグヘルパーを実装するときに、これらのパラメータに応じてタグヘルパーロジックを微調整することができるように、動的なデータやパラメータにアクセスする必要があります.カスタムタグヘルパーは、多くの異なるソースからこれらの動的パラメータを受け取ることができます.

カスタムタグヘルパーは、我々のタグヘルパーで定義している属性からデータを受け取ることができます.たとえば、次のようなカスタムタグがある場合は、カスタムタグヘルパー内のEnabledプロパティ値true/falseにアクセスし、それに応じてタグヘルパーロジックを実装できます.

<seo-helper enable="true"></seo-helper> 

カスタムタグヘルパーはまた、要求オブジェクト、ビューバッグ、ビューコンテクストなどの実行中のコンテキストから情報にアクセスすることができます

カスタムタグは、プロセスメソッドに渡される2つのオブジェクトtaghelpercontextとtaghelperoutputを使用してタグタグヘルパーが接続されている要素にもアクセスできます.

public override void Process(TagHelperContext context, TagHelperOutput output)
{}

カスタムタグヘルパーも、開始タグと終了タグの内部で利用可能なコンテンツにアクセスすることができます.

<format>Sample Contents</format>

カスタムタグヘルパーの実装

ASPを作成します.Visual Studio 2019でNETコアMVC Webアプリケーションを作成し、プロジェクトがうまく構築されていることを確認します.プロジェクトのルートディレクトリに「taghelpers」というフォルダを作成し、カスタムタグヘルパーを作成します.このフォルダーは必要ありません、そして、あなたはそれをどんな名前でも与えることができます、しかし、我々がすべての我々の見解を保存するためにすべての我々のControllerとViewフォルダーを置くために「コントローラ」フォルダを使うとき、それは慣習としてこの名前に従う方がよいです.
このチュートリアルの目的のために、私は別のソーシャルメディアプラットフォームであなたの記事を共有するためにOpen Graph Meta Tagsを生成するのに役立つオープングラフタグヘルパーを作成することを決めました.ここで最も一般的なオープングラフメタタグの3つの例です.

<meta property="og:title" content="Creating ASP.NET Core Custom Tag Helpers" />
<meta property="og:description" content="Learn how to create custom Tag Helpers in ASP.NET Core" />
<meta property="og:image" content="https://www.ezzylearning.net/images/featured.jpg" />

新しく作成されたTaghelpersフォルダーの中に“OpenGraphicHelper”というクラスを作成します.それはあなたがタグのヘルパー命名規則に従って、接尾辞“taghelper”でタグヘルパー名を終了することをお勧めします.また、私たちがオーバーライドする必要があるプロセスまたはプロセスasyncメソッドを提供するTaghelperクラスからOpenGraphicHelperクラスを派生させる必要があります.かみそりエンジンがカスタムタグヘルパーを実行すると、プロセスまたはprocessAsyncメソッドが呼び出され、カスタムタグヘルパーの出力が表示されます.

using Microsoft.AspNetCore.Razor.TagHelpers;

public class OpenGraphTagHelper : TagHelper
{
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {

    }
}

タグヘルパーがアタッチされた/関連する要素についての情報を必要とする場合は、上記のプロセスメソッドで最初のパラメーターとして渡されるTaghelPerContextオブジェクトを使用できます.このクラスには次の重要なプロパティがあります.
すべての属性
現在のHTML要素に関連付けられているすべての属性
アイテム
他のitaghelpersと通信するために使用する項目のコレクションを取得する
tagname
要素の解析されたHTMLタグ名
ユニケイド
このコンテキストのHTML要素に固有の識別子
番目のパラメータtaghelperoutputはタグヘルパーの出力を表し、このオブジェクトを使用して最終生成されたHTMLを変更できます.以下の重要な性質がある.
属性
HTML要素の属性.
内容
HTML要素の主な内容を取得または設定します.
変更される
内容が設定されていれば真.
投稿内容
HTML要素のポストコンテンツ.
後要素
HTML要素に続く内容.
前文
HTML要素の前の内容.
前段
HTML要素に先行する内容.
tagmode
生成されたHTMLの要素の構文.
tagname
HTML要素のタグ名.
TaghelPeroutputオブジェクトを使用してTagNameプロパティを次のようにmetaに設定するには、カスタムタグヘルパーを使用して簡単なHTMLメタ要素を生成します.

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    output.TagName = "meta";
}

OpenGraphHelperのタグヘルパーをすべてのマイザラビューに利用できるようにするために、AddTagelperディレクティブをView/Count ViewMportsに追加する必要があります.以下のようにファイルをcshtmlします.ここでCustomTagHelpersDemoはカスタムタグヘルパーを作成するアセンブリの名前です.

@addTagHelper \*, CustomTagHelpersDemo

あなたのカスタムタグヘルパーをRazorビューで使用するには、クラス名OpenGraphelperからTaghelperサフィックスを無視する必要があります.以下のように、下のKababケースにタグヘルパー名を記述する必要があります.

<form>
    <open-graph></open-graph>
</form>

プロジェクトを実行する場合は、Open要素とOpenタグの両方でHTMLにレンダリングされたメタ要素が表示されます.

<form>
    <meta> </meta>
</form>

生成されたメタタグの中にコンテンツを追加したいとしましょう

output.TagName = "meta";
output.Content.SetContent("I am meta tag");

上記の2つの文は、ブラウザで次の出力を生成します

<meta>I am meta tag</meta>

カスタム属性とコンテンツをタグヘルパーに追加したいとしましょう.カスタムタグヘルパーにタイトルプロパティを導入し、setAttributeメソッドを次のように使用する必要があります.

public string Title { get; set; } 

public override void Process(TagHelperContext context, TagHelperOutput output)
{
      output.TagName = "meta";               

      output.Attributes.SetAttribute("property", "og:title");
      output.Attributes.SetAttribute("content", Title); 
}

Razorビューでカスタムタグヘルパーを使用するとき、Visual Studioは完全なIntelliSenseのサポートを提供します.たとえば、Zazorビューでカスタムタグヘルパーの後にスペースを追加すると、新しく追加されたタイトルプロパティが、カスタムタグヘルパーの使用可能な属性の一覧に表示されます.

カスタムタグヘルパーには、次のように任意の文字列をタイトルとして指定できます

<open-graph title="Creating ASP.NET Core Custom Tag Helpers"></open-graph>

HTML上では、タグヘルパーを実行するとブラウザでレンダリングされます.

<meta property="og:title" content="Creating ASP.NET Core Custom Tag Helpers">

私たちのカスタムタグヘルパーは私たちのために非常に有用ではない1つのメタタグを生成するだけです.私たちは、カスタムタグタグを複数のオープングラフメタタグを生成するようにします.我々はビルトインTagBuilderクラスを使用して複数のメタタグを構築することができます.TagBuilderクラスには、MergeAttributeメソッドがあります.MetgeAttributeメソッドを使用して、我々が構築しているメタタグを使用して属性をアタッチし、最終的には、これらのすべてのメタタグを追加して最終出力を生成するためにAppendTMLメソッドを使用できます.

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    TagBuilder meta1 = new TagBuilder("meta");
    meta1.MergeAttribute("property", "og:title");
    meta1.MergeAttribute("content", Title);            
    output.Content.AppendHtml(meta1);

    TagBuilder meta2 = new TagBuilder("meta");
    meta2.MergeAttribute("property", "og:description");
    meta2.MergeAttribute("content", Description);
    output.Content.AppendHtml(meta2);

    TagBuilder meta3 = new TagBuilder("meta");
    meta3.MergeAttribute("property", "og:image");
    meta3.MergeAttribute("content", Image);
    output.Content.AppendHtml(meta3); 
}

我々は今、Zazorビューでカスタムタグヘルパーを使用し、次の3つのプロパティをすべて提供します

<open-graph 
    title="Creating ASP.NET Core Custom Tag Helpers"
    description="Learn how to create custom Tag Helpers in ASP.NET Core"
    image="https://www.ezzylearning.net/images/featured.jpg"></open-graph>

プロジェクトを実行する場合は、ブラウザで生成される次のHTMLが表示されます.

<open-graph>
   <meta content="Creating ASP.NET Core Custom Tag Helpers" property="og:title"></meta>
   <meta content="Learn how to create custom Tag Helpers in ASP.NET Core" property="og:description"></meta>
   <meta content="https://www.ezzylearning.net/images/featured.jpg" property="og:image"></meta>
</open-graph>

上記のHTMLでは何かが正しくない.プレーンHTMLメタタグを生成し、最終的な出力でカスタムタグヘルパー名を生成したくない.この問題を解決するには、TagNameプロパティをnullに設定し、次の行をプロセスメソッドの最初の行として追加する必要があります.

output.TagName = null; 

プロジェクトを再度実行し、この時点で3つのオープングラフメタタグが表示されます.

<meta content="Creating ASP.NET Core Custom Tag Helpers" property="og:title"></meta>
<meta content="Learn how to create custom Tag Helpers in ASP.NET Core" property="og:description"></meta>
<meta content="https://www.ezzylearning.net/images/featured.jpg" property="og:image"></meta>

概要

このチュートリアルでは、ASP . NETでカスタムタグヘルパーを作成する基本を説明しました.NETコアとSEOフレンドリーなメタタグを生成する単純なオープングラフタグヘルパーを実装.もちろん、あなたの要件に従って、より強力かつ複雑なカスタムタグヘルパーを開発することができます.このチュートリアルでは、ASP . NETでジャンプスタートを開始します.ネットコア開発者の旅.