RSS 2.0
[Sitecore Rocks]Sitecore MVC を使ってページを作成する その1 ASP.NET MVCのページビュー(cshtml)を使用するレイアウトの作成で、 ページビュー(cshtml)を使用するレイアウトコンポーネントを作成しました。今回は作成した MainViewレイアウトの上に静的もしくは動的バインド可能な Viewレンダリングを作成してみます。Viewレンダリングの実体は ASP.NET MVC 4 の パーシャルページ(cshtml)になります。ASP.NET Web フォームでレイアウトを作成した場合のサブレイアウト(ユーザーコントロール)に対応するプレゼンテーションコンポーネントになります。
検証結果は次の通りです
- Sitecore 7.1 がローカルにインストールされた環境
- Visual Studio 2012 Ultimate
- Sitecore Rocks 1.1.0
1. Viewレンダリングの作成
パーシャルビューを作成してから、Viewレンダリングの定義アイテムに後から関連付けることもできますが、今回は Sitecore Rocks をインストール時に作成されるテンプレートを使用してcshtmlとViewレンダリングの定義アイテムを同時に作成してみます。
今回は前回と同じく View/Layouts フォルダ配下に cshtml ファイルを作成することにします。Layouts フォルダーを右クリック→追加→新しい項目 をクリックします。
新しい項目の追加ダイアログでカテゴリの Sitecore/MVC を選択します。 MVC Partial Page with Razor syntax (.cshtml) テンプレートを選択して パーシャルページを作成します。部分ページの名前は本例では PartialView1 としました。
追加ボタンをクリックすると今度はアイテムの作成場所が聞かれるので、 Renderings アイテム配下に作成します。親のアイテムを選択して OK ボタンをクリックします。
ファイルと定義アイテムが作成されます。作成される 部分ページ cshtml のひな形は下図のようになります。
Viewレンダリングの定義アイテムはファイルと同じ名前で作成されます(下図参照)。Pathフィールドに 部分ページ (cshtml) へのパスが設定されています。
PartialView1.cshtml の実装は次のように編集しました。Homeアイテムの Text フィールドをレンダリングするマークアップを記述しています。
@using Sitecore.Mvc.Presentation
@using Sitecore.Mvc
@model RenderingModel
<div>
@Html.Sitecore().Field("Text")
</div>
MainViewレイアウト定義アイテムの実体である MainView.cshtml の body タグを次のように変更します。Viewレンダリングを静的にバインドするために、 ViewRendering メソッドを使用して Viewレンダリングをレンダリングするようにしています。
<div>
<h1>Item name is @Model.Item.Name</h1>
<div>
<div>
インライン編集サポート<br />
@Html.Sitecore().Field("Title")
<br />
</div>
@Html.Sitecore().ViewRendering("/Views/Layouts/PartialView1.cshtml")
</div>
</div>
ビルドしてエラーが発生しないことを確認し、プロジェクトを発行します。
ページエディターでホームアイテムを表示すると、下図のように Viewレンダリングがレンダリングされます。RichText 型のTextフィールドをインライン編集できるようになっています。
今度は作成した PartialView1 をMainViewに動的にバインドしてみます。動的なバインドを行うためには ASP.NET Web Formを使用する場合と同じように プレースホルダーを使用します。MainViewのbodyタグを次のように編集しました。Placeholderメソッドを使用して "content"という名前のプレースホルダーを配置します。
<div>
<h1>Item name is @Model.Item.Name</h1>
<div>
<div>
インライン編集サポート<br />
@Html.Sitecore().Field("Title")
<br />
</div>
@Html.Sitecore().Placeholder("content");
</div>
</div>
プレースホルダーの配置は終わったので、動的バインドを設定します。 Home アイテムのレイアウト詳細を表示します。Sitecore Explorer 上のHomeアイテムをクリックしてCtrl + U を入力します。 下図のようなレイアウト詳細画面が表示されます。Renderings and Place Holders にサブレイアウトやXSLTレンダリングが設定されている場合は削除してください。
左上の Add Rendering をクリックして PartialView1 を動的バインドするレンダリングの一覧に追加します。
一覧に追加された PartialView1 を選択して、プロパティ画面の PlaceholderKey プロパティに バインドするプレースホルダーの名前 content を下図のように入力します。
Ctrl-S を入力して変更を保存します。
これで準備ができました。
動作確認をする前に忘れずにソリューションをビルドしてSitecoreのWebsiteフォルダ配下にプロジェクトを発行してデプロイしてください。
Homeアイテムをページエディターで表示すると下図のように PartialView1 Viewレンダリングが動的にバインドされて表示されます。デザイン変更にチェックをすると PartialView1を選択すると プレゼンテーションコンポーネントようのツールバーが表示されるようになることが確認できます。
2.まとめ
説明は以上です。Sitecore MVCのViewレンダリングを使用することで動的なバインドを行うことができるプレゼンテーションコンポーネントを作成できるようになります。Viewレンダリングの実体は ASP.NET MVC4 の パーシャルページ(cshtml) となります。
そのほか、 Sitecore MVC の詳細情報については SDNのサイトを参照してください。