タグヘルパー
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
前に アプリを統合した場合は、従来の ASP.NET Core Rendering SDKバージョン22以前を使用しています。このSDKは更新を受け取っていないため、新しい の最新バージョンにアップグレードすることをお勧めします。
ASP.NETでは、タグ ヘルパーを使用すると、サーバー側のコードがRazorファイル内のHTML要素の作成とレンダリングに参加できます。タグ ヘルパーの詳細については、Microsoftタグ ヘルパーのドキュメントを参照してください。
Sitecore ASP.NET Rendering SDKには、ページ編集に必要なコンテンツ、プレースホルダー データ、およびメタデータをレンダリングするためのカスタム タグ ヘルパーがいくつか用意されています。
次のタグヘルパーは、Sitecore.AspNet.RenderingEngineライブラリで使用できます。
-
プレースホルダー タグ ヘルパー
-
テキストフィールドタグヘルパー
-
リッチテキストフィールドタグヘルパー
-
ハイパーリンク タグ ヘルパー
-
日付タグヘルパー
-
イメージタグヘルパー
-
番号タグヘルパー
明示的な終了タグは、要素コンテンツを作成または変更するASP.NETタグ ヘルパーと共に使用する必要があります。タグが自己完結型の場合、タグヘルパーが要素の内容 (この場合はフィールド値) を挿入する場所はありません。
Sitecoreタグ ヘルパーをレンダリング ホスト アプリケーションで使用できるようにするには、タグ ヘルパーを含むライブラリの名前空間を\Views\_ViewImports.cshtmlRazorビューにインポートする必要があります。
@addTagHelper *, Sitecore.AspNet.RenderingEngineプレースホルダー タグ ヘルパー
プレースホルダー タグ ヘルパーは、Sitecoreプレースホルダーで定義されたコンポーネントをレンダリングできます。デフォルトでは、タグヘルパーはネストされたプレースホルダの複数レベルのレンダリングもサポートしています。
ページが編集モードの場合、タグ ヘルパーはコンポーネントに加えて編集クロムをレンダリングします。
このタグヘルパーを使用するには、スタンドアロンタグとして追加します。
<sc-placeholder name="main"></sc-placeholder>name属性は必須であり、その値は、現在のコンポーネントのレイアウトサービスによって返されるプレースホルダの名前と一致する必要があります。nameが無効または一致しない場合、タグ ヘルパーはHTMLコメントを使用してページに警告をレンダリングします。
プレースホルダータグヘルパーは、レイアウトサービスの出力に基づいてコンポーネントをレンダリングするためのエントリポイントです。通常、このタグヘルパーの1つ以上のインスタンスは、UseSitecoreRenderingでタグ付けされたコントローラーアクションによって返されるビューにあります。
テキストフィールドタグヘルパー
Text Fieldタグ ヘルパーは、ページが編集モードのときに、1行および複数行のテキスト フィールドのコンテンツをレンダリングおよび編集できます。
このタグ ヘルパーを使用するには、HTML要素のasp-for属性にTextFieldプロパティの名前を追加します。
@model MyComponentModel
<h2 asp-for="@Model.Heading"></h2>改行文字からHTMLのbreakタグへの変換を無効にするには、convert-new-lines属性を追加してfalseに設定します。
@model MyComponentModel
<div asp-for="@Model.Description" convert-new-lines="false"></div>テキストフィールドの編集を無効にするには、editable属性(デフォルトではtrueを追加します。
@model MyComponentModel
<div asp-for="@Model.Description" editable="false"></div>リッチテキストフィールドタグヘルパー
リッチ テキスト フィールド タグ ヘルパーは、ページが編集モードのときにSitecoreリッチ テキスト フィールドのコンテンツをレンダリングおよび編集できます。
このタグヘルパーは、次の2つの方法で使用できます。
-
スタンドアロンタグとして追加します。
RequestResponse@model MyComponentModel <sc-text asp-for="@Model.Content"></sc-text>Sitecoreリッチ テキスト フィールドには独自のルート<p>タグがあり、この方法ではDOMに新しい要素が導入されないため、これが推奨されることがよくあります。
-
HTML要素のasp-for属性にRichFieldプロパティの名前を追加します。
RequestResponse@model MyComponentModel <div asp-for="@Model.Content"></div>
リッチテキストフィールドの編集を無効にするには、editable属性(デフォルトではtrueを追加します。
@model MyComponentModel
<sc-text asp-for="@Model.Content1" editable="false"></sc-text>
<div asp-for="@Model.Content2" editable="false"></div>ハイパーリンク タグ ヘルパー
ハイパーリンク タグ ヘルパーは、ページが編集モードのときにSitecoreの一般リンク フィールドのコンテンツをレンダリングおよび編集できます。
このタグヘルパーは、次の2つの方法で使用できます。
-
スタンドアロンタグとして追加します。
RequestResponse@model MyComponent <sc-link asp-for="MyLink"></sc-link>手記コンテンツ作成者にリンクテキストを設定したくない場合は、静的リンクテキストを追加できます。
RequestResponse@model MyComponent <sc-link asp-for="MyLink">This is my <b>custom</b> text</sc-link> -
a HTML要素のasp-for属性にHyperLinkFieldプロパティの名前を追加します。
RequestResponse@model MyComponentModel <a asp-for="@Model.MyLink">It is my link!</div>
href属性の他に、タグヘルパーは次の属性をレンダリングします（フィールドプロパティで指定されている場合）:
-
class
-
target
-
title
これらの属性を上書きしたり、属性を追加したりできます。
@model MyComponent
<sc-link asp-for="MyLink" class="font-weight-bold" data-otherattributes="pass-through-to-anchor-tag">Link to Sitecore</sc-link>ハイパーリンクフィールドの編集を無効にするには、editable属性(デフォルトではtrueを追加します。
@model MyComponentModel
<sc-link asp-for="MyLink" editable="false" />エクスペリエンス エディターでレンダリングすると、カスタム コンテンツを含むリンク タグ ヘルパーはコンテンツをレンダリングしません。これは、WYSIWYG編集を許可するためです。このような場合は、editable=”false”を設定し、フィールドエディタを使用することを検討してください。
日付タグヘルパー
日付タグ ヘルパーは、ページが編集モードのときにSitecore日付フィールドのコンテンツをレンダリングおよび編集できます。
このタグヘルパーは、次の2つの方法で使用できます。
-
スタンドアロンタグとして追加します。
RequestResponse@model MyComponent <sc-date asp-for="MyDate"></sc-date> -
HTML要素のasp-for属性にDateプロパティの名前を追加します。
RequestResponse@model MyComponent <span asp-for="MyDate" ></span>
日付の形式はdate-format属性で指定でき、カルチャの形式はculture属性で指定できます。 date-format属性が指定されていない場合、タグ ヘルパーはローカル形式を表示します。 culture属性が指定されていない場合、タグ ヘルパーは現在のカルチャ形式を表示します。
@model MyComponent
<sc-date asp-for="Date" date-format="d" culture="en-us"></sc-date>
<sc-date asp-for="Date" date-format="MM/dd/yyyy HH:mm:ss" culture="en-us"></sc-date>日付タグ ヘルパーは、標準の .NET日付と時刻の書式指定文字列をサポートしています。
Image Fieldタグ ヘルパー
Image Fieldタグ ヘルパーは、ページが編集モードのときにSitecoreイメージ フィールドのコンテンツをレンダリングおよび編集できます。
このタグヘルパーは、次の2つの方法で使用できます。
-
スタンドアロンタグとして追加します。
RequestResponse@model MyComponentModel <sc-img asp-for="@Model.Image" /> -
img HTML要素のasp-for属性にImageFieldプロパティの名前を追加します。
RequestResponse@model MyComponentModel <img asp-for="@Model.Image" />
画像フィールドの編集を無効にするには、editable属性(デフォルトではtrueを追加します。
@model MyComponentModel
<sc-img asp-for="@Model.Image" editable="false" />
<img asp-for="@Model.Image" editable="false" />Imageタグヘルパーに追加のパラメータを渡して、イメージのサーバー側のサイズ変更を実行できます。
@model MyComponentModel
<img asp-for="@Model.Image" image-params="new { mw = 100, mh = 50 }" />この属性で提供されるすべてのパラメータは、次のように画像URLに追加されます。http://<Content Delivery server>/-/jssmedia/<your site>/data/media/img/sc_logo.png?iar=0&hash=F313AD90AE547CAB09277E42509E289B&mw=100&mh=50
タグヘルパーの外部でサイズ変更パラメータを持つ画像フィールドをレンダリングする場合は、ImageFieldのGetMediaLink拡張子を使用できます。
style="background-image: url(@Model.Banner?.GetMediaLink(new {mw = 1170, mh = 402}))"image-params属性またはGetMediaLinkに渡すすべてのパラメータは、サイズ変更を行うためにホワイトリストに登録する必要があります。
次に、設定パッチの例を示します。
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
<sitecore>
<javaScriptServices>
<allowedMediaParams>
<projectName__1>mw=42,mh=42</projectName__1>
</allowedMediaParams>
</javaScriptServices>
</sitecore>
</configuration> 番号タグヘルパー
数値タグ ヘルパーは、ページが編集モードのときにSitecore数値フィールドのコンテンツをレンダリングおよび編集できます。
このタグヘルパーは、次の2つの方法で使用できます。
-
タグヘルパーをスタンドアロンタグとして追加します。
RequestResponse@model MyComponent <sc-number asp-for="MyNumber" /> -
HTML要素のasp-for属性にNumberプロパティの名前を追加します。
RequestResponse@model MyComponent <span asp-for="MyNumber" ></span>
数値の形式は、number-format属性とculture属性で指定できます。 culture属性が指定されていない場合、タグ ヘルパーは現在のカルチャ形式を表示します。
@model MyComponent
<sc-number asp-for="MyNumber" number-format="C" culture="en-us"></sc-number>
Numberタグ ヘルパーは 、標準の .NET数値書式指定文字列をサポートします。