データのグリッド表示を行うサンプルの作成
それでは次に、SQL Server Compact Editionのデータベースファイルを作成し、データ内容をグリッド表示するように、Webサイトを修正してみましょう（図18）。
以下の手順で、サンプルを作成します。
［1］Booksテーブルを作成する
画面左下の［Databases］をクリックし、［Databases］ワークスペースに表示を切り替えます。左側の一覧で、自動生成された［StarterSite.sdf］データベースファイルを展開し［Tables］をクリックします。次に、［Home］タブ内の［New Table］ボタンをクリックします。すると、テーブル作成画面が表示されます。［Table］タブ内の［New Column］ボタンをクリックし、テーブル列を定義します。表5を参考にして、［ID］、［Name］、［Description］の3つの列を定義してください（図19）。
| Column Name | Allow Nulls | Data Type | Default Value | Is Identity? | Is Primary Key? | Length |
| ID | False | int | True | True | ||
| Name | False | nvarchar | False | False | 100 | |
| Description | True | nvarchar | False | False | 500 |
最後に、「Books」という名前でテーブルを保存します（図20）。
左側の一覧で、作成された［Books］テーブルをダブルクリックします。すると、データ入力画面が表示されます。サンプルデータを数件入力します（図21）。
［2］Books.cshtmlを追加する
手順1.で作成したBooksテーブルのデータをグリット表示するページを作成します。
画面左下の［Files］をクリックし、［Files］ワークスペースに表示を切り替えます。左側の一覧で［WebMatrixSample］フォルダーをクリックし、［Home］タブ内の［New］ボタンをクリックします。表示された［Choose a File Type］ダイアログボックスで、［CSHTML］をクリックして［Name］ボックスに「Books.cshtml」と入力し、［OK］ボタンをクリックします（図22）。
［3］Books.cshtmlを修正する
手順2.で作成したBooks.cshtmlを、リスト2のように書き換えます。
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Booksテーブル";
var db = Database.Open("StarterSite");
var grid = new WebGrid(db.Query("SELECT * FROM Books ORDER BY ID"));
}
<p>
@grid.GetHtml()
</p>
Razor記法である@{}ブロック内では、Default.cshtmlと同じ最初の2行に加えて、続く部分でデータベース処理を行っています。
Database.Open("StarterSite")により、StarterSite.sdfデータベースをオープンします。Database.Open()は、渡された文字列がWeb.configで接続文字列として設定されているなら、まずその接続文字列を使用してデータベースをオープンします。存在しない場合は、［App_Data］フォルダー内に文字列と同名の.mdfまたは.sdfデータベースファイルがあるかを調べ、存在するならデータベースファイルをオープンします。
次に、db.Query()によりBooksテーブルから全データを取得するクエリを作成し、このクエリをWebGridヘルパーに渡しています。WebGridヘルパーのgrid.GetHtml()は、渡されたデータを<table>タグでレンダリングします。
［4］_SiteLayout.cshtmlを修正する
_SiteLayout.cshtmlは、レイアウトページと呼ばれるもので、Webサイト全体のレイアウトをここに記述します。機能としては今までのマスターページと似ていますが、マスターページとは異なるRazorで導入された新しい仕組みです。
リスト3は、自動生成された_SiteLayout.cshtmlの一部です。
<div id="content">
<h1>@Page.Title</h1>
@RenderBody()
</div>
RenderBody()ヘルパーメソッドにより、このページをレイアウトページとして指定しているページの内容がレンダリングされます。
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Welcome to WebMatrixSample";
}
リスト4にあるように、自動生成されたDefault.cshtmlの中では、Layoutヘルパーにより、_SiteLayout.cshtmlをレイアウトページとして設定しています。
_SiteLayout.cshtmlにメニュー項目を1つ追加します。リスト5のように修正します（太字部分）。
<ul id="menu">
<li><a href="@Href("~/")">Home</a></li>
<li><a href="@Href("~/Books")">Books</a></li>
<li><a href="@Href("~/About")">About</a></li>
</ul>
Hrefヘルパーを使用して、作成したBooks.cshtmlへのリンクを作成します。
以上で、データのグリッド表示を行うサンプルは完成です。
サンプルの実行
作成したサンプルを実行してみましょう。先ほどと同様に、左側の一覧で［WebMatrixSample］フォルダーをクリックし、［Home］タブ内の［Run］ボタンをクリックします。すると、ブラウザーが起動し、作成したWebサイトのトップページが表示されます。
次に［Books］タブをクリックします。すると、先ほどの図18のように、Booksテーブルのデータがグリッド表示されたページが表示されます。列名のリンクをクリックすることにより、データを並び替えることができます。
