WebMatrixで簡単にWebサイトを構築してみよう

WebMatrix入門

データのグリッド表示を行うサンプルの作成

　それでは次に、SQL Server Compact Editionのデータベースファイルを作成し、データ内容をグリッド表示するように、Webサイトを修正してみましょう（図18）。

図18 サンプルWebサイトのデータグリッド表示ページ

　以下の手順で、サンプルを作成します。

［1］Booksテーブルを作成する

　画面左下の［Databases］をクリックし、［Databases］ワークスペースに表示を切り替えます。左側の一覧で、自動生成された［StarterSite.sdf］データベースファイルを展開し［Tables］をクリックします。次に、［Home］タブ内の［New Table］ボタンをクリックします。すると、テーブル作成画面が表示されます。［Table］タブ内の［New Column］ボタンをクリックし、テーブル列を定義します。表5を参考にして、［ID］、［Name］、［Description］の3つの列を定義してください（図19）。

図19 テーブル作成画面

表5 Booksテーブルの定義

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）。

図20 Booksテーブルの保存

　左側の一覧で、作成された［Books］テーブルをダブルクリックします。すると、データ入力画面が表示されます。サンプルデータを数件入力します（図21）。

図21 Booksテーブルのデータ入力

［2］Books.cshtmlを追加する

　手順1.で作成したBooksテーブルのデータをグリット表示するページを作成します。

　画面左下の［Files］をクリックし、［Files］ワークスペースに表示を切り替えます。左側の一覧で［WebMatrixSample］フォルダーをクリックし、［Home］タブ内の［New］ボタンをクリックします。表示された［Choose a File Type］ダイアログボックスで、［CSHTML］をクリックして［Name］ボックスに「Books.cshtml」と入力し、［OK］ボタンをクリックします（図22）。

図22 ［Choose a File Type］ダイアログボックス

［3］Books.cshtmlを修正する

　手順2.で作成したBooks.cshtmlを、リスト2のように書き換えます。

リスト2 Books.cshtmlの修正

@{  
    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の一部です。

リスト3 _SiteLayout.cshtmlの一部

<div id="content">
    <h1>@Page.Title</h1>
    @RenderBody()
</div>

　RenderBody()ヘルパーメソッドにより、このページをレイアウトページとして指定しているページの内容がレンダリングされます。

リスト4 Default.cshtmlの一部

@{  
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Welcome to WebMatrixSample";
}

　リスト4にあるように、自動生成されたDefault.cshtmlの中では、Layoutヘルパーにより、_SiteLayout.cshtmlをレイアウトページとして設定しています。

　_SiteLayout.cshtmlにメニュー項目を1つ追加します。リスト5のように修正します（太字部分）。

リスト5 _SiteLayout.cshtmlの修正

<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テーブルのデータがグリッド表示されたページが表示されます。列名のリンクをクリックすることにより、データを並び替えることができます。