データのグリッド表示を行うサンプルを作成してみよう
それでは実際にWebMatrixを使用して、Webサイトを作成してみましょう。
Razorのヘルパーを使用したサンプルの作成
［Starter Site］テンプレートを使用して、新たにWebサイトを作成します。そして、作成したWebサイト上に、Razorのヘルパーを使用してBingやTwitterの部品を配置してみましょう（図9）。
以下の手順で、サンプルを作成します。
［1］［Starter Site］テンプレートを選択し、新しいWebサイトを作成する
WebMatrixを起動し、スタートページから［Site From Template］をクリックします。表示された［Site from Template］ページで、［Starter Site］をクリックして［Site Name］ボックスに「WebMatrixSample」と入力し、［OK］ボタンをクリックします（図10）。すると、新しいWebサイトが作成されます（図11）。
［2］Razorのヘルパーを使用可能にする
［Starter Site］テンプレートや［Empty Site］テンプレートを選択してWebサイトを作成した場合、既定ではRazorのヘルパーは使用可能とはなっていません。それで、ヘルパーを使用できるように設定します。
画面上部の［Home］タブ内の［Run］ボタンをクリックします。すると、ブラウザーが起動し、作成されたWebサイトが表示されます。アドレスバーのURLを次のように変更し（ポート番号は環境によって異なる）、Enterキーを押します。
http://localhost:8080/_Admin
すると、作成したWebサイトの管理者用ページが表示されます。初回は管理者用パスワードの入力が求められますので、パスワードを入力し［Create Password］ボタンをクリックします（図12）。
すると、［Packages］ページが表示されます。［Install packages from an online feed］リンクをクリックします（図13）。
すると、オンラインでインストール可能なヘルパーのパッケージ一覧が表示されます。本稿執筆時点でインストール可能なパッケージについて、表4にまとめてみます。
| パッケージ | 説明 |
| BBCode | 軽量マークアップ言語BBコード用ヘルパー |
| Facebook.Helper | Facebookの種々のウィジェットを提供するヘルパー |
| microsoft-web-helpers | マイクロソフトが提供する種々のヘルパーを収めたパッケージ（サンプルでも使用） |
| OData.Helper | ODataクエリの発行機能を提供するヘルパー |
| PayPal.Helper | PayPal機能を提供するヘルパー |
| QuickEdit.Helper | HTMLエディタ機能を提供するヘルパー |
| RazorDebugger | Razor用デバッガ機能を提供 |
| Twitter.Helper | Twitterの種々のウィジェットを提供するヘルパー |
| UrlShortener | 短縮URL機能を提供するヘルパー |
| WindowsAzureStorage.Helper | Windows Azureストレージ用ヘルパー |
パッケージ一覧から［microsoft-web-helpers 1.0］を見つけ、右側の［Install］ボタンをクリックします（図14）。
すると、microsoft-web-helpers 1.0のインストールページが表示されます。［Install］ボタンをクリックします（図15）。
すると、インストール成功と表示されます（図16）。
ブラウザーを終了して、WebMatrixに戻ります。画面左下の［Files］をクリックし、［Files］ワークスペースに表示を切り替えます。すると、左側のファイル一覧に、新規作成時には存在していなかった［bin］フォルダーとその中にMicrosoft.Web.Helpers.dllが新たに追加されていることが確認できます（図17）。これで、Razorのヘルパーが使用可能となりました。
［3］Default.cshtmlを修正する
左側のファイル一覧から、［Default.cshtml］をダブルクリックして表示し、リスト1のように修正します（太字部分）。
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Welcome to WebMatrixSample";
}
<p>
ASP.NET Web Pages make it easy to build powerful .NET based applications for the web.
</p>
<p>
@Bing.SearchBox()
</p>
<p>
@Twitter.Search("webmatrix")
</p>
まず、Page.Titleの値を修正することにより、見出しの表示内容を変更しています。後ほど説明する、_SiteLayout.cshtmlの<h1>タグ内に、このPage.Titleが埋め込まれています。
次に、インストールしたヘルパーで提供されている機能を試してみます。Bing.SearchBox()と記述するだけで、Bingの検索ボックスが表示されます。さらに、Twitter.Search("webmatrix")により、指定された「webmatrix」についてのTwitter上の最新のツイートがパネルで表示されます。このように、BingやTwitterなどの各種ヘルパーを使用すると、簡単にWebの様々な機能が実現できることが理解できるでしょう。
以上で、Razorのヘルパーを使用したサンプルは完成です。
サンプルの実行
作成したサンプルを実行してみましょう。作成したWebサイトは、自動で実行されるIIS Developer Express上で動作します。
左側の一覧で［WebMatrixSample］フォルダーをクリックし、［Home］タブ内の［Run］ボタンをクリックします。すると、ブラウザーが起動し、作成したWebサイトのトップページが表示されます。先ほどの図9のように、タイトルや見出しの表示内容が「Welcome to WebMatrixSample」に変更されていることや、Bingの検索ボックスおよびTwitterのツイート表示パネルが表示されていることが確認できるでしょう。
