ステップ 7 ハンズオン :
ASP.NET 2.0 リッチ データ コントロールによるデータ アクセス ページの実装 その 1

GridView コントロールの利用

グローバル ナレッジ ネットワーク株式会社
ナレッジ ソリューション本部 鈴木和久

最終更新日 2005 年 10 月 21 日

GridView コントロールの利用

ここでは、ASP.NET 2.0 GridView コントロールを使用して、データベースのデータを参照するページを作成します。ドロップダウンリストから商品区分を選択したら、これに対応する商品情報をGridViewに表示します。

DropDownListコントロールの設定を行い、このコントロールから選択した項目に対応するデータを GridView に表示するための準備を行います。

データを表示するための Web フォームをデザイン ビューで表示し、[レイアウト] － [テーブルの挿入]から2行2列のテーブルを配置し、1行1列目のセルにツールボックスの標準タブからDropDownListコントロールを配置します。

DropDownList タスク メニューで [AutoPostBack を有効にする] にチェックし、データソースの選択をします。
AutoPostBack を有効にすることで、DropDownList の項目が選択されたタイミングで、選択項目がサーバーへポストバックされます。

データソース構成ウィザード画面で <新しいデータソース>を選択し、アプリケーションがデータを取得する場所を [データベース] に指定します。データソースのIDはデフォルトのまま SqlDataSource1とします。

新しいデータ接続からデータベースへの接続を定義します。
この例では、SQL Server の Northwind データベースを指定しています。

接続をアプリケーション構成ファイルへ保存し、[商品区分]テーブルの [区分コード] と [区分名] を指定します。

DropDownList の項目名として表示する列を [区分名]、DropDownList の項目を選択した際に使用されるデータ列を [区分コード] として定義します。

DropDownList から選択された項目に対応する商品データを表示するめに、2 行 1 列目のテーブル セルにツール ボックスのデータ タブから GridView コントロールを配置します。

その後、GridView タスク メニューのデータソースの選択から <新しいデータソース>を指定し、アプリケーションがデータを取得する場所を [データベース]とし、データソースのIDをデフォルトのSqlDataSource2とします。

データ接続の選択から、定義済みの Northwind への接続を選びます。
次に、GridView の表示するデータとして、商品テーブルの[商品コード]、[商品名]、[単価] 列を指定します。

DropDownList から選択した区分コードに対応するデータを表示するために、[WHERE] ボタンをクリックし、WHERE 句の追加 ダイアログから [区分コード]列 を選択し、ソースとして Control を選択します。
WHERE 条件を与えるコントロールは DropDownList となるので、パラメータのプロパティのコントロール一覧から DropDownList を選択し、追加ボタンをクリックします。

その後、完了ボタンをクリックして GridView の基本設定が完了します。

GridView タスク メニューで [ページングを有効にする]にチェックし、GridView コントロールのプロパティ ウィンドウの PageSize をプロパティの値をデフォルトの 10 から 5 へと変更します。

GridView タスク メニューから [列の編集]を選択し、選択されたフィールドから[単価] フィールドを指定し、BoundField プロパティ の DataFormatString に対して、 {0:C} を定義します。
この設定により GriｄView の [単価] 列のデータは通貨記号が表示されるようになります。

GridView タスク メニューから [選択を有効にする] にチェックすると、GridView には選択用のリンク ラベルが表示されます。
これをボタンに変更するには、GridView タスク メニューの [列の編集] を選択し、選択されたフィールド 一覧から [選択] を指定して、CommandFieldプロパティの ButtonType を Link から Button に変更します。

GridView コントロールのプロパティ ウィンドウの SelectedRowStyle の BackColor を定義すると、選択された行の背景が変化し、選択項目がわかりやすくなります。

GridView から選択した商品の詳細なデータの操作は、その 2 の DetailView の使用方法で紹介します。

以上で、DropDownList で選択した商品区分に対応した商品の一覧が、GridView コントロールから表示されるようになります。