解説 実例で学ぶASP.NETプログラミング 第11回　ASP.NETで進化する「検索画面」の構築 小田原 貴樹（うりゅう） 2004/03/20
Page1 Page2 Page3 Page4 Page5 Page6

検索画面のデザインを作成する

　検索画面ページのファイル名は「SEARCH.ASPX」と指定している。デザイン作業を行う前に「Webフォーム」の追加処理を行っておいてほしい。それでは、以下の手順に従ってデザインを作成してもらいたい。

検索画面のデザイン：手順1

画面上部のデザインを作成する。PIXフォルダ内の画像「bana2gif」「img10.gif」をドラッグ＆ドロップで画面上部に配置する。またImageButtonコントロールを貼り付け、そのコントロールのImageUrlプロパティに「PIX/SENKAI_1.gif」を指定し、IDプロパティには「CLB」を指定する。

検索画面のデザイン：手順2

検索用のRadioButtonListコントロールを、テーブルの中に配置する。ここでは「お酒の種類」のテーブルの中にRadioButtonListコントロールを配置して、そのコントロールのIDプロパティに「SAKE」を指定する。

検索画面のデザイン：手順3

残り4つのRadioButtonListコントロールも「検索画面のデザイン手順2」と同じように配置する。この画面のように並べれば、実行時にもきれいに整列して表示されるはずだ。残り4つのコントロールのIDプロパティにはそれぞれ「NOMI」、「AMA」、「KAKAKU」、「SIZE」を指定する。

検索画面のデザイン：手順4

画面下部のデザインを作成する。PIXフォルダ内の画像「NANKEN.gif」「PIX/KENHAI.gif」をドラッグ＆ドロップで画面下部に配置する。またImageButtonコントロールを貼り付け、ImageUrlプロパティに「PIX/KEN_1.gif」を指定し、IDプロパティには「SRB」を指定する。最後に件数を表示するためのLabelコントロールを2つ配置し、それらのIDプロパティにそれぞれ「ACNT」、「NCNT」を指定する。

　5つあるRadioButtonListコントロールは、デザイン段階では長さが定まっていないので、それぞれの幅をある程度大きめに配置してほしい。本当は大きなテーブルに入れる方がきっちり収まるかもしれないが、作業が複雑になるので割愛した。

　細かい構成要素は多いが、デザインそのものは単純なので、自分なりのアレンジを施してみるのもよいだろう。デザイン作業については、これまでの連載の中でも何度も扱っているので、作業の細かな流れは割愛している。忘れている部分があれば読み返していただきたい。また、詳細なプロパティを知りたい場合には、参考用のソース・ファイル群を開いて確認してほしい。それでは、この検索画面のためのコーディングを行っていこう。

変数の初期化と検索画面の表示

　まずは、PRODET.ASPXのコードビハインド・ファイルを開き、次のコードをフィールド宣言部分のすぐ下に記述する。

Public DC As New DATACON()

PRODET.ASPX.VBのフィールド宣言部分の下に追加するコード

　この連載で何度も出てきている、データベースから情報を取得・更新するためのクラスであるDATACONのインスタンスを、DCという名前で新しく生成するための処理である。これでこのクラスの中でもDATACONクラスのメソッドが利用できるようになる。

　次に、Page_Loadイベントのハンドラ・メソッド内に変数の初期化と、画面表示のための以下のコードを追加する。

1: Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load  2:   If Not IsPostBack Then  3:     Dim PSET As New PVSET  4:     Dim PVIEW As New DataView  5:     DC.FDPV(PSET)  6:     PVIEW.Table = PSET.Tables("酒完成表")  7:     Session("PVIEW") = PVIEW  8:     ACNT.Text = PVIEW.Count  9:     NCNT.Text = PVIEW.Count 10: 11:     SAKEIN(SAKE) 12:     NOMIIN(NOMI) 13:     AMAIN(AMA) 14:     KAKAKUIN(KAKAKU) 15:     SIZEIN(SIZE) 16: 17:     Session("BFIL") = "" 18: 19:     Dim SX(5) As Integer 20:     Session("SX(5)") = SX(5) 21:     Dim I As Integer 22:     For I = 1 To 5 23:       Session("SX(" & I & ")") = 0 24:     Next 25:   End If 26: End Sub

PRODET.ASPX.VBのPage_Loadメソッド内に追加するコード

　ソース・コードの2行目にある「If Not IsPostBack Then」では、Page_Loadメソッドではおなじみの表現である。これまでにも何度も出てきたが、「ほかのページからジャンプしてきたときだけ実行する」という制御文である。

　3行目〜7行目では、データベースから商品データを取得し、渡された値をデータビューに格納し、さらにセッション変数に置き換えている。検索画面では、ユーザーの操作によって何度もデータにアクセスする必要があるので、その都度データベースに接続していたのでは効率が悪い。そのためセッション変数に置き換えて利用する。

　8行目と9行目では、検索画面のデザイン内にある「全〜件中〜件が該当します」という案内部分の内容を格納している。それぞれ「ACNT」はデータの全件数、「NCNT」は検索結果件数を表示するが、この段階ではどちらもデータの全件数で構わないので、データビューの「COUNT」プロパティを利用して同じ内容を格納している。

　11行目〜15行目では、検索画面に配置された5つのRadioButtonListコントロールに初期値を格納している。この部分は関数化して冗長なコードになるのを防いでいる。関数部分の内容説明は次項で行う。

　17行目はセッション変数「BFIL」を初期化している。「BFIL」はユーザーが選択した結果が格納されていくセッション変数で、データビューに対してフィルタをかけるためのWHERE条件文になる。ページを開いた際にこれまでの結果を引きずらないために、初期化を行っている。

　19行目〜24行目では、5つのRadioButtonListコントロールの状態を格納しておくための配列「SX」を宣言し、セッション変数に置き換え、初期化している。「SX」は、それぞれのRadioButtonListコントロールが選択されているかどうかを保存しておくための変数で、状態を保存しておく必要があるためセッション変数として利用している。初期値は「0」、選択された場合には「1」を格納する。

　ここまででPage_Loadメソッド内に変数の初期化と、画面表示のためのコーディングは完了した。次は、先ほど飛ばしたRadioButtonListコントロールの内容を初期化する関数を作成しよう。

INDEX
	実例で学ぶASP.NETプログラミング
	第11回　ASP.NETで進化する「検索画面」の構築
	1．Web系システムにおける「検索画面」の必要性と問題点
	2．検索画面のデザインを作成する
	3．RadioButtonListコントロールを初期化するための関数を作成する
	4．ユーザーが項目を選択した際のイベント処理を実装する
	5．ユーザーが選択を解除した際のイベント処理を実装する
	6．検索結果画面の作成と実行結果の確認

　

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

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