解説 実例で学ぶASP.NETプログラミング 第7回　一覧ページを作る―DataGridコントロールに対するコーディング― 小田原 貴樹（うりゅう） 2003/06/24
Page1 Page2 Page3 Page4 Page5

　要素の配置が出来上がったら、選択ボタンを押した際のイベント・ハンドラをコーディングしてやれば、この機能は実装できる。

1: Private Sub PGRID_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles PGRID.SelectedIndexChanged  2:   Dim SID As Integer = PGRID.DataKeys(PGRID.SelectedIndex)  3:  4:   Dim PSET As New PSSET()  5:   DC.FDPS(PSET)  6:   Dim PSROW As PSSET.銘柄表Row = PSET.銘柄表.FindByID(SID)  7:  8:   SNAPI.ImageUrl = "./PIMG/" & PSROW.酒画像  9:   SNAPI.Visible = True 10: End Sub

任意の行を選択すると、該当の商品写真を表示するためのコード（イベント：DataGrid.SelectedIndexChanged）

　この商品一覧ページのために作成したDataSetオブジェクト「PLVSET」には商品写真のファイル名を格納している列が含まれていない。DataGridコントロールで選択された行の主キーを取得し、それを基に商品表の中を検索することで商品写真のファイル名を取得しよう。

　2行目の構文が、選択された行の主キーを取得するためのものだ。DataGridコントロールのDataKeysメソッドに、引数として現在選択されている行のインデックス番号を渡す。すると、DataGridコントロールを作成した際に指定したDataKeyプロパティの内容を基に、主キーが戻り値に格納される。この構文は応用次第でDataGridコントロールを制御する際にいろいろと利用できるので覚えておいてほしい。

　4行目〜6行目では、取得した主キー使って商品表を検索し、該当する行をDataRowオブジェクトとして新しく生成している。6行目の構文が分からなければ、連載第5回　DB連携ページをASP.NETで構築する（後編）を参照してほしい。

　8行目では、先ほどページに追加したImageButtonコントロールに対して、取得した商品画像ファイル名と画像ファイルが入っているフォルダ名を設定し、9行目でコントロールを表示状態に設定している。

　これで各行のカメラ・マークをクリックして行を選択すると、一覧表の中央あたりに該当する商品写真が表示されるようになった。コードを実行して動作を確認してほしい。次々に別の行を選択すると、操作に応じて商品写真が切り替わっていくだろう。しかし、このままでは一覧表の上に商品写真が被っているために、改めて表の内容を確認するときには邪魔になる。ちょっとコードを追加して、商品写真をクリックすると表示を非表示に切り替えるようにしてしまおう。

Private Sub SNAPI_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles SNAPI.Click   SNAPI.Visible = False   PGRID.SelectedIndex = -1 End Sub

商品写真をクリックすると、コントロールを非表示にするためのコード（イベント：SNAPI.Click）

　ただのImageButtonコントロールのClickイベントなので、別段解説も必要ないだろう。一応、ロジックとして商品写真を非表示にするのに合わせて、DataGridコントロールではどの行も選択されていない状態に設定している。

　DataGridコントロールを用いた商品一覧ページはこれで完成した。いろいろな動作を試してみてもらいたい。一通り動かしたら、自動フォーマットを使ってDataGridコントロールのデザインだけを変えてみたり、ページング機能の設定を変えたりして、DataGridコントロールがどんな機能を提供しているのかを確かめると面白いだろう。

ASP.NETのDataGridコントロールでトラブルを防ぐ
3つの標語

　今回の解説のおまけとして、DataGridコントロールを利用するときのコツを標語形式で記述しておく。ASP.NETでDataGridコントロール使っていると、DataGridコントロール特有のクセのせいで壁にぶつかることが多々ある。何かうまくいかないことがあったら、この標語を確認してほしい

1. DataGridコントロールを表示するときには、必ず「DataBind」メソッドを実行！

　DataGridコントロールの内容が何も表示されなければ、DataBindメソッドを忘れていないか確かめてほしい。ポストバック時でも同様だ。

2. Page_Loadイベント内のコードに「If Not IsPostBack Then 〜 End If」を忘れるな！

　Page_Loadイベント内のコードが「If Not IsPostBack Then 〜 End If」制御文で囲まれていないと、ページングや並べ替え、選択などの各イベントを実装しても、実行時には何も起こらなくなってしまう。これはASP.NETの実行時には、各種のイベントが起こる前にポストバックを起こした結果として画面のリロードが発生し、Page_Loadイベント・ハンドラが処理されることに起因する。

　「If Not IsPostBack Then 〜 End If」制御文を記述していない場合には、各イベント内のコードにブレーク・ポイントを置いても、まったく反応しないため、かなりパニックになるのは請け合いだ。これは、DataGridコントロールに限らずASP.NETでのプログラミング上よくあることなので気をつけていただきたい。

3. DataGridコントロールの設定は、デザイナかコードのどちらかだけで！

　わかりにくい標語だが（笑）、例えばDataGridコントロールのDataSourceプロパティはデザイナ画面上で設定することもできるし、実行時にPage_Loadイベント・ハンドラなどのコードで設定することもできる。デザイナ上で設定するとDataGridコントロールの内容をプレビューできるので、作成の初期段階にデザイナ上で設定し、その後のコーディング段階でロジック上の問題などが発生したため、コードでも設定してしまうというのは、ついやってしまいそうなケースだ。しかしこれはトラブルの元である。例えば、デザイナとコードの両方でDataSourceプロパティを設定してしまうと、全く表示が行われないなど思わぬ動作をすることもあり、パニックに陥る。

　トラブルを防ぐための標語を3つ紹介したが、書式設定や実行時の動作の制御に関することなど、DataGridコントロールにまつわる標語はこのほかにもたくさんある。もし、読者の方からこういった標語の要望があるようであれば、今後も継続して掲載したい。

次回予告

　ということで今回は、ショッピング・サイトはもちろん、業務処理などでも欠かすことができない一覧表ページを、DataGridコントロールを利用して作成する手法を解説した。DataGridコントロールはクセが強いせいで会議室内でも質問が多い問題児のようだが（笑）、使い慣れればこんなに便利な物はないので、ぜひ積極的に利用していただきたい。

　ASP.NETにはDataGridコントロールのほかにも「DataListコントロール」、「Repeaterコントロール」という、データベースと連携する一覧系ページに利用できるコントロールがある。今後の連載の中では、この2つコントロールを用いたページも作成するので、DataGridコントロールとの違いなども含めて解説しようと思っている。

　さて、次回は商品一覧ページで要求された商品の詳細情報を表示する「商品詳細情報ページ」を作成する。このページは1レコードの情報を表示するだけでいいのだが、その情報の見せ方には工夫が必要になる。多様なコントロールを利用して、商品情報を分かりやすく見せる手法などを解説していくので、前回および今回の連載と合わせてご覧いただきたい。また、次回の冒頭では今回ページの関係で載せきれなかった一覧ページに関する内容も多少含める予定である。

　回数を追って、少しずつショッピング・サイトの完成に近づいてきているので、次回も懲りずにお付き合いいただければ幸いである。

INDEX
	実例で学ぶASP.NETプログラミング
	第7回　一覧ページを作る―DataGridコントロールに対するコーディング―
	1．共有変数の宣言とインスタンスの作成
	2．DataGridコントロールにページング機能を実装する
	3．DataGridコントロールに列項目ごとの並べ替え機能を実装する
	4．ユーザーが選んだ商品の写真を表示する機能を実装する
	5．DataGridコントロールでトラブルを防ぐ3つの標語

　

「解説 ：実例で学ぶASP.NETプログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）