GridViewコントロールを使ってデータベースと接続する
今回は、GridViewコントロールを使ってデータベースに接続し、画面にデータ一覧を表示するプログラムを作成します。
このプログラムでは、マスターページ内にデータベースの内容を表示するWebフォームを作成します。
マスターページやWebフォームを作成する手順は、こちらの記事を参照してください。
また、GridViewコントロールの詳しい内容は、以下のマイクロソフトの公式サイトを参照してください。
新しいプロジェクトの作成
新規にプロジェクトを作成します。
今回のサンプルプログラムは、プロジェクト名を「SmpWebForm3」として作成します。
データベースの作成
データベースを作成します。
今回使用するデータベースの仕様は、以下の通りです。
| データベース名 | TestDb |
| テーブル名 | Emp |
| カラム名 | 型 | その他 |
|---|---|---|
| Id | Int | プライマリーキー |
| Name | nchar(20) | |
| Age | tinyint |
テーブルを作成したら、データを10件くらい登録してください。
なお、データベースの作成方法は、こちらの記事を参照してください。
Webフォームのマスターページの作成
Webフォームのマスターページを作成します。
マスターページ名は、「SmpSite.Master」とします。
Webフォームの作成と編集
ソリューションエクスプローラーからWebフォームを「WebForm1」として作成します。
ツールボックスから「データ」→「GridView」を選択し、ドラッグアンドドロップで作成したWebフォームに貼り付けます。
以下のようなコードが作成されます。
|
1 2 3 4 5 6 |
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/SmpSite.Master" CodeBehind="WebForm1.aspx.vb" Inherits="SmpWebForm3.WebForm1" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <asp:GridView ID="GridView1" runat="server"></asp:GridView> </asp:Content> |
データベースとの接続
作成したWebフォーム(WebForm1.aspx)の左下にある「デザイン」をクリックして、デザイン画面を表示します。
赤枠の部分をクリックすると、データソースを設定するための画面がポップアップします。
「データソースの選択」で、「新しいデータソース…」を選択します。
「データソース構成ウィザード」画面が表示されるので、「データベース」を選択し、適当なID名(例では「TestDbSource」)を入力して「OK」ボタンを押下します。
データソースが作成されます。
ここでページングや並べ替え機能を有効にすることができます。
(上手くデータソースが表示されない場合は、一旦他のタグに切り替えるなどしてください)
データソースとデータベースを紐づけるために、「データソースの構成…」を選択します。
「データソースの構成」画面が表示されるので、作成したデータベースを選択して、「次へ」ボタンを押下します。
接続の情報をConnectionStringという名前でファイル(Web.config)に保存します。
一覧表示する時のSelect文を設定します。
ここで、GridViewで表示するカラムや検索条件、ソート順などを指定します。
クエリのテストを行います。
「クエリのテスト」ボタンを押下すると、テーブルに登録されているデータの一覧が表示されます。
「完了」ボタンを押下して、「データソースの構成」を終了します。
これで、GridViewの設定は完了です。
「ページングを有効にする」をチェックした場合は、プロパティの「PageSize」で表示するレコード数を変更することができます(デフォルトは10)。
以下のようなコードが作成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/SmpSite.Master" CodeBehind="WebForm1.aspx.vb" Inherits="SmpWebForm3.WebForm1" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" DataSourceID="TestDbSource" AutoGenerateColumns="False" DataKeyNames="Id" PageSize="5"> <Columns> <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id"></asp:BoundField> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name"></asp:BoundField> <asp:BoundField DataField="Age" HeaderText="Age" SortExpression="Age"></asp:BoundField> </Columns> </asp:GridView> <asp:SqlDataSource runat="server" ID="TestDbSource" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM [Emp]"></asp:SqlDataSource> </asp:Content> |
プログラムを実行する
WebForm1.aspxを開いた状態で、Visual Studioの上部にある「IIS Express (Google Chrome)」をクリックして、プログラムを実行します。
