解説

実例で学ぶASP.NETプログラミング

第11回 ASP.NETで進化する「検索画面」の構築

小田原 貴樹(うりゅう)
2004/03/20

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

 検索画面ページのファイル名は「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プログラミング」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間