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

Document

ドキュメント

ページコンテンツの表示

最終更新日:

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

以下について説明します：

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

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

  • ホームページの表示

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

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

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

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

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

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

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

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

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

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

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

  3. コンテンツツリーベースのルーティングで、「/home」のようにホームページを設定します。

  4. 「Home page URL behavior」を「Redirect to home page」に設定します。

  5. Saveボタンをクリックします。

Configuring content tree-based routing

ホームページの表示

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

ページタイプのコード名は、一般設定タブで確認できます。

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

  2. Home (MEDIO Clinic) ページタイプを見つけ、Edit (✏️) をクリックします。全般タブが開きます。

Finding the page type code name

ホームビューモデルを作成する

ページタイプのコード名を確認したら、指定した場所に対応するビューファイルを作成する必要があります。ビューファイルを作成する際には、すべてのドットをアンダースコア('_')に置き換えてください。

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

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

    1. View name: MEDIO_Home

    2. Template: Empty

    3. Model: leave empty for now

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

ここで、Home(Medio Clinic)のページタイプに基づいたページの書式設定とデザインを提供する必要があります。

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

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

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

    システムはルーティング中にページからこのビューモデルにすべてのデータを渡します。 生成された Item ラッパークラスを汎用パラメータとして設定していることがわかります。これにより、ページタイプ（HomeText, HomeTextHeading, HomeHeader）のために先に指定したすべてのフィールドに、強くタイプされた方法でアクセスすることができます。すべてのフィールドは、Model.Page.Fieldsプロパティを介してアクセスすることができます。

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

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

  4. サイトの _Layout で定義されている）対応する Razor セクション内の Html.Kentico().PageBuilderStyles() と Html.Kentico().PageBuilderScripts を呼び出します。これらのメソッドは、ページビルダー機能に必要なスタイルシートやスクリプトへのリンクを表示します。

    
@section styles
{
    @* Includes stylesheets necessary for page builder functionality *@
    @Html.Kentico().PageBuilderStyles()
}
​
@section scripts
{
    @* Includes scripts necessary for page builder functionality *@
    @Html.Kentico().PageBuilderScripts()
}

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

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

  7. contentセクションで、以下の値を置き換えます。

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

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

  8. Html.Kentico().EditableArea拡張メソッドを、contentセクションの最初の<div>要素の中で、"editableArea "をパラメータとして呼び出してください。

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

    
@Html.Kentico().EditableArea("editableArea")

  9. 変更を保存します。

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


@using Kentico.PageBuilder.Web.Mvc
@using Kentico.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 *@
    @Html.Kentico().PageBuilderStyles()
}
@section scripts
{
    @* Includes scripts necessary for page builder functionality *@
    @Html.Kentico().PageBuilderScripts()
}
​
<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>
        @Html.Kentico().EditableArea("editableArea")
    </div>
    <div class="clearfix"></div>
</section>

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

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

ウェブサイトの URL (http://localhost/Xperience13_MEDIOClinic など) に移動すると、コンテンツツリーベースのルーティング機能の設定により、リクエストは ~/Home にリダイレクトされ、MEDIO_Home.cshtml ビューファイルを使用して表示されます。コントローラやモデルを書いたり、カスタムルートを登録したりする必要はありません。

The Medio Clinic's Home page on the live site

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

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

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

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 を自動的に解決しています。しかし、出力フィルタリングの要件を最小限に抑えるために、リッチ テキスト フィールドに対してResolveUrlsメソッドを呼び出すことをお勧めします。

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

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

    1. View name: MEDIO_MedicalCenter

    2. Template: Empty

  3. ビューコードでは、ViewBag.Titleの値をモデルのDocumentNameプロパティに設定します。

    
@{
    ViewBag.Title = Model.DocumentName;
}

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

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

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

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

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

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

  8. 変更を保存します。

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


@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] ボタンをクリックしてブラウザでページを表示することができます。ホームページの場合と同様に、コンテンツツリーベースのルーティングにより、http://localhost/Xperience13_MEDIOClinic/MedicalCenter にアクセスすると、ページの種類に基づいてページの正しいビューが表示されるようになります。

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

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

完成したページ： 10の8

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