解説 実例で学ぶASP.NETプログラミング 第5回　DB連携ページをASP.NETで構築する（後編） 小田原 貴樹（うりゅう） 2003/04/22

---

今月のお買い得酒表示機能の作成

　次はメイン・フレームの右端にある「今月のお買い得酒表示機能」だ。これはテーブル「商品表」の列「特売価格」に0以外の数値、すなわち特価が入力されている商品の中から、ランダムで2商品を選び出して表示する機能だ。ショッピング・サイトでは特売品をクローズ・アップするべきなので、こうした機能は効果的だろう。

■今月のお買い得酒表示のデザイン作成

　ここでもまずデザインを作成する。「季節限定酒表示機能の作成」の項のデザインと同じようにTableコントロールを利用して作成しよう。以下を参考にしてほしい。

今月のお買い得酒表示機能のデザイン作成：手順1

まずお買い得酒表示機能全体の大きな枠組みとなるテーブルの挿入を行う。作成するテーブルの条件は、行が「5」、列は「1」、幅は「200ピクセル」にする。また、境界線のサイズ、セル間のスペース、セル内のスペースはいずれも「0」にする。

今月のお買い得酒表示機能のデザイン作成：手順2

挿入されたテーブルの1番上のセルに「img7.gif」を配置し、各セルのスタイルを整える。セルの高さは上から順に「35」、「指定無し」、「25」、「指定無し」、「25」と設定し、すべてのセルのalignプロパティをcenterにする。

今月のお買い得酒表示機能のデザイン作成：手順3

上から2つ目のセルにカーソルを合わせ、新しいテーブルの挿入を行う。テーブルの条件は、行が「5」、列は「1」、幅は「160ピクセル」、境界線のサイズは「0」、セル間のスペースは「0」、セル内のスペースには「2」をそれぞれ指定する。

今月のお買い得酒表示機能のデザイン作成：手順4

挿入したテーブルの上から2番目のセルから次のような要素を配置する。 2番目：HyperLinkコントロール（PLI1） 3番目：Labelコントロールを2つ（PTL1とPSL1） 4番目：Labelコントロール（PNL1） 5番目：Labelコントロールを2つ（PNKL1とPTKL1）、それらの間に右向き矢印 括弧内はそれぞれのコントロールのIDを示しているので、指定通りにしてほしい。また、各コントロールの役割は上から「商品写真、商品ジャンルと商品サイズ、商品名、通常価格と特価」を表示するためのものだ。フォントなどのスタイルは分かりやすい商品情報表示になるように工夫してもらえばいいだろう。なお、上図の通常価格を表示するLabelコントロール（PNKL1）はStrikeOutプロパティをTrueに指定してある。こうすると通常価格に重なって打ち消し線が表示されるので、「特価」という意味合いが強調されて面白い。

今月のお買い得酒表示機能のデザイン作成：手順5

手順4で作成した商品情報表示用のテーブルをコピーし、1つセルを空けて貼り付ける。このコピーしたテーブル内の各コントロールのIDには、コピー元の各IDの末尾の数字「1」を「2」に変更したものを指定する。それ以外のスタイルなどはまったく同じはずなので、手間が省ける。

　

INDEX
	実例で学ぶASP.NETプログラミング
	第5回　DB連携ページをASP.NETで構築する（後編）
	1．季節限定酒表示機能のデザインを作成する
	2．季節限定酒表示機能の実装
	3．DataSetオブジェクトの主キー作成
	4．今月のお買い得酒表示機能のデザインを作成する
	5．今月のお買い得酒表示機能の実装
	6．全体デザイン修正とデバッグ

　

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

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