Microsoft .NET へのアップグレード
Paul D. Sheriff
PDSA, Inc.
November 2001
日本語版最終更新日 2002 年 1 月 30 日
目標
- Web フォームについて学ぶ
- Web フォームに組み込まれる Web コントロールについて学ぶ
- Web フォームを作成する
前提
このドキュメントを活用するためには、以下の前提知識が必要となります。
- ASP 開発についての知識があること。
- HTTP およびインターネット開発についての知識があること。
目次
ASP.NET と Web フォームの概要
Web フォームの作成
要約
ASP.NET と Web フォームの概要
Microsoft ASP.NET は、Web アプリケーション開発のための次世代のテクノロジです。Active Server Pages (ASP) の優れた点と、共通言語ランタイム (CLR) が提供するリッチなサービスおよび機能が組み合わされ、さらにその他のさまざまな新機能が追加されています。その結果として、わずかなコーディングで高い柔軟性が得られる、堅牢でスケーラブルかつ高速な Web 開発エクスペリエンスが実現されています。
Web フォームは ASP.NET の中核に位置しています。Web フォームは、Web アプリケーションの外観を与えるユーザー インターフェイス (UI) 要素です。Web フォームは、その中に配置されたコントロールのプロパティ、メソッド、およびイベントを提供するという点で Windows フォームに似ています。ただし、これらの UI 要素は、要求の中で指定された HTML などの適切なマークアップ言語を使って自分自身をレンダリングします。Visual Studio .NET を使用する場合には、従来から Web アプリケーションの UI の作成に使用されてきたドラッグ アンド ドロップ インターフェイスも使用できます。
Web フォームは、ビジュアルな部分 (.ASPX ファイル) と、別のクラス ファイルに置かれるフォームの背後のコードの 2 つの要素から構成されています。
.gif)
図 1. Web フォームは ASP.NET の一部である
Web フォームの目的
Web フォームと ASP.NET は、ASP のいくつかの制限を克服するために作成されたものです。新しい利点としては、次のようなものがあります。
- HTML インターフェイスのアプリケーション ロジックからの分離。
- ブラウザを検出し、HTML などの適切なマークアップ言語を送信することができる、リッチなサーバー サイド コントロールのセット。
- 新しいサーバー サイド .NET コントロールのデータ バインディング機能により、書かなくてはならないコードの量が減っていること。
- Visual Basic プログラマがよく慣れているイベント ベースのプログラミング モデル。
- VBScript または JScript をインタプリタ形式で処理していた ASP とは異なり、複数の言語をサポートし、コンパイル済みのコードを使用すること。
- サードパーティが追加の機能を提供するコントロールを作成できること。
表面上、Web フォームは、コントロールを描画するためのワークスペースのように見えますが、実際にはそれよりもはるかに高度な機能が備わっています。しかし通常は、各種のコントロールを Web フォーム上に配置するだけで UI を作成することができます。使用するコントロールによって、各コントロールがどのプロパティ、イベント、およびメソッドを受け取るかが決定されます。ユーザー インターフェイスの作成に使用できるコントロールには、HTML コントロールと Web フォーム コントロールの 2 つのタイプがあります。
以下に、Web フォームと ASP.NET フレームワークで使用できるコントロールのタイプを示します。
HTML コントロール
HTML コントロールは、FrontPage やその他の HTML エディタを使って UI を描画したときに生成される実際の HTML 要素に似ています。Web フォームでは標準の HTML 要素も使用することができます。たとえば、テキスト ボックスを作成したい場合には、次のようにします。
<input type=”text” id=txtFirstName size=25>
Visual Studio® .NET を使用している場合には、[HTML ツールボックス] タブから TextField コントロールを選択し、HTML ページ上の目的の位置にコントロールを描画します。
HTML 要素は、タグに "runat=server" を追加することで、Web フォームがサーバー上で処理されるときにのみ HTML コントロールとして動作させることができます。
<input type=”text” id=txtFirstName size=25 runat=server>
Visual Studio .NET を使用している場合には、デザイン ビューで HTML 要素を右クリックし、コントロール メニューから [サーバー コントロールで実行] を選択します。
HTML コントロールでは、タグに関連付けられたサーバー イベントを処理し (ボタン クリックなど)、Web フォームのコードの中でプログラム的に HTML タグを操作することができます。コントロールがブラウザに対してレンダリングされるときには、そのタグは Web フォームの内容から "runat=server" を削除したものとしてレンダリングされます。この機能を使って、ブラウザに送信される HTML を細かく制御することができます。
|
コントロール
|
説明
|
Web フォームのコード例
|
|---|
| ボタン | クリック イベントに反応するために使用できる通常のボタン | <input type=button runat=
server> |
| リセット ボタン | フォーム上の他のすべての HTML フォーム要素をデフォルト値にリセットする | <input type=reset runat=
server> |
| 送信 ボタン | フォーム データを、FORM タグの Action= 属性で指定されたページに自動的に POST する | <input type=submit runat=
server> |
| テキスト フィールド | HTML フォーム上にユーザーのための入力領域を提供する | <input type=text runat=
server> |
| テキスト エリア | HTML フォーム上での複数行の入力に使用される | <input type=textarea runat=
server> |
| ファイル フィールド | テキスト フィールドと [Browse] ボタンをフォーム上に配置し、[Browse] ボタンがクリックされたときに、ユーザーがローカル マシンからファイル名を選択できるようにする | <input type=file runat=
server> |
| パスワード フィールド | HTML フォーム上の入力領域だが、このフィールドに入力された文字はアスタリスクとして表示される | <input type=password runat=
server> |
| チェックボックス | ユーザーが選択またはクリアできるチェック ボタンを提供する | <input type=checkbox runat=
server> |
| ラジオ ボタン | フォーム上に複数配置され、ユーザーがいずれかの 1 つのコントロールを選択できるようにする | <input type=radio runat=
server> |
| テーブル | 情報を表形式で提示することができる | <table runat=server></table> |
| イメージ | HTML フォーム上にイメージを表示する | <img src=”FileName” runat=
server> |
| リスト ボックス | ユーザーに対して項目のリストを表示する。2 以上の値のサイズを設定して、表示する項目の数を指定することができる。この制限よりも多くの項目が存在する場合には、コントロールに自動的にスクロール バーが追加される | <select size=2 runat=
server ></select> |
| ドロップダウン | ユーザーに対して項目のリストを表示する。ただし、表示されるのは一度に 1 項目のみである。ユーザーは、このコントロールの端にある下向き矢印をクリックして、項目のリストを表示することができる | <select><option></option></select> |
| 水平線 | HTML ページに水平の線を表示する | <hr> |
表 1. ASP.NET で利用できる HTML コントロール
これらすべてのコントロールは、Web フォームに標準の HTML を書き込みます。オプションとして各コントロールに ID 属性を割り当て、このタイプのコントロールに共通するイベントを処理するクライアント サイドの JavaScript コードを作成することができます。以下に、一般的なクライアント サイド イベントの例を示します。
| OnBlur: | コントロールがフォーカスを失った |
| OnChange: | コントロールの内容が変化した |
| OnClick: | コントロールがクリックされた |
| OnFocus: | コントロールがフォーカスを受け取った |
| OnMouseOver: | マウスがこのコントロールの上に置かれた |
Web フォーム コントロール
Web フォーム コントロールは、HTML コントロールと同じようにサーバー上で作成され、実行されます。設計時に指定された操作を実行した後に、適切な HTML をレンダリングし、その HTML を出力ストリームに送信します。たとえば、DropDownList コントロールを使うとデータ ソースにバインドすることができますが、レンダリングされる出力は、ブラウザに送信される場合には標準的な <SELECT> および <OPTION> タグとなります。これと同じ DropDownList コントロールが、ターゲットが携帯電話であるときには WML をレンダリングすることができます。これは、これらのコントロールが特定の 1 つのマークアップ言語にマッピングされているのではなく、適切なマークアップ言語をターゲットにできる柔軟性を備えているためです。
すべての Web フォーム コントロールは、System.Web.UI.WebControls という共通の基本クラスを継承します。この基本クラスは、これらすべてのコントロールが持つことになる共通プロパティのセットをインプリメントしています。以下に、これらの共通プロパティの例を示します。
- BackColor
- Enabled
- Font
- ForeColor
- Modifiers
- TabIndex
- Visible
- Width
これ以外にも、Microsoft .NET Framework が提供するコントロールのカテゴリが数種類存在します。一部のコントロールは、対応する HTML とほぼ 1 対 1 の関係を持っています。一部のコントロールはサーバーにポスト バックされるときに追加情報を提供し、一部のコントロールはデータをテーブルやリスト タイプの形式で表示します。表 2 に、Web フォームのサーバー サイド コントロールと、各コントロールで反応することができるサーバー サイド イベントのリストを示します。
|
コントロール
|
説明
|
よく使われるサーバー サイド イベント
|
Web フォームのコード例
|
|---|
| Label | テキストを HTML ページ上に表示する | なし | <asp:Label id=Label1 runat="server">
Label</asp:Label> |
| TextBox | ユーザーに HTML フォーム上の入力領域を提供する | TextChanged | <asp:TextBox id=TextBox1 runat="server">
</asp:TextBox> |
| Button | サーバー上のクリック イベントに応答するために使用される通常のボタン。CommandName および CommandArguments プロパティを設定することで、追加の情報を渡すことができる | Click, Command | <asp:Button id=Button1 runat="server" Text="Button">
</asp:Button> |
| LinkButton | サーバーへのポスト バックを行うという点ではボタンに似ているが、ハイパーリンクのような外見をしている | Click, Command | <asp:LinkButton id=LinkButton1 runat="server">
LinkButton</asp:LinkButton> |
| ImageButton | グラフィカル イメージを表示することができ、クリックされると、クリック時のイメージ内でのマウス座標などのコマンド情報をサーバーにポスト バックする | Click | <asp:ImageButton id=ImageButton1 runat="server">
</asp:ImageButton> |
| Hyperlink | クリック イベントに応答する通常のハイパーリンク コントロール | なし | <asp:HyperLink id=HyperLink1 runat="server">
HyperLink</asp:HyperLink> |
| DropDownList | HTML コントロールと似た通常のドロップダウン リスト コントロールだが、データ ソースにバインドすることができる | SelectedIndexChanged | <asp:DropDownList id=DropDownList1 runat="server">
</asp:DropDownList> |
| ListBox | HTML コントロールと似た通常の ListBox コントロールだが、データ ソースにバインドすることができる | SelectedIndexChanged | <asp:ListBox id=ListBox1 runat="server">
</asp:ListBox> |
| DataGrid | <TABLE> の強化版。データ ソースをこのコントロールにバインドすると、すべての列情報が表示される。また、このコントロールを使うと、改ページ、並べ替え、およびフォーマットをきわめて簡単に行える | CancelCommand, EditCommand, DeleteCommand, ItemCommand, SelectedIndexChanged, PageIndexChanged, SortCommand, UpdateCommand, ItemCreated, ItemDataBound | <asp:DataGrid id=DataGrid1 runat="server">
</asp:DataGrid> |
| DataList | テーブル以外のタイプのデータ形式を作成することができる。データをテンプレート項目にバインドすると、HTML の断片が一定の繰り返し形式に従って結合される | CancelCommand, EditCommand, DeleteCommand, ItemCommand, SelectedIndexChanged, UpdateCommand, ItemCreated, ItemDataBound | <asp:DataList id=DataList1 runat="server">
</asp:DataList> |
| Repeater | テーブル以外のタイプのデータ形式を作成することができる。データをテンプレート項目にバインドすると、HTML の断片が一定の繰り返し形式に従って結合される | ItemCommand, ItemCreated, ItemDataBound | <asp:Repeater id=Repeater1 runat="server">
</asp:Repeater> |
| CheckBox | ユーザーがチェックまたはアンチェックできるチェック ボックスを表示する、通常の HTML コントロールによく似たコントロール | CheckChanged | <asp:CheckBox id=CheckBox1 runat="server">
</asp:CheckBox> |
| CheckBoxList | 連係して動作するチェック ボックスのグループを表示する | SelectedIndexChanged | <asp:CheckBoxList id=CheckBoxList1 runat="server">
</asp:CheckBoxList> |
| RadioButton | ユーザーがチェックまたはアンチェックできるボタンを表示する、通常の HTML コントロールによく似たコントロール | CheckChanged | <asp:RadioButton id=RadioButton1 runat="server">
</asp:RadioButton> |
| RadioButtonList | 連係して動作するラジオ ボタンのグループを表示する | SelectedIndexChanged | <asp:RadioButtonList id=RadioButtonList1 runat="server">
</asp:RadioButtonList> |
| Image | ページ内にイメージを表示する、通常の HTML コントロールによく似たコントロール | なし | <asp:Image id=Image1 runat="server">
</asp:Image> |
| Panel | 他のコントロールのグループ化に使用される | なし | <asp:Panel id=Panel1 runat="server">
Panel</asp:Panel> |
| PlaceHolder | 他のサーバー サイド コントロールを実行時に動的に追加できる場所として機能する | なし | <asp:PlaceHolder id="PlaceHolder1" runat="server">
</asp:PlaceHolder> |
| Calendar | カレンダーの HTML バージョンを作成する。デフォルトの日付を設定したり、カレンダーの中で前方または後方に移動するといった操作を行うことができる | SelectionChanged, VisibleMonthChanged, DayRender | <asp:Calendar id=Calendar1 runat="server">
</asp:Calendar> |
| AdRotator | 表示する広告のリストを指定することができる。ユーザーがページを再表示するたびに、一連の広告が順番に表示される | AdCreated | <asp:AdRotator id=AdRotator1 runat="server">
</asp:AdRotator> |
| Table | 通常の HTML コントロールによく似たコントロール | なし | <asp:Table id=Table1 runat="server">
</asp:Table> |
| XML | HTML 内に XML ドキュメントを表示するために使用される。また、XML を表示する前に XSLT 変換を実行するためにも使用できる | なし | <asp:Xml id="Xml1" runat="server">
</asp:Xml> |
| Literal | リテラルを表示するという点でラベルに似ているが、実行時に新しいリテラルを作成し、それらをコントロールに格納することができる | なし | <asp:Literal id="Literal1" runat="server">
</asp:Literal> |
表 2. ASP.NET と Web フォーム内で使用されるサーバー サイド コントロール
すべてのコントロールが、検出されたユーザーのブラウザのタイプに基づいて、自らの出力を変更します。ユーザーのブラウザが Microsoft Internet ExplorerR ならば、何らかの DHTML エクステンションを使って、よりリッチなルック アンド フィールが生成されます。ダウンレベル ブラウザ (Internet Explorer 以外のもの) が検出された場合、ユーザーのブラウザには通常の HTML 3.2 標準の情報が送信されます。
フィールド検証コントロール
もう 1 つのタイプの Web フォーム コントロールは、ユーザーがバックエンド サーバーにデータを送信する前に、クライアント上でデータの妥当性確認を行います。ユーザーが HTML ページ上のコントロールのグループに何らかのデータを入力したとき、通常は ASP または ASP.NET のコードで妥当性を確認できるように、すべてのデータをサーバーに返送しなくてはなりません。値が入力されたかどうかを確認する目的に、この余分なラウンドトリップを行う代わりに、フィールド検証コントロールを使ってこのクライアント チェックを実行することができます。これらのコントロールは HTML ページにクライアント サイドの JavaScript コードを書き込み、値をラウンドトリップせずにチェックします。JavaScript はほとんどのブラウザ上で動作します。
|
コントロール
|
説明
|
HTML または JavaScript コードの例
|
|---|
| RequiredFieldValidator | フォーム上のコントロールをチェックして、何らかの入力が行われているかどうかを確認する。入力がなければ、設定された ErrorMessage がこのコントロールに表示される。 | <asp:RequiredFieldValidator id=RequiredFieldValidator1 runat="server" ErrorMessage="RequiredFieldValidator"> </asp:RequiredFieldValidator> |
| CompareValidator | 1 つのコントロールの内容を、フォーム上の別のコントロールの内容と比較して、両者が一致しているかどうかをチェックする。一致していなければ、設定された ErrorMessage がこのコントロールに表示される。 | <asp:CompareValidator id=CompareValidator1 runat="server" ErrorMessage="CompareValidator"> </asp:CompareValidato> |
| RangeValidator | コントロールに入力された値が、指定された範囲内に収まっているかどうかをチェックする。収まっていなければ、設定された ErrorMessage がこのコントロールに表示される。 | <asp:RangeValidator id=RangeValidator1 runat="server" ErrorMessage="RangeValidator"> </asp:RangeValidator> |
| RegularExpressionValidator | コントロールの内容が、定義された定型入力 (正規表現) と一致するかどうかをチェックする。一致していなければ、設定された ErrorMessage がこのコントロールに表示される。 | <asp:RegularExpressionValidator id=RegularExpressionValidator1 runat="server" ErrorMessage="RegularExpressionValidator"> </asp:RegularExpressionValidator> |
| CustomValidator | 特定のコントロールの内容の妥当性を確認するために使用する、サーバー サイドまたはクライアント サイドのスクリプト関数を指定することができる。これらの関数からは True または False の値を返さなくてはならない。True の値が返された場合には、処理が続行される。False の値が返された場合には、このコントロールに対して指定された ErrorMessage が表示される。 | <asp:CustomValidator id=CustomValidator1 runat="server" ErrorMessage="CustomValidator"> </asp:CustomValidator> |
| ValidationSummary | このフォーム上の他のすべてのバリデータ コントロールから、すべての ErrorMessage プロパティを自動的に収集し、それらを番号付きリスト、箇条書きリスト、または段落の形式で表示する。 | <asp:ValidationSummary id=ValidationSummary1 runat="server"></asp:ValidationSummary> |
表 3. フィールド検証コントロール
これらのフィールド検証コントロールは、サーバーへラウンドトリップせずにユーザーの入力をチェックするための便利なツールです。
カスタム コントロールの作成
.NET Framework の組み込みコントロールに加えて、独自のカスタム コントロールを作成することができます。たとえば、個々のメニュー項目がデータベースをもとにして構築されるメニュー システムを作成することができます。
Web フォームの動作
Windows フォームと同様に、Web フォームが初期化され、ロードされるときには、いくつかのイベントが一定の順序で発生します。また、ブラウザ内にレンダリングされたページとユーザーの相互作用に反応して発生するイベントもあります。標準的な ASP や HTML が作成され、ブラウザに送信されるプロセスを考えると、すべてが直線的なトップダウンの形式で処理されると思うかもしれません。しかし、Web フォームではまったく違った形の処理が行われます。
Windows フォームと同様に、Web フォームは標準的なロード、描画 (レンダリング) およびアンロードのタイプのイベントを順番に発生します。このプロセスの中で、クラス モジュールの中のそれぞれ異なるプロシージャが呼び出されます。クライアント ブラウザからページが要求されると、.ASPX ページの中のタグとページ コードの中のタグの両方がロードされ、処理されます。
第 1 に、Init イベントが、.ASPX ファイルのタグの記述に従ってページを初期状態に設定します。ページが自分自身にポスト バックする場合、Init は "viewstate" に格納されていたページ状態の復元も行います。望むならば、コードは Page_Init() イベントを処理して、ページの初期状態をさらにカスタマイズすることもできます。
次に、Load イベントが発生します。Load イベントを使うと、このページが初めてロードされたのか、またはユーザーがページ上のボタンやその他のコントロールをクリックしたために起こったポスト バックなのかを判断することができます。データのコントロールへのバインディングなどの一部の初期化操作は、最初のページ ロードでのみ行います。
次に、ページがポスト バックされていた場合に限り、コントロール イベントが発生します。まず最初に "change" イベントが発生します。これらのイベントはブラウザ内で蓄積され、ページがサーバーに送信されたときにのみ実行されます。例としては、テキスト ボックス内のテキストの変更や、リストの選択などがあります。
次に、ページがポスト バックされていた場合に限り、ページのポスト バックを引き起こしたコントロール イベントが発生します。ポスト バック イベントの例としては、ボタンのクリックや、チェックボックスの CheckedChanged イベントのような "autopostback" 変更イベントがあります。
次に、ページがブラウザに対してレンダリングされます。ページがポスト バックを通して再び呼び出されたときに、ASP.NET がページを前の状態に戻せるように、ページ内の隠されたフィールドにいくつかの状態情報 ("viewstate") が格納されます。
ページの破棄の前にコードが処理できる最後のページ イベントが Page_Unload() です。ページはすでにレンダリングされているので、このイベントは一般にクリーンアップとログ記録のタスクの実行にのみ使用されます。最後に、実行中のページを表すクラスが破棄され、ページはサーバー メモリからアンロードされます。
.ASPX ページまたはそのコードを変更した場合、そのページを表す動的に生成される DLL は、次にページが要求されたときに再生成されます。この DLL は、生成されるたびにディスクに格納されます。
Global.asax
Global.asax ファイルは ASP の Global.asa ファイルに似ていますが、ASP.NET には多数のイベントが追加されています。また、Global.asax ファイルは ASP のようにインタプリタ形式で解釈されるのではなく、コンパイルされています。Web サイト上で特定のイベントが発生したときに、Global.asax ファイル内でイベント プロシージャが発生するのはいままでと同じです。次のリストは、Global.asax ファイル内の利用可能なイベント プロシージャを示しています。
|
イベント プロシージャ
|
説明
|
|---|
| Application_Start | 最初のユーザーが Web サイトを訪れたときに発生する。 |
| Application_End | サイトのセッションの最後のユーザーがタイムアウトを起こしたときに発生する。 |
| Application_Error | アプリケーション内で処理されないエラーが発生したときに発生する。 |
| Session_Start | 新しいユーザーが Web サイトを訪れたときに発生する。 |
| Session_End | ユーザーのセッションがタイムアウトを起こすか終了したときに発生する。 |
| Application_AcquireRequestState | ASP.NET が、現在の要求に関連付けられた現在の状態 (セッション状態など) を取得したときに発生する。 |
| Application_AuthenticateRequest | セキュリティ モジュールがユーザーのアイデンティティを確立したときに発生する。 |
| Application_AuthorizeRequest | セキュリティ モジュールがユーザー承認を確認したときに発生する。 |
| Application_BeginRequest | ASP.NET が要求の処理を開始したときに、要求関連の他のイベントよりも前に発生する。 |
| Application_Disposed | ASP.NET が、要求への応答の際に、実行のチェーンを完了したときに発生する。 |
| Application_EndRequest | 要求の処理中に、要求関連の他のイベントの後に、最後のイベントとして発生する。 |
| Application_PostRequestHandlerExecute | ASP.NET ハンドラ (ページ、XML Web サービス) が実行を終了した直後に発生する。 |
| Application_PreRequestHandlerExecute | ASP.NET が、ページや XML Web サービスなどのハンドラを実行する直前に発生する。 |
| Application_PreSendRequestContent | ASP.NET がクライアントにコンテンツを送信する直前に発生する。 |
| Application_PreSendRequestHeaders | ASP.NET がクライアントに HTTP ヘッダーを送信する直前に発生する。 |
| Application_ReleaseRequestState | ASP.NET がすべての要求ハンドラの実行を終了した後に発生する。このイベントを受けて、状態モジュールは現在の状態データを保存する。 |
| Application_ResolveRequestCache | ASP.NET が、承認イベントを完了した後に発生する。これを受けて、キャッシング モジュールは、ハンドラ (ページ、Web サービスなど) の実行をバイパスし、要求への応答にキャッシュを使用するようになる。 |
| Application_UpdateRequestCache | ASP.NET がハンドラの実行を終了した後に発生する。これを受けて、キャッシング モジュールは、それ以降のキャッシュからの応答に使用される応答を格納する。 |
表 4. Global.asax 内の利用可能なイベント プロシージャ
Web フォームの作成
例として、ユーザーがファースト ネームとラスト ネームを入力するための Web フォームを作成してみましょう。ユーザーが Web ページの 2 つのテキスト フィールドにデータを入力した後に [Login] ボタンをクリックすると、[Login] ボタンの下のラベルにそのデータが「ラスト ネーム、ファースト ネーム」の形式で表示されるようにします。
図 2 は、ここで使用するサンプルのログイン Web フォームを示しています。
.gif)
図 2. 入力されたデータをラベル コントロールに表示するサンプル
ログイン フォームを作成するためのステップ
まず最初に、Visual Studio で新しい Web アプリケーション プロジェクトを作成する必要があります。
- Visual Studio を起動し、スタート ページの [新しいプロジェクト] をクリックします。
- 左のツリービューで [Visual Basic プロジェクト] を強調表示します。
- [テンプレート] ウィンドウの [Web アプリケーション] をクリックします。
- このプロジェクトの名前として WebForms101 と入力します。
- この Web サイトを作成したいマシン上の位置を選択します。
- [OK] をクリックして、新しい Web アプリケーション プロジェクトの作成プロセスを開始します。
- Visual Studio プロジェクトに WebForm1.asp という名前の Web フォームが作成されているはずです。このフォームの名前を Login.asp に変更します。
- ツールボックスを起動し、適切なコントロールを追加し、これらのコントロールのプロパティを表 5 に従って設定することで、図 3 のようなフォームを作成します。
|
コントロール タイプ
|
プロパティ
|
値
|
|---|
| Label | Name | Label1 |
| | Text | First Name |
| TextBox | Name | txtFirst |
| | Text | |
| Label | Name | Label2 |
| | Text | Last Name |
| TextBox | Name | txtLast |
| | Text | |
| Button | Name | btnSubmit |
| | Text | Login |
| Label | Name | lblName |
| | BorderStyle | Insert |
| | Text | |
表 5. ログイン フォームの作成に使用するコントロール
この時点で、このアプリケーションを実行して、Web フォームをブラウザ内で表示することができます。このページにはまだ何の機能も含まれていませんが、現時点ですべてが正しく処理されていることを確認する良い機会となります。
-
F5 キーを押して、このサンプル アプリケーションを実行します。
- スタート ページが必要であることを通知するエラー メッセージが表示されたら、Login.asp ページでマウスを右クリックし、コンテキスト メニューから [スタートページに設定] を選択します。
これでブラウザ内に Web フォームが表示され、2 つのテキスト フィールドにデータを入力できるようになります。この時点では、[Login] ボタンをクリックしても、何の処理も行われません。次に、この [Login] ボタンに何らかの処理を行わせる方法を説明します。
ボタンへのコードの追加
ボタンにコードを追加して、このボタンがテキスト ボックスに入力されたデータをポストし、ボタンの下のラベルに適切なデータを格納するようにします。
- ブラウザを閉じて、プログラムを停止します。
- Login ページをデザイン モードで表示して、Login ボタン コントロールをダブルクリックします。コード ウィンドウにイベント プロシージャ btnSubmit が表示されるはずです。カーソル位置でクリックを行います。
- Click イベント プロシージャに次のコードを入力します。
Public Sub btnSubmit_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles btnSubmit.Click
lblName.Text = txtLast.Text & ", " & txtFirst.Text
End Sub>
ここでは、txtLast と txtFirst のテキスト ボックスから Text プロパティを取得し、そのデータを [Login] ボタンの下のラベル コントロールに格納しています。Visual Basic プログラミングの経験がある人は、簡単に理解できるでしょう。実際、.NET の大きな利点は、Microsoft Windows® アプリケーションと Web アプリケーションの両方で同じコードが使用できるという点にあります。
要約
HTML ページ、ASPX (Web フォーム) ページ、HTML コントロール、および Web フォーム コントロールにより、ASP.NET できわめて堅牢なスケーラビリティと柔軟性を備えた素晴らしいラピッド アプリケーション開発 (RAD) 環境が実現されます。開発環境とプログラミング モデルは同じなので、ASP.NET への移行は、Visual Basic 6.0 から ASP 開発への移行よりも簡単に行うことができます。