解説 実例で学ぶASP.NETプログラミング 第10回　ASP.NETで変わる「買い物かご」構築 小田原 貴樹（うりゅう） 2004/02/11
Page1 Page2 Page3 Page4 Page5

■ユーザーが［削除］ボタンを押した際のイベント処理を実装する

　買い物かごに入れた情報を、ユーザーが任意に削除できるようにするためのコーディングもASP.NETなら極めて簡単に記述できる。

1: Private Sub basrep_ItemCommand(ByVal source As System.Object, ByVal e As System.Web.UI.WebControls.RepeaterCommandEventArgs) Handles basrep.ItemCommand 2:   Session("Sbview").Delete(e.Item.ItemIndex) 3:   If Not Session("Sbview").COUNT = 0 Then 4:     basrep.DataSource = Session("Sbasview") 5:     basrep.DataBind() 6:   Else 7:     Server.Transfer("nobas.aspx") 8:   End If 9: End Sub

［削除］ボタンを押したときのイベント処理

ここでは［削除］ボタンがクリックされた行のデータをセッション変数から削除し、Repeaterコントロールの再表示を行う。

　Repeaterコントロールの中に配置したボタンなどで発生したイベントを処理する場合には、Repeaterコントロールの「ItemCommand」イベントのイベント・ハンドラを利用することになる。格納された情報に応じて繰り返し表示が行われることのあるRepeaterコントロールなどでは、そのイベントが発生した位置（行数）などの情報が必要になるが、それもこのイベント・ハンドラの引数であるRepeaterCommandEventArgsクラス（System.Web.UI.WebControls名前空間）のオブジェクト（VS.NETによる自動生成では変数名が「e」になる）の中に格納されている。

　2行目で、さっそく実際の削除処理を行っている。繰り返すが、セッション変数「Session("Sbview")」はデータビュー・オブジェクトとして生成されているので、そのメンバはすべて利用できる。削除に利用するDeleteメソッドは引数としてレコード位置を指定する必要がある。買い物かごページの明細行部分にはデータソースとして「Session("Sbview")」を割り当てているので、削除しなければならないレコードはそのままボタンが押された行ということになる。「e.Item.ItemIndex」という記述を利用することで、ボタンが押された行のレコード位置を取得できるため、それを引数として割り当てている。

　3〜8行目では削除後に再度、ページ表示時と同じようにレコード数の判定を行い、削除の結果レコード数が0になっていれば「nobas.aspx」に遷移させ、0でなければ削除後の「Session("Sbview")」をRepeaterコントロールのデータソースとして割り当てて表示させている。

■表のフッタ部分を実装する

　合計金額や送料などを表示するための表のフッタ部分の実装を行おう。この部分は集計や判定の処理が含まれるのが普通なのでデータ連結で処理せず、それぞれ独立した関数（メソッド）を作成する。以下が合計金額を表示するためのコードだ。

1: Public Function ssum() As String 2:   Dim i As Integer 3:   Dim sum As Integer 4:   For i = 0 To Session("Sbview").COUNT - 1 5:     sum += Session("Sbview")(i)("金額") 6:   Next 7:   Return sum.ToString("C") 8: End Function

合計金額を表示するためのメソッド

　単純なコードだが、簡単に説明しておこう。

　2行目、3行目はそれぞれ、ループ用カウンタ変数と合計金額を格納するための変数を宣言している。

　4〜6行目までで、「Session("Sbview")」のレコード数分ループを回して、それぞれの行の金額を順次加算している。

　7行目で、集計された合計金額が格納された変数を戻しているが、この際にToStringメソッドを利用して通貨型の書式指定（"C"）を行っている。ここで注意してほしいのは、合計金額を格納する変数を数値型として宣言しておかないとToStringメソッドが利用できないという点だろう。文字列型で宣言しても問題ないように思えるが、文字列型では「ToString("C")」を利用できない。

　「VS屋」では、ユーザーの住所に応じて送料が変化する仕組みをとったので、買い物かご画面では送料が判断できない。そのため「小計」も「合計」も同じ金額になるので、表のフッタ部分に必要なコーディングはこれだけだ。BAS.ASPXのHTMLビューを開いて、表のフッタ部分を修正しよう。変更した点は太字になっているので、その点を中心に見てほしい。

29: <tr> 30: <TD colspan="3" height="25">&nbsp;</TD> 31: <TD align="middle" bgColor="#ffac4c" height="25"><font style="FONT-SIZE: 14px; COLOR: white">小計</font></TD> 32: <TD align="middle" bgColor="#fff5d4" height="25"><%# SSUM()%></TD> 33: <TD height="25">&nbsp;</TD> 34: </tr> 35: <tr> 36: <TD colspan="3" height="25">&nbsp;</TD> 37: <TD align="middle" bgColor="#ffac4c" height="25"><font style="FONT-SIZE: 14px; COLOR: white">送料</font></TD> 38: <TD align="middle" bgColor="#fff5d4" height="25">未定</TD> 39: <TD height="25">&nbsp;</TD> 40: </tr> 41: <tr> 42: <TD colspan="3" height="25">&nbsp;</TD> 43: <TD align="middle" bgColor="#ffac4c" height="25"><font style="FONT-SIZE: 14px; COLOR: white">合計</font></TD> 44: <TD align="middle" bgColor="#fff5d4" height="25"><%# SSUM()%></TD> 45: <TD height="25">&nbsp;</TD> 46: </tr>

表のフッタ部分のHTML（29〜46行目の部分）

変更部分を太字で表示している。

　前述のHTMLでは、<FooterTemplate>と</FooterTemplate>で囲まれた部分（29〜47行目）になる。コードビハインド部でコーディングした関数（メソッド）をHTMLビューで指定する場合には、上記のようにデータ連結式で関数名（メソッド名）を指定してやるだけでよい。これで実行時にページの表示処理時に関数内のコードが実行され、結果が表示されることになる。

■ページ間の遷移処理と、実行結果の確認

　ここまでで、買い物かごページそのものの実装は完了した。あとは前回作成した商品紹介ページに買い物かごページへの遷移を追加してやるだけだ。第9回の「ユーザーが買い物かご格納ボタンを押した際のイベント処理を実装する」の項で記述したBASIN_Clickイベント・ハンドラの最後の行の前に以下のコードを追加してほしい。

Server.Transfer("bas.aspx")

BASIN_Clickイベント・ハンドラに追加するコード

　この遷移を追加してやれば、商品紹介ページにある「かごの中へ」というボタンを押すことで、買い物かごページへ遷移し内容が表示されるはずだ。

　ここまでの作業が完了したら、実際に実行して動作を確認してみてほしい。きちんと記述ができていれば以下のような画面が表示され、買い物かごページが実装されているのが確認できるはずだ。

完成した買い物かごページ

正しく動作することを確認しよう。

■次回予告

　今回はRepeaterコントロールを利用した買い物かごページの構築を解説した。買い物かごページの構築で難しいのは、概念的な要素が絡みやすいからで、各要素の役割とそれらの関係を理解できればASP.NETで構築するのは容易であることが分かっていただけただろう。解説内でも実際の作業部分はわずかだったと思う。

　またRepeaterコントロールは、自由度が高い分だけDataGridコントロールなどと比べると複雑だと思われがちであるが、HTMLベースで配置していけば、逆に単純なコントロールだといえる。ちなみに、もう1つの表形式表示のためのWebコントロールであるDataListコントロールは、この連載では出てこないが、DataGridコントロールとRepeaterコントロールの中間に位置するようなコントロールである。一覧表でなく単票情報を簡単に表示したいときなどに利用するとよい。

　さて次回は、商品検索ページの作成を解説していく。商品点数（情報件数）が100を超えるようなサイトになると、一覧だけで商品を探すのは難しい。分かりやすく、使い勝手のよい商品検索機能が必要になってくる。一般的にショッピング・サイトに存在する商品検索機能といえば、キーワード検索なのだが、ユーザーにキーワードを入力させても、今度は商品点数がかなり多数存在しなければ検索にひっかからなくなる。「VS屋」ではそういった検索のジレンマを解決するために、かなり独特の商品検索機能を用意している。次回もノウハウを詰め込んで、なおかつ素早くお届けできるよう頑張るので、ぜひともお付き合いいただきたい。

INDEX
	実例で学ぶASP.NETプログラミング
	第10回　ASP.NETで変わる「買い物かご」構築
	1．ショッピング・サイトにおける「買い物かご」の重要性
	2．買い物かご画面のデザインを作成する
	3．Repeaterコントロールを配置する
	4．表内部の情報をデータ連結し、Repeaterコントロールを表示する
	5．「買い物かご」を実現するそのほかの機能を実装する

　

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

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