解説 実例で学ぶASP.NETプログラミング 第9回　ASP.NETで実現する「見栄えの良い」商品紹介ページ−後編 小田原 貴樹（うりゅう） 2003/09/04
Page1 Page2 Page3 Page4 Page5 Page6

■ユーザーがサイズ／価格を選択した際のイベント処理を実装する

　1つの商品について複数のサイズ／価格が存在する場合には、RadioButtonListコントロールに内容を表示して入力を受け付けるようにした。処理の流れとしてはそれで十分なのだが、ユーザーの操作ミスを防ぎ、確認を促すために、RadioButtonListコントロールでユーザーが入力を行ったら、そのときに選択されたものを買い物かご格納ボタン横のLabelコントロールに表示するようにしてみよう。

　これはトラブルを未然に防ぐためでもあるが、ユーザー・フレンドリーなサイトにするためのノウハウの1つだとも考えている。

　RadioButtonListコントロール「YKRL」をデザイナ画面上でダブルクリックすると、SelectedIndexChangedイベントが追加されるので、その中に以下のコードを追加してほしい。

SELL.Visible = True SELL.Text = "選択されているのは:" & YKRL.SelectedItem.Text & "です"

SelectedIndexChangedイベントに追加するコード

　1行目ではPage_Loadイベント時に非表示にしたLabelコントロール「SELL」を表示させ、2行目でその内容として、RadioButtonListコントロール「YKRL」で選択されている項目のテキストを格納するようにしている。

　内容そのものは単純なので、RadioButtonListコントロールで選択されているテキストを取得するには「SelectedItem.Text」を使うという点だけ覚えておいてほしい。

　この2行を追加するだけで、ユーザーがRadioButtonListコントロールで項目を選択するたびに、その内容をLabelコントロールに転送することができるようになった。ただし、こういった動的な処理を実装する際には、コントロールの「AutoPostBackプロパティはTrue」になっていないといけない。デフォルトではTrueなので問題ないはずだが、Falseになっているとイベントそのものが起こらないことになるので注意してもらいたい。

■ユーザーが買い物かご格納ボタンを押した際のイベント処理を実装する

　さて、最後にユーザーが参照した商品を買い物かごの中に格納するイベントを実装しよう。ところで、買い物かごというのはどういった機能を提供するものなのだろうか？

　一言でいえば、「ユーザーごと／アクセスごとに、そのユーザーが購入したい商品を複数記憶しておく仕組み」となる。買い物かごの機能がないサイトの場合には、1つの商品を購入するたびに注文情報を入力するか、注文情報を受け取る際に購入したい商品をまとめて入力してもらうようにするなどの方法をとるしかない。これは人間の購買活動という一連のフローから見ると非常に不自然であり、また不親切でもある。

　さて、技術的に「ユーザーごと／アクセスごとに情報を保存する仕組み」を実現しようとすれば、さまざまな方法があるだろうが、「セッション変数」を利用するのがもっともスマートで効率のよい実装になるのは、これまで連載を読んできた方ならお分かりだろう。

　セッション変数を利用すればプログラマー側で意識をする必要がなく、暗黙で「ユーザーごと／アクセスごと」に情報を記憶していくことが可能だ。ただ、そのセッション変数はどこで生成するのが妥当なのだろうか？

　これまでの連載では、あるページ内でそのページでの情報を永続的に利用するためにセッション変数を何度か使ってきたが、買い物かごの機能を実現するために利用するセッション変数を生成するのであれば、サイト全体を通して「ユーザーが最初にアクセスしたとき」に生成が行われないと都合が悪い。

　このセッション変数を仮にトップ・ページが開かれたときに生成したとしても、ユーザーがトップ・ページ以外のページに直接アクセスすると、セッション変数は生成されないため機能が提供できない。あるユーザーがよく購入する商品の商品紹介ページに「お気に入り」を設定していた場合など、トップ・ページを経由しないで別のページを開くことは珍しくないだろう。

　ASP.NETには、こういった際に利用できる特殊なファイル「Global.asax」が用意されている。ソリューション・エクスプローラの中にある「Global.asax」をコード・ビューで開いていただきたい。

　「Global.asax」のコード・ビューには標準でさまざまなイベントが登録されており、それぞれにコメントが入っているので、どういったときにどのイベントを利用するべきかは分かりやすいかと思う。買い物かご機能のために利用するイベントは、Session_Startイベントだ。イベント内に以下のコードを追加していただきたい。

1: Dim USET As New UMSET() 2: Dim UVIEW As New DataView() 3: UVIEW.Table = USET.Tables("売上明細") 4: 5: Session("Sbview") = UVIEW

Session_Startイベントに追加するコード

　買い物かご機能を実装するために利用するセッション変数をどのように構成するかについては、これまたいろいろな方法があると思う。データベースに注文情報を格納するためのテーブルとして、「売上伝票」と「売上明細」があり、これはもちろん親子関係になるテーブルだ。

　ここで筆者なりの定義を行ってしまうと、売上伝票とは「誰が購入したか」という情報と、注文全体を集計した情報が格納されるべきであり、売上明細とは「何を購入したか」という情報が格納されるべきである。

　そういった定義に基づいて考えれば、売上明細の構成情報をセッション変数として利用するのがスマートであろう。ASPの頃にはセッション変数といえば、いわゆる普通の変数であったが、ASP.NETではオブジェクトを格納することもできるようになったので大変便利だ。そういった前提を頭に入れて解説を読んでいただけると分かりやすいだろう。

　1行目〜3行目で売上明細のデータセットを生成し、それをデータビューに対して割り当てている。買い物かご機能として格納される情報は新規の情報だけであり、既存の情報は必要ないのでFillメソッドを実行したりはしない。

　そして5行目でセッション変数「Sbview」に、売上明細の構造を持ったデータビューを格納している。この処理を行うことで、セッション変数「Sbview」はデータビューとして利用することが可能になる。データ連結時にDataSourceプロパティに割り当てることも可能であるし、データビューのメンバを利用することもできる。ASP.NETになって大きく進化したと筆者が考えているのがこの点だ。

　「Global.asax」に上記のコードを追加することで、サイト内の任意のページをユーザーが最初に開いたときに買い物かご機能を実装するために利用するセッション変数を生成できるようになった。

　さて、これで買い物かごの枠組みは出来上がったので、「PRODET.ASPX」のデザイナ画面に戻って、買い物かごに格納するためのボタン「BASIN」をダブルクリックし、BASIN_Clickイベントの中に以下のコードを記述してほしい。

1: If SELL.Visible = False OR SELL.Text = "容量を選択してください。" Then  2:   SELL.Visible = True  3:   SELL.Text = "容量を選択してください。"  4: Else  5:   Dim uset As New PMSET  6:   DC.FDPM(uset)  7:   Dim urow As PMSET.商品表Row = uset.商品表.FindByID(YKRL.SelectedItem.Value)  8:  9:   Dim PSET As New PVSET 10:   DC.FDPV(PSET) 11:   Dim cpd As PVSET.酒完成表Row = PSET.酒完成表.FindByID(Session("PID")) 12: 13:   Dim cset As New CASET 14:   DC.FDCA(cset) 15:   Dim cad As CASET.酒カテゴリRow = cset.酒カテゴリ.FindByID(cpd.酒種ID) 16: 17:   Dim drv As DataRowView = Session("sbview").AddNew() 18: 19:   drv.BeginEdit() 20:   drv("商品ID") = cpd.ID 21:   drv("商品名") = cpd.銘柄 22:   drv("種類") = cad.酒種 23:   drv("容量") = urow.容量 24:   drv("単価") = urow.小売価格 25:   drv("注文数") = 1 26:   drv("金額") = urow.小売価格 27:   drv.EndEdit() 28: 29: End If

買い物かごに商品を追加するためのコード

　長いコードになってしまっているが、内容は単純なので、ざっと解説していこう。

　1行目はLabelコントロール「SELL」が表示されているかどうかを判定している。これが非表示であったり、テキスト内容が「容量を選択してください。」となっていたりする場合には、ユーザーが商品のサイズを選択していない状態なので、そのまま買い物かごに格納する処理を行うわけにはいかない。その場合、2行目と3行目で注意を促すメッセージを表示し、処理を終了させている。

　その判定をクリアすると、5行目から7行目に制御が移る。ここでは選択されたサイズに割り当てられている「ID」列をキーにして、商品表の中を検索し、該当する商品情報を「urow」というDataRowオブジェクトに格納している。

　続いて、9行目〜11行目で改めて商品情報を、13行目〜15行目でカテゴリ情報を取得し直している。これはPage_Loadイベント内で記述したものと同じコードだ。冗長でもあるし速度的にも多少不利なので、気になる方はPage_Loadイベント時に情報を保存するようにしてもいいだろう。

　17行目では、先ほどコーディングした買い物かごの内容となるセッション変数「Session("sbview")」の新しいレコードとして「drv」というDataRowViewオブジェクトを生成している。この「drv」の内容を編集すれば、買い物かごの中に新しい商品情報を格納できるということになる。

　19行目では、「drv」の編集開始をBeginEditメソッドを実行することで宣言している。データビューの内容を編集／追加する場合には、BeginEditメソッドで開始し、EndEditメソッドで終了すればよい。27行目で行っているのがEndEditメソッドの実行だ。

　その間、20行目〜26行目で買い物かごの内容のそれぞれの列に、該当する商品情報などを格納している。これまでに取得した情報を使い回しているだけなので、すぐにお分かりいただけるだろう。

　これでセッション変数になっている買い物かごの中に、購入する商品情報を格納していくコードは出来上がった。本来は上記のコード終了後、買い物かごの内容ページにジャンプするようになっているのだが、そこは次回作成する予定なので、今回は情報の保存までに止めている。

■次回予告

　今回は、商品紹介ページにいろいろなコントロールを利用して商品情報を表示していく手法と、その商品情報を買い物かごに格納するところまでを解説した。この種のいわゆる「単票ページ」は工夫次第でどのようにでも表現できるので、オリジナリティをぜひ追求していただきたい。

　また、買い物かご機能の実装というのは、ショッピング・サイト構築における大きなヤマの1つといえるが、ASP.NETを利用することでかなり単純化できることが分かっていただけたと思う。この買い物かご機能の実装というのもさまざまな方法論が考えられるところなので、自分なりに効率のよいスタイルを作り上げる参考にしてもらえればと思う。

　さて次回は、その買い物かごの内容を表示／編集するための「ショッピング・バスケット・ページ」の作成を解説していく。数あるコントロールの中でも難易度が高く、不親切な（笑）、Repeaterコントロールの利用方法の解説を中心にお送りする。DataGrid系の3コントロールの中で最も自由度が高く、それゆえに使いづらいRepeaterコントロールのデザイン方法、セッション変数に格納された「見えないDataSource」との連結方法など、次回もノウハウ満載でお届けするのでご期待いただきたい。

INDEX
	実例で学ぶASP.NETプログラミング
	第9回　ASP.NETで実現する「見栄えの良い」商品紹介ページ−後編
	1．個別商品の情報提供部をデザインする
	2．情報を視覚的に表現している部分の作成（1）
	3．情報を視覚的に表現している部分の作成（2）
	4．商品コメントを表示する「特徴」部分の作成
	5．買い物かごに格納するボタン部の作成
	6．ユーザーがサイズ／価格を選択した際のイベント処理を実装する

　

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

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