先生と生徒の会話形式で理解しよう

生徒

「ASP.NET WebFormsで、データベースにある名簿一覧を画面にきれいに並べて表示したいのですが、どうすればいいですか？」

先生

「WebFormsには『GridView（グリッドビュー）』という非常に便利なコントロールがあります。これを使えば、Excelのような表形式の表示をあっという間に作ることができますよ。」

生徒

「エクセルのような表ですか！難しそうなプログラミングをたくさん書かないといけないんですか？」

先生

「いいえ、基本的には部品を配置して、どのデータを使うか指定するだけです。それでは、具体的な使い方を見ていきましょう！」

1. GridView（グリッドビュー）とは？

ASP.NET WebForms（エーエスピー・ドットネット・ウェブフォーム）のGridViewは、データを「行（横一行）」と「列（縦一列）」の形式、つまり表形式で表示するための部品（サーバーコントロール）です。例えば、会員管理システムでのユーザー一覧表示や、ネットショップの在庫リスト、掲示板の投稿履歴など、私たちがウェブサイトでよく目にする「一覧表」の多くがこの機能を使って作られています。

プログラミング未経験の方には、「魔法の掲示板」をイメージしてもらうと分かりやすいかもしれません。掲示板自体はただの枠組みですが、そこに「名簿のデータを出して！」とお願いするだけで、自動的に人数分の行を作り、名前や年齢、住所といった項目をきれいに整理して貼り付けてくれる、そんな賢い道具なのです。

2. 表形式で表示するメリット

なぜバラバラにデータを表示せず、表形式（テーブル形式）にするのでしょうか。それは、人間にとって「比較」と「把握」がしやすいからです。パソコンを触ったことがない方でも、学校の出席簿や時刻表など、表形式の便利さは日常生活で実感しているはずです。

GridViewを使えば、単に文字を並べるだけでなく、自動的に背景色を一行おきに変えて見やすくしたり、項目名をクリックして順番を並べ替えたり（ソート機能）、ページが長くなりすぎないように「次へ」ボタンで分割したり（ページング機能）といった、本格的なウェブサイトに必要な機能が最初から備わっています。これらを自分で一から作るのは大変ですが、GridViewなら設定を少し変えるだけで実現できるのです。

3. データの源となるDataSource（データソース）

GridViewを使うとき、必ずセットで必要になるのがDataSource（データソース）という考え方です。これは文字通り「データの供給源（みなもと）」です。GridViewが掲示板の枠組みなら、データソースはその掲示板に貼るためのチラシやカードを管理している倉庫のような役割を果たします。

多くの場合、このデータソースは「データベース」という情報の保管庫とつながっています。WebFormsでは、画面上に asp:SqlDataSource といったコントロールを配置し、「この倉庫のこの棚にあるデータを使ってね」と指定します。この「枠組み」と「倉庫」を紐付けることを、専門用語で「データバインド」と呼びます。バインドとは「結びつける」という意味です。

4. GridViewの基本的な書き方

それでは、実際のコードを見てみましょう。まずは画面の見た目を作るHTML（.aspxファイル）の部分です。非常にシンプルに記述できることがわかります。


<asp:SqlDataSource ID="SqlData1" runat="server" 
    ConnectionString="サーバー接続設定" 
    SelectCommand="SELECT * FROM [MemberTable]"></asp:SqlDataSource>

<asp:GridView ID="gvMembers" runat="server" DataSourceID="SqlData1" AutoGenerateColumns="True">
</asp:GridView>

ここで AutoGenerateColumns="True" と書いているのが魔法の呪文です。これは「データの項目の数に合わせて、自動的に列を全部作ってね」という指示です。これ一言で、データベースにある項目がすべて画面に表示されるようになります。

5. プログラムからデータを流し込む方法

設定だけで動かすのも便利ですが、時にはプログラム（C#）側で条件を変えながらデータを表示したいこともあります。例えば、特定の名前の人だけを表示したい場合などです。以下のコードは、プログラムの中でデータの集まりを作り、それをGridViewに結びつける例です。


protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 仮のデータリスト（クラスの名簿のようなもの）を作成
        var members = new List<object>
        {
            new { ID = 1, Name = "田中 太郎", City = "東京都" },
            new { ID = 2, Name = "佐藤 花子", City = "大阪府" },
            new { ID = 3, Name = "鈴木 一郎", City = "名古屋市" }
        };

        // GridViewにデータをセット
        gvMembers.DataSource = members;
        // データを確定させて画面に反映
        gvMembers.DataBind();
    }
}

この DataBind()（データバインド）という命令を呼び出した瞬間に、画面の表がガチャンと更新されます。実行結果は以下のようになります。


ID  | Name      | City
----|-----------|-------
1   | 田中 太郎 | 東京都
2   | 佐藤 花子 | 大阪府
3   | 鈴木 一郎 | 名古屋市

6. 表示項目を自由にカスタマイズする

自動で列を作る機能は便利ですが、実際の仕事では「IDは隠したい」「名前だけ太字にしたい」といったこだわりが出てきます。そんな時は、自動生成をオフにして、自分で列（カラム）を定義します。これを TemplateField（テンプレートフィールド） や BoundField（バウンドフィールド） と呼びます。

テンプレートフィールドを使えば、表の中にボタンを置いたり、画像を表示したりすることも自由自在です。まるで工作をするように、一行一行のデザインを作り込むことができるのがGridViewの強力なところです。


<asp:GridView ID="gvCustom" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="お名前" />
        <asp:TemplateField HeaderText="操作">
            <ItemTemplate>
                <asp:Button ID="btnDetail" runat="server" Text="詳細を見る" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

7. GridViewの「イベント」を活用しよう

前回の記事で学んだ「イベントドリブン」の考え方も、GridViewで重要になります。表の中にあるボタンが押されたとき、どの行のボタンが押されたかを判定する必要がありますよね。これを実現するのが RowCommand（ロー・コマンド） というイベントです。

「3行目の削除ボタンが押されたから、3番目のデータを消す」といった処理は、この仕組みを使います。表の見た目だけでなく、動的な操作まで一貫して管理できるのがASP.NET WebFormsの設計思想です。初心者のうちは、「表示するだけ」から始めて、徐々にこうした「操作への反応」を追加していくと上達が早くなります。

8. 見た目を整える「スタイル」の設定

プログラミング未経験の方が心配されるのが、「地味な表にならないか」という点です。GridViewには、見た目を華やかにする設定が豊富にあります。例えば、HeaderStyle（見出しのデザイン）、RowStyle（行のデザイン）、AlternatingRowStyle（交互の行のデザイン）などです。

これらを使うと、マウス操作や簡単な設定だけで、背景にグラデーションをつけたり、枠線を消したりすることができます。最近では、Bootstrap（ブートストラップ） という有名なデザインの枠組みを適用させて、スマホでもきれいに見える今風の表に仕上げるのが一般的です。技術が進んでも、GridViewの基本さえ押さえておけば、あらゆる場面で活躍できるでしょう。