解説

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

第5回 DB連携ページをASP.NETで構築する(後編)

小田原 貴樹(うりゅう)
2003/04/22

Page1 Page2 Page3 Page4 Page5 Page6

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

 次はメイン・フレームの右端にある「今月のお買い得酒表示機能」だ。これはテーブル「商品表」の列「特売価格」に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プログラミング」


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 記事ランキング

本日 月間