当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
同意しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。詳細はこちらから
お問い合わせ 無料トライアル

Document

ドキュメント

ページコンテンツの表示

最終更新日:

このページはチュートリアルの一部であり、最初から最後まで順番に実行する必要があります。最初のページに移動します：Xperienceのインターフェース

以下について説明します

  • ページのコンテンツを取得する

  • コンテンツツリーベースのルーティングの構成

  • ホームページの表示

  • 医療センターページの表示

ページコンテンツを取得する

ウェブサイトのページの動的コンテンツは、Xperience の管理インターフェイスで作成・管理され、ライブサイトアプリケーションと共有されているデータベース内に格納されます。

通常、MVC サイトでデータを扱う際には、データを取得するコードを書き、適切な URL ルートを処理するコントローラを用意し、データを目的の出力にフォーマットするモデルに対応するビューを作成する必要があります。

Xperience のコンテンツツリーベースのルーティング機能は、これらをすべて処理してくれます。特定の規約に基づいてビューを提供するだけで、システムが自動的に一致するモデルクラスを持つコントローラを確保して、リクエストを処理してページを表示します。

コンテンツツリーベースのルーティングの構成

サイトのために作成したページを表示する前に、設定する必要があることがあります。

現在、ウェブサイトのドメインルートにアクセスすると、404 not foundエラーが発生します。これは作成した両方のページは別の場所にあるためです。1 つは ~/Home にあり、もう 1 つは ~/MedicalCenter にあります。

ドメインルート ~/ にアクセスするすべてのユーザーを ~/Home にリダイレクトします。これは、設定アプリケーションで行うことができます。

  1. Xperience管理インターフェイスで、Settingsアプリケーションを開きます。

  2. 左側のサイドバーで、「Settings」→「URLs & SEO」に移動します。

  3. Content tree-based routingで、「/home」のようにHome pageを設定します。

  4. Home page URL behaviorを「Redirect to domain root」に設定します。ホームページにリダイレクトします。

  5. [Save]をクリックします。Configuring content tree-based routing

ホームページの表示

コンテンツツリーベースのルーティング機能を有効にして設定したので、ホームページを表示するために必要なことは、ライブサイトプロジェクトの ~/Views/Shared/PageTypes/ の下にあるビュー (.cshtml) ファイルを提供することだけです。ビューは、ページがベースになっているページタイプのコード名にちなんで命名する必要があります - 私たちの場合は Home (MEDIO Clinic) です。

  1. Xperience の管理インターフェイスで、「ページタイプ」アプリケーションを開きます。

  2. Home (MEDIO Clinic) ページタイプを見つけ、[Edit] (🖊) をクリックします。Generalタブが開きます。Finding the page type code name

ホームモデルビューの作成

ページタイプのコード名が手元にあるので、指定した場所に対応するビューファイルを作成する必要があります。

  1. ~/Views/Shared/PageTypesを右クリックして、Add -> View...を選択します。

  2. 新しいビューのプロパティを以下のように設定します。 a.View name: MEDIO_Home (コードの名称のドットはアンダースコアに置き換えてください) b.Template: 何も入力しません c.Model: 何も入力しません

  3. [Add]ボタンをクリックします。

ここで、ホーム（メディオクリニック）のページタイプに基づいたページの書式設定とデザインを提供する必要があります。

  1. MEDIO_Home.cshtmlビューファイルを開きます。

  2. ビューコードでは、以下のモデルクラスを指定します。

    
@model Kentico.Content.Web.Mvc.Routing.IPageViewModel<CMS.DocumentEngine.Types.MEDIO.Home>

  3. ViewBag.Titleの値をページのDocumentNameプロパティに設定します。

    
@{
    ViewBag.Title = Model.Page.DocumentName;
}

  4. Xperienceタグヘルパーをページに追加します。

    
@addTagHelper *, Kentico.Content.Web.Mvc

  5. 対応するRazorセクション（サイトの_Layoutで定義されている）内の「<page-builder-styles />」と「<page-builder-scripts />」タグヘルパーを呼び出します。タグヘルパーは、ページビルダー機能に必要なスタイルシートやスクリプトへのリンクをレンダリングします。

    
@section styles
{
    @* Includes CSS necessary for page builder functionality *@
    <page-builder-styles />
}
​
@section scripts
{
    @* Includes scripts necessary for page builder functionality *@
    <page-builder-scripts />
}

  6. チュートリアルリソースのindex.htmlファイルから、bodyタグ内の2つの<section>要素のHTMLコードをHomeビューにコピーします（ティザーとコンテンツのCSSクラスでスタイリングされています）。既存のプレースホルダメッセージとコメントされたコードを置き換えます。

  7. ティーザーセクションでは、段落要素のテキストを Model.Page.Fields.HomeHeader プロパティに置き換えます。

  8. コンテンツ・セクションで、以下の値を置き換えます。

    • 見出し要素のテキストを Model.Page.Fields.HomeTextHeading プロパティに置き換えます。

    • 段落要素のテキストをModel.Page.Fields.HomeTextプロパティに置き換えます。

  9. コンテンツ・セクションの最初の<div>要素の中で、area-identifier="editableArea "パラメータを持つ<editable-area />タグ・ヘルパーを呼び出します。

    編集可能エリアは、ページビルダーウィジェットのコンテナとして機能します。各編集可能領域は、与えられたビューのコンテキスト内で一意な文字列識別子で定義されなければなりません (この場合は editableArea)。

    
<editable-area area-identifier="editableArea" />

     

  10. 変更を保存します。

Homeビューの最終的なコードは以下のようになります。


@addTagHelper *, Kentico.Content.Web.Mvc
​
@model Kentico.Content.Web.Mvc.Routing.IPageViewModel<CMS.DocumentEngine.Types.MEDIO.Home>
​
@{
    ViewBag.Title = Model.Page.DocumentName;
}
​
@section styles
{
    @* Includes CSS necessary for page builder functionality *@
    <page-builder-styles />
}
@section scripts
{
    @* Includes scripts necessary for page builder functionality *@
    <page-builder-scripts />
}
​
<section class="teaser">
    <div class="col-sm-offset-3 col-sm-4">
        <p>@Model.Page.Fields.Header</p>
    </div>
    <div class="clearfix"></div>
</section>
<section class="content">
    <div class="col-sm-offset-3 col-sm-5">
        <h1>@Model.Page.Fields.TextHeading</h1>
        <p>@Model.Page.Fields.Text</p>
        <editable-area area-identifier="editableArea" />
    </div>
    <div class="clearfix"></div>
</section>

Webサイトのホームページをプレビューする

プロジェクトを構築して、ページがどのように見えるか見てみましょう

(IIS Express を使用して) Web サイトを再度起動すると、コンテンツツリーベースのルーティング機能の設定により、リクエストは ~/Home にリダイレクトされ、MEDIO_Home.cshtml ビューファイルを使用して表示されます。コントローラやモデルを書いたり、カスタムルートを登録したりする必要はありません。The Medio Clinic's Home page on the live site

また、Xperience の管理インターフェイス (https://localhost/Xperience13_Admin など) で直接ページをプレビューすることもできます。Pages アプリケーションに切り替えて、プレビューモードを選択します。

Preview of the Medio Clinic's Home page in the administration interface

あるいは、Editモードに切り替えて、ホームタイプのページで有効になっているPageタブを使用して、ページの内容をプレビューすることもできます。ページビルダーを有効にし、その機能に必要なスクリプトとメソッドを対応するビューに含めたので、ページの下部に追加された編集可能な領域が表示されているのを見ることができます。Home page displayed using the Edit mode's Page tab

医療センターページの表示

メディカルセンターのページをフォーマットして表示するために、IPageViewModel<CMS.DocumentEngine.Types.MEDIO.MedicalCenter>をモデルクラスとして使用するビューを再び作成します。ホームページのビューモデルと同様に、IPageViewModelインターフェースの汎用パラメータは、先に生成したメディカルセンター（MEDIOクリニック）のページタイプの強力な型付け表現です。

このページタイプには、リッチテキストエディタによって管理されるフィールドが含まれており、コンテンツ内の潜在的なHTML要素（例えば、テキストのスタイリング、ハイパーリンク、画像など）を処理する必要があることを意味します。

リッチテキストエディタのフィールドの内容を MVC ビューに表示するには、Html.Kentico().ResolveUrls 拡張メソッドか、標準の Html.Raw メソッドを使用してください。どちらのメソッドも、送信された値の HTML エンコーディングを無効にします。

ResolveUrlsメソッドは、さらに相対URLを絶対URLに分解します。システムはすでに、すべてのページの出力を処理することで相対URLを自動的に解決しています。しかし、出力フィルタリングの要件を最小限に抑えるために、リッチ テキスト フィールドに対してResolveUrlsメソッドを呼び出すことをお勧めします。

  1. ~/Views/Shared/PageTypesを右クリックして、Add -> View...を選択します。

  2. 新しいビューのプロパティを以下のように設定します。

    • View name: MEDIO_MedicalCenter

    • Template: Empty

  3. 必要な拡張メソッドをインポートする次のusing文を追加します。

    
@using Kentico.Web.Mvc

  4. View内の、ViewBag.Titleの値をモデルのDocumentNameプロパティに設定します。

    
@{
    ViewBag.Title = Model.DocumentName;
}

  5. モデルクラスをIPageViewModel<CMS.DocumentEngine.Types.MEDIO.MedicalCenter>に設定します。

    
@model Kentico.Content.Web.Mvc.Routing.IPageViewModel<CMS.DocumentEngine.Types.MEDIO.MedicalCenter>

  6. チュートリアル・リソースの「medical-center.html」ファイルから、bodyタグ内の2つの<section>要素のHTMLコード（ティーザーとcontent CSSクラスでスタイリングされています）をMedicalCenterビューにコピーします。

  7. ティーザー・セクションでは、段落タグのテキストを Model.Page.Fields.Header プロパティに置き換えます。

  8. コンテンツセクションでは、見出しと段落の両方を以下のRazorコールで置き換えます。

    
@Html.Kentico().ResolveUrls(Model.Page.Fields.Text)

  9. 変更を保存します。

MedicalCenterビューの最終的なコードは次のようになります。


@using Kentico.Web.Mvc
​
@model Kentico.Content.Web.Mvc.Routing.IPageViewModel<CMS.DocumentEngine.Types.MEDIO.MedicalCenter>
​
@{
    ViewBag.Title = Model.Page.DocumentName;
}
​
<section class="teaser">
    <div class="col-sm-offset-3 col-sm-4">
        <p>@Model.Page.Fields.Header</p>
    </div>
    <div class="clearfix"></div>
</section>
<section class="content">
    <div class="col-sm-offset-3 col-sm-5">
        @Html.Kentico().ResolveUrls(Model.Page.Fields.Text)
    </div>
    <div class="clearfix"></div>
</section>

変更を保存した後は、プロジェクトをビルドすることを忘れないでください。

医療センターのページをプレビューする

Xperience 管理インターフェイスの [Pages] アプリケーションでページをプレビューするか、[Live site] ボタンをクリックしてブラウザでページを表示することができます。ホーム ページと同様に、コンテンツ ツリーベースのルーティングにより、~/MedicalCenter にアクセスすると、そのページのタイプに基づいて、そのページの正しいビューが表示されるようになります。

これで、サイトのページのコンテンツを取得して表示するコンポーネントをMVCアプリケーションに構築することができました。チュートリアルの最後のステップでは、ウェブサイトのナビゲーションを構築していきましょう。

前のページ：サイトレイアウトの作成— 次のページ：ナビゲーションメニューの作成

完成したページ： 10の8

 

原文：https://docs.xperience.io/13tutorial/asp-net-core-development-tutorial/displaying-page-content