解説

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

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

小田原 貴樹(うりゅう)
2003/07/19

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コントロールに対するコーディング―

「2003は素敵だ。」今年後半のキーワード?

 先月、待望のWindows Server 2003、Viual Studio .NET 2003が同時発売された。また、今年中に発売が予定されている、Office 2003も先月からプレリリース・キットの配布が開始された。もう使っている方、まだ使ってない方それぞれだろうが、筆者はすでに3つとも本格的に利用を始めており、しかもかなり満足している。

 もちろん新しいインターフェイスや、パワフルで便利な新機能などさまざまなメリットが新バージョンには存在するのだが、この「2003」と銘打たれているバージョン製品には一貫して以下の4つの強化が行われているように思える。

  1. 安定性の向上(トラブル/ハングアップの減少)
  2. 信頼性の向上(セキュリティ面で大きく強化されている)
  3. 速度の向上(特にOffice、Visual Studio .NETの起動速度向上は凄まじい)
  4. ユーザー・インターフェイスの改善(親切で触りやすくなった)

 新機能は学習して利用しなければ意味がないため、すぐにバージョンアップの効果を実感することは難しいのだが、上記4つの機能強化は間違いなくバージョンアップのメリットとして誰もがすぐに享受できるものだ。

 それぞれの新機能については、@ITサイト内に詳しい記事がたくさんあると思うので、そちらを参照してもらうとして、1ユーザーとして利用した感想というのを述べさせてもらえば、「2003は素敵だ」ということになる。すべてのユーザーにとってバージョンアップするだけのメリットがあると感じた。

商品カテゴリ別に一覧ページを表示する(左側フレームのメニューとの連携)

 今回から2回にわたって構築するのは商品紹介ページだ。必要な画像ファイルや、商品データと商品画像ファイル、この連載でこれまでに構築したソース・ファイルなどがすべて含まれているVisual Studio .NETのプロジェクト・ファイルは以下のリンクからダウンロードできる。今回からこのアーカイブ・ファイルの中に画像ファイルも格納している。また、実際の動きを確認したい場合には、V-STORE.NETのデモ・サイト「VS屋」を確認してほしい。

 さて、商品紹介ページの作成に入る前に、前回作成した商品一覧ページの解説の中で説明しきれなかった「商品カテゴリ別一覧ページ」の作成について補足しておこう。

 といっても新規にページを作成するわけではなく、前回作成したページを少しいじってやるだけでよい。

 商品カテゴリ別一覧を作成する上で考えなければいけないのは、まず「ユーザーからの商品カテゴリの指定」のリクエストをどこから受け取るか? ということだ。ここで、連載の第2回を思い出していただきたい。あのときに作成した左フレーム・ページのメニューを利用するのが最もスマートだろう。

■左フレーム・メニューを修正する

 それでは、左フレームのメニュー内の各ボタンを押したときに、「商品カテゴリ別一覧ページ」を表示するようにしてみよう。まずは、下の手順を参考に「LEFT.ASPX」のHTMLを書き直していただきたい。

左フレームのHTMLの変更:手順1
「LEFT.ASPX」を開き、画面下部の[HTML]ボタンを押してHTMLビューを表示する

左フレームのHTMLの変更:手順2
HTMLの上の方に<form>タグが存在するので、タグ内に属性として「target="MAIN"」を追加する

 ここで行った作業は、結局のところ「そのまま処理を実装しても、左フレーム内でページの移動が起こってしまう」ため、「LEFT.ASPX」の中のFORMタグにTARGETプロパティを追加し、処理の実行先をメインのフレームに飛ばしているということになる。下記にFORMタグ部分をもう1度明記するので、確認してほしい。

<form id="Form1" target="MAIN" method="post" runat="server">
書き換えるFORMタグの行
 

 INDEX
  実例で学ぶASP.NETプログラミング
  第8回 ASP.NETで実現する「見栄えの良い」商品紹介ページ−前編
  1.商品カテゴリ別一覧ページ作成の補足説明
    2.ユーザーが左メニューを選択した場合の処理を実装する
    3.「フレーム間の制御」と「ページ間の値渡し」
    4.商品紹介ページ上部のデザインを作成する
    5.一覧表ページと連結させて表示をテストする
 
インデックス・ページヘ  「解説 :実例で学ぶ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 記事ランキング

本日 月間