ASP.NET Web ページの概要 - データの表示

作成者: Tom FitzMacken

このチュートリアルでは、WebMatrix でデータベースを作成する方法と、ASP.NET Web ページを使用するときにページにデータベース データを表示する方法について説明します (Razor)。 このシリーズの「ASP.NET Web ページ プログラミング概要」までを完了していることを前提としています。

ここでは、次の内容について学習します。

• WebMatrix ツールを使用してデータベースとデータベース テーブルを作成する方法。
• WebMatrix ツールを使用してデータベースにデータを追加する方法。
• データベースのデータをページに表示する方法。
• ASP.NET Web ページで SQL コマンドを実行する方法。
• WebGrid ヘルパーをカスタマイズしてデータの表示を変更し、ページングと並べ替えを追加する方法。

次の機能またはテクノロジを対象とします。

• WebMatrix データベース ツール。
• WebGrid ヘルパー。

作成するアプリケーション:

前のチュートリアルでは、ASP.NET Web ページ (.cshtml ファイル)、Razor 構文の基本、およびヘルパーについて説明しました。 このチュートリアルでは、シリーズの残りの部分で使用する実際の Web アプリケーションの作成を開始します。 このアプリは、映画に関する情報を表示、追加、変更、削除できるシンプルな映画アプリケーションです。

このチュートリアルを完了すると、次のページのような映画の一覧を表示できます。

ただし、まず、データベースを作成する必要があります。

データベースの概要

このチュートリアルでは、データベースの簡単な概要のみを説明します。 データベースに関する経験がある場合は、この短いセクションをスキップできます。

データベースには、顧客、注文、ベンダーのテーブル、学生、教師、クラス、成績などの情報を含む 1 つ以上のテーブルが含まれています。 構造的には、データベース テーブルはスプレッドシートのようなものです。 よくあるアドレス帳を想像してみてください。 アドレス帳の各エントリ、つまりそれぞれ 1 人の人について、名、姓、住所、電子メール アドレス、電話番号などのいくつかの情報があります。

(行は "レコード" とも呼ばれることがあります。また、列は "フィールド" とも呼ばれることがあります。)

ほとんどのデータベース テーブルでは、顧客番号やアカウント番号などの一意の値を含む列がテーブルに必要です。 この値はテーブルの "主キー" と呼ばれ、テーブル内の各行を識別するために使用します。 この例では、[ID] 列が前の例で示したアドレス帳の主キーです。

Web アプリケーションで行う作業の多くは、データベースから情報を読み取り、ページに表示することで構成されます。 また、多くの場合、ユーザーから情報を収集してデータベースに追加したり、データベースに既に存在するレコードを変更したりします。 (このチュートリアル セットでは、これらすべての操作について説明します。)

データベースの作業は非常に複雑で、専門的な知識が必要になる場合があります。 ただし、このチュートリアル セットでは、基本的な概念のみを理解すれば十分です。これらはすべて説明されています。

データベースの作成

WebMatrix には、データベースの作成とデータベース内のテーブルの作成を容易にするツールが含まれています。 (データベースの構造は、データベースの "スキーマ" と呼ばれます。)このチュートリアル セットでは、テーブルを 1 つだけ (Movies) 持つデータベースを作成します。

まだ開いていない場合は WebMatrix を開き、前のチュートリアルで作成した WebPagesMovies サイトを開きます。

左側のウィンドウで、[データベース] ワークスペースを クリックします。

リボンが変更され、データベース関連のタスクが表示されます。 リボンの [新しいデータベース] をクリックします。

WebMatrix は、サイト (WebPagesMovies.sdf) と同じ名前の SQL Server CE データベース (.sdf ファイル) を作成します。 (ここでは行いませんが、拡張子が .sdf である限り、ファイルの名前は任意の名前に変更できます。)

テーブルの作成

リボンの [新しいテーブル] をクリックします。 WebMatrix は、テーブル デザイナーを新しいタブで開きます。([新しいテーブル] オプションを使用できない場合は、左側のツリー ビューで新しいデータベースが選択されていることを確認してください。)

上部のテキスト ボックス (透かしに "テーブル名を入力" と表示されます) に、「Movies」と入力します。

テーブル名の下のペインは、個々の列を定義する場所です。 このチュートリアルの Movies テーブルでは、"ID"、"タイトル"、"ジャンル"、"年" といういくつかの列のみを作成します。

[名前] ボックスに「ID」と入力します。 ここに値を入力すると、新しい列のすべてのコントロールがアクティブになります。

タブ キーを押して [データ型] リストに移動し、[int] を選択します。この値は、[ID] 列に整数 (数値) データが含まれていることを指定します。

タブ キーを押して [既定値] ボックスを過ぎるまで移動します (つまり、これは空白のままにします)。 タブ キーを押して [主キー] に移動し、それを選択します。 このオプションは、[ID] 列に個々の行を識別するデータが含まれていることをデータベースに指示します。 (つまり、各行の [ID] 列には、その行を検索するために使用できる一意の値が含まれます。)

[ID] オプションを選択します。 このオプションは、新しい行ごとに連続する次の番号を自動的に生成するようにデータベースに指示します。 ([ID] オプションは、[主キー] オプションも選択されている場合にのみ機能します。)

次のグリッド行をクリックするか、タブ キーを 2 回押して現在の行を終了します。 いずれのジェスチャでも、現在の行が保存され、次の行が開始されます。 この時点で、[既定値] 列に「Null」が表示されたことに注目してください。 (言わば、Null は既定値の既定値なのです。)

新しい [ID] 列の定義が完了すると、デザイナーは次の図のようになります。

次の列を作成するには、[名前] 列のボックスをクリックします。 列に「タイトル」と入力し、[データ型] の値として [nvarchar] を選択 します。 nvarchar の "var" 部分は、この列のデータがレコードごとにサイズが異なる可能性がある文字列であることをデータベースに指示します。 ("n" プレフィックスは "national" を表します。これは、フィールドが任意のアルファベットや記述体系の文字データを保持できることを示します。つまり、このフィールドは Unicode データを保持します。)

nvarchar を選択すると、フィールドの最大長を入力できる別のボックスが表示されます。 このチュートリアルで使用する映画タイトルは 50 文字を超えないという前提で、「50」と入力します。

[既定値] をスキップし、[Null を許可] オプションをオフにします。 タイトルのない映画をデータベースに入力することを許可しないようにする必要があるからです。

完了して次の行に移動すると、デザイナーは次の図のようになります。

「ジャンル」という名前の列を作成するには、長さ以外について同じ手順を繰り返します。長さは 30 に設定します。

さらに、「年」という名前の列を作成します。データ型には、[nchar] (nvarchar ではなく) を選択し、長さは 4 に設定します。 年には、"1995" や "2010" のような 4 桁の数字を使用するため、可変サイズの列は必要ありません。

完成したデザインは次のようになります。

Ctrl キーを押しながら S キーを押すか、 クイック アクセス ツール バーの [保存] ボタンをクリックします。 タブを閉じて、データベース デザイナーを閉じます。

サンプル データの追加

このチュートリアル シリーズの後半では、フォームで新しい映画を入力できるページを作成します。 ただし、現時点では、ページに表示できるサンプル データを追加できます。

WebMatrix の [データベース] ワークスペースに、前に作成した .sdf ファイルを示すツリーがあることに注意してください。 新しい .sdf ファイルのノードを開き、[Tables] ノードを開きます。

[Movies] ノードを 右クリックし、[Data] を選択します。 WebMatrix によって、Movies テーブルのデータを入力できるグリッドが開きます。

[タイトル] 列をクリックし、「When Harry Met Sally」と入力します。 [ジャンル] 列に移動し (タブ キーを使用できます)、「ロマンティック コメディ」と入力します。 [年] 列に移動し、「1989」と入力します。

Enter キーを押すと、WebMatrix によってこの新しい映画が保存されます。 [ID] 列が 入力されていることに注意してください。

さらに別の映画 (例: "Gone with the Wind"、"Drama"、"1939") を入力します。 [ID] 列が再度入力されます。

3 番目の映画 (例えば、"Ghostbusters"、"Comedy" など) を入力します。 実験として、[年] 列を空白のままにして、Enter キーを押します。 [Null を許可] オプションをオフにしたため、データベースに次のエラーが表示されます。

[OK] をクリックして戻り、エントリを修正して ("Ghostbusters" の年は 1984 年) Enter キーを押します。

8 項目程度になるまで、いくつかの映画を入力します。 (8 項目入力すると、後でページングを簡単に操作できます。しかし、それが多すぎる場合は、今のところはいくつかだけ入力してください。)実際のデータ内容は重要ではありません。

エラーなしですべての映画を入力した場合、ID 値は連続した値になります。 不完全な映画レコードを保存しようとすると、ID 番号が連続していない可能性があります。 その場合でも問題ありません。 この数値には固有の意味はありません。重要なのは、Movies テーブル内で一意の値であるということです。

データベース デザイナーを含むタブを閉じます。

これで、このデータを Web ページに表示できるようになりました。

WebGrid ヘルパーを使用したページ内のデータの表示

ページにデータを表示するには、WebGrid ヘルパーを使用します。 このヘルパーは、グリッドまたはテーブル (行と列) に表示を生成します。 ご覧のように、書式設定やその他の機能を使用してグリッドを調整できます。

グリッドを実行するには、数行のコードを記述する必要があります。 これらの数行は、このチュートリアルで行うほぼすべてのデータ アクセスのための一種のパターンとして機能します。

WebMatrix の左側のウィンドウで、[ファイル] ワークスペースを クリックします。

作成した新しいデータベースは、App_Data フォルダーにあります。 フォルダーがまだ存在しない場合は、WebMatrix によって新しいデータベース用に作成されます。 (以前にヘルパーをインストールした場合は、フォルダーが存在している可能性があります。)

ツリー ビューで、Web サイトのルートを選択します。 Web サイトのルートを選択する必要があります。そうしないと、新しいファイルが App_Data フォルダーに追加される可能性があります。

リボンで、[新規] をクリックします。 [ファイルの種類の選択] ボックスで、[CSHTML] を選択します。

[名前] ボックスでは、新しいページに "Movies.cshtml" という名前を付けます。

[OK] をクリックします。 WebMatrix は、いくつかのスケルトン要素を含む新しいファイルを開きます。 まず、データベースからデータを取得するためのコードを記述します。 次に、ページにマークアップを追加して、実際にデータを表示します。

データ クエリ コードの記述

ページの上部にある @{ 文字と } 文字の間に、次のコードを入力します。 (必ず開き中かっこと閉じ中かっこの間にこのコードを入力してください。)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

最初の行は、前に作成したデータベースを開きます。これは常に、データベースで何かを行う前の最初の手順です。 Database.Open メソッドに、開くデータベースの名前を渡します。 この名前には .sdf が含 まれていないことに注意してください。 Open メソッドは、.sdf ファイル (つまり、WebPagesMovies.sdf) を検索 していること、およびその .sdf ファイルが App_Data フォルダーにあることを前提としています。 (先ほど、App_Data フォルダーは予約されていると述べました。このシナリオは、ASP.NET がこの名前に関して想定している点の 1 つです。)

データベースを開くと、データベースへの参照が dbという名前の変数に保存されます。 (名前は何でもかまいません。)db 変数は、最終的にデータベースとやり取りする方法です。

2 行目では、実際に Query メソッドを使用してデータベース データをフェッチします。 このコードのしくみに注目してください。 db 変数の値は開いたデータベースへの参照であり、この db 変数を使用して Query メソッドを呼び出します (db.Query)。

クエリ本体は SQL の Select ステートメントです。 (SQL に関する簡単な予備知識については、後の説明を参照してください。)このステートメントでは、Movies がクエリ対象のテーブルを特定しています。 * 文字は、クエリがテーブルからすべての列を返すように指定しています。 (列をコンマで区切って個別に並べて指定することもできます。)

クエリの結果 (存在する場合) が返されると、selectedData 変数で使用できるようになります。 この場合も、変数の名前は何でも構いません。

最後に、3 行目は、WebGrid ヘルパーのインスタンスを使用することを ASP.NET に示します。 new キーワードを使用してヘルパー オブジェクトを作成 ("インスタンス化") し、selectedData 変数を使用してクエリ結果を渡します。 新しい WebGrid オブジェクトとデータベース クエリの結果は、grid 変数で使用できるようになります。 この結果は、この後すぐに実際にページにデータを表示するために必要になります。

この段階では、データベースを開き、必要なデータを取得し、そのデータを使用して WebGrid ヘルパーを準備できました。 次に、ページにマークアップを作成します。

データを表示するためのマークアップの追加

<head> 要素内で、<title> 要素の内容を "Movies" に設定します。

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

ページの <body> 要素内に、次のコードを追加します。

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

これで終了です。 grid 変数は、前のコードで WebGrid オブジェクトを作成したときに作成した値です。

WebMatrix ツリー ビューで、ページを右クリックし、[ブラウザーで起動] を選択します。 次のようなページが表示されます。

列見出しのリンクをクリックして、その列で並べ替えます。 見出しをクリックして並べ替えることができるのは、WebGrid ヘルパーに組み込まれている機能です。

GetHtml メソッドは、その名前が示すように、データを表示するマークアップを生成します。 既定では、GetHtml メソッドは HTML <table> 要素を生成します。 (必要に応じて、ブラウザーでページのソースを表示してレンダリングを確認できます。)

グリッドの外観を変更する

今行ったように WebGrid ヘルパーを使用するのは簡単ですが、この結果の表示されるものはシンプルです。 WebGrid ヘルパーには、データの表示方法を制御できるあらゆる種類のオプションがあります。 このチュートリアルで色々試すにははるかに多すぎまるのですが、このセクションでは、これらのオプションの一部について説明します。 さらにいくつかの追加オプションについては、このシリーズの後のチュートリアルで説明します。

表示する個々の列の指定

まず手始めとして、特定の列のみを表示するように指定できます。 既定では、ご覧のように、グリッドには Movies テーブルの 4 つの列がすべて表示されます。

Movies.cshtml ファイルで、追加した @grid.GetHtml() マークアップを次に置き換えます。

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

表示する列をヘルパーに指示するには、GetHtml メソッドに columns パラメーターを含め、列のコレクションを渡します。 コレクションでは、含める各列を指定します。 grid.Column オブジェクトを含め、目的のデータ列の名前を渡すことで表示する個々の列を指定します。 (これらの列は SQL クエリの結果に含まれている必要があります。WebGrid ヘルパーは、クエリによって返されなかった列を表示することはできません。)

ブラウザーで Movies.cshtml ページをもう一度起動すると、次のような画面が表示されます ([ID] 列が表示されていないことに注目してください)。

グリッドの外観を変更する

列を表示するためのオプションは他にもいくつかあります。その一部については、このセットの後のチュートリアルで説明します。 まずこのセクションでは、グリッド全体のスタイルを設定する方法について説明します。

ページの <head> セクション内で、閉じ </head> タグの直前に、次の <style> 要素を追加します。

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

この CSS マークアップは、grid、headなどの名前のクラスを定義します。 また、これらのスタイル定義を別の .css ファイルに配置し、このページにリンクすることもできます。 (これは、このチュートリアル セットの後半で実際に行います。)ただし、このチュートリアルを簡単にするために、データを表示するのと同じページ内に置きます。

これで、WebGrid ヘルパーでこれらのスタイル クラスを使用できるようになりました。 このヘルパーには、この目的のためだけにに多数のプロパティ (tableStyle など) があります。それらに CSS スタイル クラス名を割り当てると、そのクラス名はヘルパーによってレンダリングされるマークアップの一部としてレンダリングされます。

次のコードのように grid.GetHtml マークアップを変更します。

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

ここでの違いは、GetHtmlメソッドに tableStyle、headerStyle、および alternatingRowStyle パラメーターを追加したことです。 これらのパラメーターは、少し前に追加した CSS スタイルの名前に設定されています。

ページを実行すると、今度は以前よりもずいぶん手の込んだグリッドが表示されます。

GetHtml メソッドによって生成された内容を確認するには、ブラウザーでページのソースを表示します。 ここでは詳しく説明しませんが、重要な点は、tableStyle などのパラメーターを指定することで、グリッドにより次のような HTML タグを生成されるということです。

<table class="grid">

<table> タグには、先ほど追加した CSS 規則のいずれかを参照する class 属性が追加されています。 このコードは、基本的なパターンを示しています。GetHtml メソッドのさまざまなパラメーターにより、メソッドがマークアップと共に生成する CSS クラスを参照できます。 CSS クラスを使用して何を行うかは、ユーザー次第です。

ページングの追加

このチュートリアルの最後のタスクとして、グリッドにページングを追加します。 現時点では、すべての映画を一度に表示しても問題ありません。 しかし、何百もの映画を追加した場合、ページの表示は長くなるでしょう。

ページ コードで、WebGrid オブジェクトを作成する行を次のコードに変更します。

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

前との唯一の違いは、rowsPerPage パラメーターを追加し 3 に設定したことです。

このページを実行します。 グリッドには、一度に 3 行が表示され、さらにデータベース内の映画をページングできるナビゲーション リンクが表示されます。

この後の内容

次のチュートリアルでは、Razor と C# コードを使用してフォームでユーザー入力を取得する方法について説明します。 [映画] ページに検索ボックスを追加して、タイトルまたはジャンル別に映画を検索できるようにします。

[映画の完全な一覧] ページ

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

その他のリソース

• Razor 構文を使用した ASP.NET Web プログラミングの概要