解説

実例で学ぶASP.NETプログラミング
―― ショッピング・サイト構築で学ぶASP.NET実践講座――

第9回　ASP.NETで実現する「見栄えの良い」商品紹介ページ−後編


小田原 貴樹（うりゅう）
2003/09/04

Back Issue
1
 ASP.NETの観点からショッピング・サイトを定義する
2 トップ・ページ構築で理解するASP.NETの特長
3 「実プロ流」ASP.NETデータベース操作術
4 DB連携ページをASP.NETで構築する（前編）
5 DB連携ページをASP.NETで構築する（後編）
6 ASP.NETの真骨頂-DataGridコントロールで一覧ページを制する

7

 一覧ページを作る―DataGridコントロールに対するコーディング―
8 ASP.NETで実現する「見栄えの良い」商品紹介ページ−前編

　前回は商品紹介ページを構成要素ごとに分割し、ページ上部のページ・タイトルと「商品種類／商品名／商品画像」の表示部分だけを作成した。今回は残りの構成要素を作成し、商品紹介ページを完成させよう。

商品紹介ページの完成画面
実際の動きを確認したい場合には、V-STORE.NETのデモ・サイト「VS屋」で確認してほしい。

　構築に必要な画像ファイルや、商品データと商品画像ファイル、この連載で今回までに構築したソース・ファイルなどがすべて入っているVisual Studio .NETのプロジェクト・ファイルは以下のとおり。

　実際の動きを確認したい場合には、V-STORE.NETのデモ・サイト「VS屋」を確認してほしい。また、今回は新しいデータセットとして、「商品表」を格納する「PMSET」、「売上明細」を格納する「UMSET」の2つを必要とする。連載第3回など過去の解説を参照するか、上記ソース・コードを参照して、データアダプタやデータセットの生成を行っておいてほしい。

■商品独自の情報提供部の作成

　はじめに、商品である日本酒の原料米やアルコール度数など、7種類の商品情報を提供する部分を作ろう。1つの情報を小さな枠に収め、それら7つを1列に並べ、ページの中央に位置する。要素が7つ含まれているが、1つを作成すれば、残りはまったく同じものをコピーすればよいため、作成そのものは容易だろう。

　さっそく、以下の手順に従ってデザインを作成してもらいたい。

商品情報提供部のデザイン：手順1
小さな枠1つ分のテーブルを作成する。テーブルのプロパティ設定は画面を参照してほしい。

商品情報提供部のデザイン：手順2
枠の上部には項目名が入る（画面では「原料米」となっている）。上部TDタグの背景色は「#00798f」（青緑色）、文字色は「White」で中央寄せにすると見栄えがよい。

商品情報提供部のデザイン：手順3
枠の下部にLabelコントロールを貼り付ける。[align]、[valign]ともに「center」にしてほしい。

商品情報提供部のデザイン：手順4
小さな枠を1つ作ったら、あとはコピー＆ペーストで7つ分を作成し、それぞれの項目名を編集すると楽だ。7つ出来上がったら、1行7列の大きなテーブルを作成し、その中に貼り付けていこう。

　上記の手順では、「原料米」のデザインを作って残りはコピー＆ぺーストで作成したが、コード側から制御を行うために、Labelコントロールにはそれぞれ固有のIDを割り当てなければならない。それぞれ以下のように設定していただきたい。

原料米 NL1
精米歩合 NL2
使用酵母 NL3
日本酒度 NL4
酸度 NL5
アミノ酸度 NL6
アルコール度 NL7
Labelコントロールに割り当てるID

　これで、デザインは出来上がった。実際に情報を表示させるためのコーディングを行おう。これは非常に簡単で、以下のコードを前回作成した「PRODET.ASPX.VB」のPage_Loadイベント内の末尾に追加してもらいたい。

NL1.Text = PR.原料米
NL2.Text = PR.精米歩合
NL3.Text = PR.使用酵母
NL4.Text = PR.日本酒度
NL5.Text = PR.酸度
NL6.Text = PR.アミノ酸度
NL7.Text = PR.アルコール度
PRODET.ASPX.VBのPage_Loadイベントに追加するコード

　コード内容そのものは簡単に理解できると思う。ここで利用している「PR」というオブジェクトは、前回ページ上部の構成要素を作成したときに生成している。クエリ文字列として渡された商品ID情報を基に、商品情報テーブル内を検索した結果が格納されている。

　非常に単純な手順だったと思うが、これで商品独自の情報提供部の作成は完了した。


　INDEX
　 実例で学ぶASP.NETプログラミング
　 第9回　ASP.NETで実現する「見栄えの良い」商品紹介ページ−後編
  1．個別商品の情報提供部をデザインする
　   2．情報を視覚的に表現している部分の作成（1）
　   3．情報を視覚的に表現している部分の作成（2）
　   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 記事ランキング

本日 月間
＠IT