解説

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

第12回　ユーザー・フレンドリな入力画面の構築

小田原 貴樹（うりゅう）
2004/04/24
Page1 Page2 Page3 Page4

注文情報入力画面のデザインを作成する

　注文情報入力画面ページのファイル名は「REG.ASPX」と指定している。デザイン作業を行う前に「Webフォーム」の追加処理を行っておいてほしい。それでは、以下の手順に従ってデザインを作成してほしい。

注文情報入力画面のデザイン：手順1
画面下部のデザインを作成する。PIXフォルダ内の画像「bana5.gif」「img19.gif」をドラッグ＆ドロップで画面上部に配置する。

注文情報入力画面のデザイン：手順2
「御注文者情報」の入力部分を作成する。項目名のLabelコントロールと、実際の入力を行うTextBoxコントロールを配置する。各TextBoxコントロールのIDプロパティと項目名はそれぞれ「NAME」（お名前）、「YUBIN」（郵便番号）、「TKEN」（都道府県）、「TSIKU」（市区町村）、「TADDR」（それ以降の住所）、「TEL」（電話番号）、「EMAIL」（e-mail）とする（かっこ内が項目名）。

注文情報入力画面のデザイン：手順3
「送先住所」の入力部分のデザインを作成する。デザインを整えるため、1列4行のテーブルを配置する。テーブルの1行目にPIXフォルダ内の画像「img20.gif」「img19.gif」をドラッグ＆ドロップで配置する。

注文情報入力画面のデザイン：手順4
テーブルの2行目に送先住所が別に存在するかどうかをユーザーが選択するためのRadioButtonListコントロールを配置する。RadioButtonListコントロールのコレクションは、インデックス0番のリスト項目のTextプロパティを「上記の住所に配送」、Valueプロパティを「1」、Selectedプロパティを「True」とし、インデックス1番のリスト項目のTextプロパティを「上記と別住所に配送（下の表にご記入ください）」、Valueプロパティを「2」、Selectedプロパティを「False」とする。RadioButtonListコントロールのIDプロパティは「OARL」とする。

注文情報入力画面のデザイン：手順5
テーブルの3行目に「送先住所」の入力部分を作成する。各コントロールを配置するため、HTMLコントロールであるGridLayouyPanelコントロールをサーバ・コントロールとして追加し、IDプロパティを「OADR」とする。その上に配置する各TextBoxコントロールのIDプロパティと項目名はそれぞれ「NNAME」（お名前）、「NYUBIN」（郵便番号）、「NKEN」（都道府県）、「NSIKU」（市区町村）、「NADDR」（それ以降の住所）、「NTEL」（電話番号）、「NEMAIL」（e-mail）とする。また［入力内容の確認］のButtonコントロールを追加し、IDプロパティを「Check」とする。

注文情報入力画面のデザイン：手順6
「御注文者様情報」部の［郵便番号から住所抽出］Buttonコントロールを追加する。IDプロパティは「POSTON1」とし、CausesValidationプロパティを「False」にする。

注文情報入力画面のデザイン：手順7
「送先住所」部の［郵便番号から住所抽出］Buttonコントロールを追加する。IDプロパティは「POSTON2」とし、CausesValidationプロパティを「False」にする。また、各TextBoxコントロールのTabIndexプロパティを設定して、コントロールのタブ・オーダー（Tabキーで移動する順番）を調整する。このタブ・オーダーの設定では、単純に、上に配置したコントロールから順に数字を増やしていけばよい。

　「御注文者情報」と「送先住所」は、内容そのものはまったく同じものだが、データベースではそれぞれ別に格納される。また、「送先住所」はユーザーの選択によって表示／非表示を切り替えなければならないので、テーブル（Tableコントロール）に格納している。

　これで注文情報入力画面の基本となるデザインは完成したが、入力チェックを行うためにはRequiredFieldValidatorコントロールやRegularExpressionValidatorコントロールなどの入力チェック用のコントロールを追加する必要がある。その手順を次に解説する。


　INDEX
　 実例で学ぶASP.NETプログラミング
　 第12回　ユーザー・フレンドリーな入力画面の構築
　   1．注文情報入力画面設計のポイント
  2．注文情報入力画面のデザインの作成
　   3．注文情報入力画面への入力チェックの追加
　   4．「郵便番号から住所抽出」機能の実装
　
インデックス・ページヘ 　「解説 ：実例で学ぶ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