ASPを解読する.NET 5&MVC 6シリーズチュートリアル(13):TagHelper

新しいMVC 6では、マイクロソフトが強力なTagHelper機能を提供し、次の膨大なコードから抜け出すことができます.

@Html.LabelFor(model => model.FullName)
@Html.EditFor(model => model.FullName)
@Html.ValidationMessageFor(model => model.FullName)

新しい機能TagHelperを導入した後、私たちはこのように定義するだけでいいです.コードは以下の通りです.

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" /*         TagHelper        */



 
 

この方式では,サーバ側コードを捨て,カスタムhtml属性を利用することでより意味があり,フロントエンドのユーザが開くのも快適で,フロントエンドの開発者の効率を極めて向上させた.
デフォルトのTagHelper実装では、異なる要素は異なるカスタム属性をサポートし、例えば、ほとんどの要素がasp-forをサポートし、a要素はasp-controllerとasp-actionをサポートするなど、異なる用途を実現するために、input要素が最も強く、様々なタイプのtypeと関連するフォーマットをサポートする.詳細については、次の章の表を参照してください.
A元素
ツールバーの
説明
asp-controller
Controllerの名前
asp-action
アクションの名前
asp-host
サイトのホスト
asp-fragment
URLのfragment名
asp-protocol
Webサイトプロトコル(httpまたはhttp)
asp-route
Route名
asp-route-
href
デフォルトのプロパティです.hrefに値がある場合、他のプロパティは値を設定できません.
Form要素
ツールバーの
説明
asp-controller
Controllerの名前
asp-action
アクションの名前
asp-anti-forgery
asp-route-
action
デフォルトのプロパティです.actionに値がある場合、他のプロパティは値を設定できません.
Input要素
ツールバーの
説明
asp-for
モデルフィールドの名前
asp-format
次のようにType形式を設定します.
書式設定
標準タイプ
HiddenInput
hidden
Password
password
Text
text
PhoneNumber
tel
Url
url
EmailAddress
email
Date
date
DateTime
datetime
DateTime-local
datetime-local
Time
time
Byte/SByte/Int16/UInt16/Int32/UInt32/Int64/UInt64/Single/Double
number
Boolean
checkbox
Decimal
text
String
text
IFormFile
file
IEnumerable`IFormFile
file
ここで、時間に関する具体的なフォーマットは以下の通りです.
ツールバーの
説明
date {0:yyyy-MM-dd}
datetime {0:yyyy-MM-ddTHH:mm:ss.fffK}
datetime-local {0:yyyy-MM-ddTHH:mm:ss.fff}
time {0:HH:mm:ss.fff}
Label要素
ツールバーの
説明
asp-for
モデルフィールドの名前
textarea要素
ツールバーの
説明
asp-for
モデルフィールドの名前
span元素
ツールバーの
説明
asp-validation-for
モデルフィールドの名前
div要素
ツールバーの
説明
asp-validation-aummary
ValidationSummary列挙値:ValidationSummary.All ValidationSummary.ModelOnly ValidationSummary.None.
説明のタイプを確認します.ValidationSummaryのみが選択されています.全てとバリdationSummaryModelOnlyではdiv要素をレンダリングできません.
select要素
ツールバーの
説明
asp-for
モデルフィールド名
asp-items
モデルフィールド名
link要素
ツールバーの
説明
asp-href-include
asp-href-exclude
asp-fallback-href
デフォルトhrefロードに失敗した場合の代替アドレス
asp-fallback-href-include
asp-fallback-href-exclude
asp-fallback-test-class
ロードに失敗したときに使用するclassスタイルを判断する
asp-fallback-test-property
ロードに失敗したclassスタイルのプロパティを判断する
asp-fallback-test-value
ロードに失敗したときに使用するclassスタイルの属性に対応する値を判断する
asp-file-version
href
デフォルトでロードされたcssファイルアドレス.
linkの使用例は次のとおりです.たとえば、次のコードを定義します.

このセグメントコードは、aspnetcdnがデフォルトで先にロードすることを示す.com上のcssファイルは、ロードに失敗した場合、ローカルサイト内のcssファイルをロードします.ロードに失敗した判断条件は、carousel-captionスタイルが非常に適用されていることを検出することです.つまり、このスタイルを適用した要素のdisplay属性がnoneに等しいかどうかを検出することです.ウェブサイトを実行した後、このコードの生成htmlは以下の通りです.

 !function (a, b, c) {
  var d, e = document,
   f = e.getElementsByTagName("SCRIPT"),
   g = f[f.length - 1].previousElementSibling,
   h = e.defaultView && e.defaultView.getComputedStyle ? e.defaultView.getComputedStyle(g) : g.currentStyle;

  if (h && h[a] !== b) {
   for (d = 0; d < c.length; d++) {
    e.write('<link rel="stylesheet" href="' + c[d] + '"/>')
   }
  }
 }("display", "none", ["\/lib\/bootstrap-touch-carousel\/css\/bootstrap-touch-carousel.css"]);

ここで、生成されたHTMLコードはlink要素の後に2つの要素が追加され、1つはclass="carousel-caption"属性のmeta要素であり、1つはscriptスクリプトラベルである.その主な原理は以下の通りである.
定義されたcarousel-captionスタイルをmeta要素に適用します.このmeta要素のdisplay属性がnoneに等しいかどうかをJSコードで検出する.noneに等しくない場合は、ローカルの代替cssファイルを再ロードします.
なお、jsスクリプトは、document.getElementsByTagName("SCRIPT")を用いて、最後のSCRIPTラベルの前の兄弟要素の形式を取得し、meta要素を取得する.
script要素
ツールバーの
説明
asp-src-include
asp-src-exclude
asp-fallback-src
代替jsファイルアドレス
asp-fallback-src-include
asp-fallback-src-exclude
asp-fallback-test
デフォルトjsファイルが正常にロードされたオブジェクトを判断する
asp-file-version
src
デフォルトのjsファイルアドレス.scriptラベル要素のfallback機能とlink要素にcssファイルタイプが記載されていますが、ここではclassスタイルではなく、あるオブジェクトが存在するかどうかを検出してデフォルトのjsファイルがロードに成功したかどうかを判断します.例は以下の通りです.

生成されたHTMLコードは比較的簡単で、例は以下の通りです.

(window.jQuery||document.write("<script src=\"\/lib\/jquery\/jquery.min.js\"><\/script>"));

scriptのラベル要素を多く生成し、jQueryオブジェクトが存在するかどうかを判断し、存在しない場合はロードに失敗したことを示す場合は、ローカルのスタンバイjsファイルをロードします.
Cache
ツールバーの
説明
vary-by
vary-by-header
vary-by-query
vary-by-route
vary-by-cookie
vary-by-user
expires-on
expires-after
expires-sliding
priority
enabled
.
EnvironmentTagHelperを利用して異なる運転環境の出力結果を制御する
多くの場合、環境を再開発してコンフィギュレーション情報を使用したいと考えています.生産環境では別のコンフィギュレーション情報を使用する場合、条件判断文を使用する必要がありますが、新版MVCでは、EnvironmentTagHelperが提供するEnvironment要素ラベルを使用すればいいです.例は次のとおりです.

上記のコードでは、Development環境であればローカルのjsファイルを使用し、そうでなければ(StagingまたはProduction環境)cdnのファイルを先にロードする(ただし、代替案が残っている).
このnamesの値判断根拠は,IHostingEnvironmentのEnvironmentName属性を検索し,比較してから対応する処理を行う.
カスタムTagHelper
MVCのすべてのTagHelperの実装は、Microsoft.AspNet.Razor.Runtime.TagHelpers.ITagHelperインタフェースを継承しているので、このインタフェースを実装するだけでカスタムTagHelperを実装することができ、このインタフェースの定義は以下の通りである.

public interface ITagHelper
{
 int Order { get; }
 Task ProcessAsync(TagHelperContext context, TagHelperOutput output);
}

ただし、一般的にカスタマイズする場合は、インタフェースのデフォルト実装TagHelperクラスを継承し、そのダミーメソッドProcessメソッドを再ロードするだけでよい.以下にいくつかの例を示し、詳細に検討する.
1.a要素上でcontrollerとaction属性を直接サポートする

public class ATagHelper : TagHelper
{
 [Activate]
 public IUrlHelper UrlHelper { get; set; }

 public string Controller { get; set; }

 public string Action { get; set; }

 public override void Process(TagHelperContext context, TagHelperOutput output)
 {
  if (Controller != null && Action != null)
  {
   var methodParameters = output.Attributes.ToDictionary(attribute => attribute.Key,
                 attribute => (object)attribute.Value);

   //      attributes，              
   output.Attributes.Clear();

   output.Attributes["href"] = UrlHelper.Action(Action, Controller, methodParameters);

   output.PreContent.SetContent("My ");
  }
 }
}

2.Textテキストのリンクを自動的に認識し、抽出する

[TargetElement("p")]
public class AutoLinkerTagHelper : TagHelper
{
 public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
 {
  var childContent = await context.GetChildContentAsync();

  // Find Urls in the content and replace them with their anchor tag equivalent.
  output.Content.SetContent(Regex.Replace(
   childContent.GetContent(),
   @"\b(?:https?://|www\.)(\S+)\b",
   "$0"));
 }
}

3.条件判断
条件を満たす要素を表示するcondictionを定義します.例は次のとおりです(Model.Approvedがtrueの場合にのみ表示されます).

© @Model.CopyrightYear - My ASP.NET Application

実装コードは次のとおりです.

[TargetElement("div")]
[TargetElement("style")]
[TargetElement("p")]
public class ConditionTagHelper : TagHelper
{
 public bool? Condition { get; set; }

 public override void Process(TagHelperContext context, TagHelperOutput output)
 {
  //      condition，     false，       
  if (Condition.HasValue && !Condition.Value)
  {
   output.SuppressOutput();
  }
 }
}

4.カスタム要素のTagHelper
カスタム要素にTagHelperを定義する場合は、次のようなコードの例を示す規則に従います.

public class WebsiteInformationTagHelper : TagHelper
{
 public WebsiteContext Info { get; set; }

 public override void Process(TagHelperContext context, TagHelperOutput output)
 {
  output.TagName = "section";
  output.PostContent.SetContent(string.Format(
   "
Version: {0}
" + Environment.NewLine +
   "
Copyright Year: {1}
" + Environment.NewLine +
   "
Approved: {2}
" + Environment.NewLine +
   "
Number of tags to show: {3}
" + Environment.NewLine,
   Info.Version.ToString(),
   Info.CopyrightYear.ToString(),
   Info.Approved.ToString(),
   Info.TagsToShow.ToString()));
  output.SelfClosing = false;
 }
}

使用する場合は、website-informationラベルを使用し、infoプロパティに強いタイプの値を割り当てる必要があります.例は次のとおりです.

そのレンダリング結果は、4つのp要素を含むsection要素としてレンダリングされる.