RSS 2.0
Sitecore MVC を使用してページをレンダリングするレイアウトを作成してみます。Sitecore MVCの場合、レイアウトの実態は ASP.NET MVC の ページビュー (cshtml) になります。本記事では Sitecore Rocks がインストールされた Visual Studio を使用してcshtmlを実態として持つレイアウトを作成する方法をご紹介します。別の記事でSitecore MVC の レイアウト上に動的バインドを行うための View Rendering というプレゼンテーションコンポーネントを作成してみます。View Rendering はWeb Form(aspx)でレイアウトの実装した場合のサブレイアウト(ユーザーコントロール ascx)に対応するプレゼンテーションコンポーネントです。View Rendering の実態は ASP.NET MVCのPartial View (cshtml) になります。
検証環境は次の通りになります
- Sitecore 7.1 がローカルにインストールされた環境
- Visual Studio 2012 Ultimate
- Sitecore Rocks 1.1.0
前提条件として、[Sitecore Rocks]ASP.NET MVC 4 Web アプリケーションプロジェクトをセットアップするで紹介した手順などにしたがって Sitecore MVC アプリケーションを作成するためにプロジェクトがセットアップされていることとします。
1. MVC4プロジェクトを サイトコアに接続する
ASP.NET MVC4 プロジェクトが Sitecore に接続されていない場合は、接続を行ってください。プロジェクトを右クリック→Sitecore→Connect to Sitecore Explorer Connection をクリックします。
Sitecore が非アクティブの場合は、[Sitecore Rocks]サイトコアインスタンスに接続するを参照するなどしてSitecore インスタンスへの接続をセットアップしてください。
Select Connection ダイアログが表示されたら、プロジェクトと関連付ける Sitecore インスタンスを選択してください。
2. MVC ビュー ページ(cshtml) の作成
まず、レイアウト定義アイテムの実態となる MVC 4 ビューページ (cshtml)を作成します。今回は、 既定で作成される Views フォルダ配下に Layouts というフォルダを作成し、その配下に cshtml ファイルを作成していくことにします。Viewsフォルダ直下のWeb.configファイルは Razorを使用するためにMVCプロジェクトで既定で作成されるWeb.configですのでそのままにしておく必要があります。
ソリューションエクスプローラー上で Views フォルダー配下に下図のような Layouts フォルダーを作成します。
Layouts フォルダーを右クリック→追加→新しい項目 をクリックします。
新しい項目の追加ダイアログで 下図のように MVC 4 のカテゴリーから MVC 4 ビュー ページ (Razor) というファイルのテンプレートを作成してファイルを作成します。今回はMainView.cshtml という名前で ビューページファイルを作成することにします。
作成した MainView.cshtml をたとえば次のように編集します。
@using Sitecore.Mvc.Presentation
@using Sitecore.Mvc
@model RenderingModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@Model.Item.Name</title>
</head>
<body>
<div>
<h1>Item name is @Model.Item.Name</h1>
<div>
<div>
インライン編集サポート<br />
@Html.Sitecore().Field("Title")
<br />
</div>
<div>
フィールドの値をそのまま出力
@Model.Item.Fields["Text"]
<br />
</div>
</div>
</div>
</body>
</html>
cshtml はサンプルです。簡単に説明すると @Html.Sitecore().Field メソッドを使用することで ページコンテキストをサポートする html を出力することができるようになります。@Model.Item.Fields[] を使用すると カレントコンテキストのアイテムのフィールドの RAW値 が出力されます。
いまは単純に ASP.NET MVC 4 の ビューページ(cshtml) を作成した状態なので、 レイアウトの定義アイテムを作成して関連付けを行う必要があります。
Sitecore Explorer からレイアウトの定義アイテムを作成する親のアイテムを選択します。今回は Layouts アイテム直下にレイアウトの定義アイテムを作成することにします。Layouts アアイテムを右クリック→Add→New Item... をクリックします。
Add New Item ダイアログが表示されます。 Layout という名前でテンプレートを検索して ベーステンプレートにLayoutを選択し、アイテム名を cshtmlファイルと同じ名前MainViewで作成します。
作成した MainView レイアウト定義アイテムの Path フィールドに下図のように 作成した View Page (cshtml) へのパスを入力してください。これでレイアウト定義アイテムと実態の cshtml との関連付けを行うことができました。忘れずに保存(Ctrl - s) してください。
以上でSitecore MVC を使用する レイアウトの作成は完了です。
3.レイアウト詳細を設定する
レイアウトを作成したので、実際にページをレンダリングしてみましょう。今回は Homeアイテムのレイアウト詳細を直接編集します。下図のように Homeアイテムを選択して Ctrl + Shift + U を入力して レイアウト詳細画面を表示します。
デフォルトで設定されている サブレイアウトやレンダリングの一覧を削除します。 Layout には下図のように先ほど作成した レイアウトの定義アイテム(MainView)を選択してください。
レイアウト詳細の変更を保存(Ctrl - s) します。
4.動作確認
ページエディターで動作確認をする前に、ソリューションをデプロイする必要があります。ASP.NET MVC 4 プロジェクトを右クリック→発行 を選択してソリューションをSitecoreにデプロイします。
ページエディターで Home アイテムを表示してみます。Fieldメソッドを使用してフィールドをレンダリングしている部分は下図のようにインライン編集がサポートされる html が出力されていることがわかります。
簡単ですが、 cshtml を使用する レイアウトの作成までを行いました。次回は ビューページ (cshtml) 上で動的バインドを配置するためのView レンダリングを作成する方法を紹介します。View レンダリングは ASP.NET Web フォームでレイアウトを作成した場合に動的バインドに配置可能な サブレイアウト(ascx) に対応するプレゼンテーションコンポーネントになります。
5.まとめ
説明は以上です。Sitecore MVC といっても ビュー定義自体は ASP.NET MVC4 のビュー定義と変わりません。異なるのは Controller や Model を定義する必要がないということです。モデルを定義しない場合は、モデルはRenderingModel クラスのインスタンスになります。コントローラーはSitecore MVC既定のコントローラーが使用されます。
Sitecore MVC は ASP.NET MVC 4 を拡張したものなので、ルーティングの設定をすることで通常のASP.NET MVC 4 のページを Sitecore で管理されるサイトに配置したり、Web フォームを共存させることができるということを覚えておいてください。
そのほか、 Sitecore MVC の詳細情報については SDNのサイトを参照してください。