Webフォーム

　ユーザーに対して表示をしたり、入力させたりする画面にはいくつかの種類があります。Windows用のアプリケーションの場合は、Windowsフォームと呼びます。今回のようにWeb用のアプリケーションの場合は、Webフォームと呼びます。このフォームに対して必要なコントロールを配置します。

　では、まず、このWebフォームについて詳しく見てみましょう。

プロジェクトの種類 ASP.NET Webアプリケーション
プロジェクト名 WebFormTest

サンプルダウンロード

○　デザイン

　Webフォーム「index.aspx」を追加し、TextBoxコントロールを配置してください。

コントロールの配置例
コントロールの配置例

　今回作成した作成したWebフォームについて、詳しく見てみましょう。

■　コードビハインド

　WebページではひとつのファイルにHtmlタグとプログラムコードを記述することが可能です。しかし、そのようにしてしまうと、読みにくいコードとなってしまい、メンテナンスやバグを修正するのに手間がかかってしまう可能性があります。コードビハインドは、Htmlタグとプログラムコードを別のファイルに記述することで、ファイルの読みやすさを向上させる仕組みです。

　Htmlコードの1行目を見てください。

　<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="index.aspx.vb" Inherits="WebFormTest.index" %>

　この「<%」と「%>」で囲まれた部分は「インライン表示ブロック」とよばれ、ASP.NETプログラムコードであることを示しています。「@ Page」はWebページの属性を指定するためのディレクティブ(命令)です。

　その後に続く記述は属性指定になりますが、その中で「CodeBehind」は、プログラムコードを記述したファイルの名前を指定する属性です。「ソリューションエクスプローラー」で、確認してみましょう。「Inherits」はWebページの処理にどのクラスを利用するのかを表す属性です。「Language」はページ内の全てのインライン表示ブロックと、コード宣言ブロックをコンパイルする際に使用するコードになります。「AutoEventWireup」はWebページで発生するイベントと、プログラム内のメソッドを自動的に関連付けるかどうかをあらわすものです。

　ここまで見てきた@Pageディレクティブは特に開発時に手作業で変更はしません。Visual Studioが設定を行ってくれます。

　図で表すと次のようなイメージになります。

Webページとコードの関係
Webページとコードの関係

■　イベントとイベントハンドラ

　Webページに配置されたコントロールが操作されると、ポストバックが発生してその時のイベントに関連付けられたメソッドが実行されます。このメソッドのことをイベントハンドラと呼びます。これは、コントロールを配置するとその仕組みが自動的に記述されるようになっています。開発者は、どのコントロールに対してどのようなイベントが発生したので、どのような処理をするかということを考えて記述することになります。先回のサンプルでは、「画面が読み込まれたら」というイベントの処理を記述しました。

■　WebサーバーコントロールとHtmlコントロール

　Webページには2種類のコントロールを配置することができます。それはWebサーバーコントロールとHtmlコントロールです。

・　Webサーバーコントロール

　Webサーバーでイベントを処理することを主な目的としています。サンプルのHtmlコードを表示してみてください。次のような一文が見つかります。

　<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

　このタグは、Webサーバーコントロールであることを表すものです。「asp:TextBox」が、Webサーバーコントロールのテキストボックスであることを表しています。「ID」はこのコントロールをプログラム中から利用するための名前です。「runat="server"」はサーバー側で処理が行われることを示すものです。そのほかは、テキストボックスのサイズや位置などの属性に関する情報も付加されます。サーバーのコントロールなので、この属性を消してしまうと、表示もされなくなってしまいます。

　Webサーバーコントロールは、Htmlタグに展開されたうえでWebブラウザーに表示されます。展開は、Webブラウザーが利用できる種類の能力に応じて行われます。

・　Htmlコントロール

　イベントに対応していません。普通のHtml用の部品ということになります。WebサーバーコントロールからHtmlコントロールにアクセスすることができます。

　Htmlコントロールにアクセスする手順を見てみましょう。

○　デザイン(Text)

　WebフォームにHtmlコントロールの「Input(Text)」を配置してください。

コントロールの配置例
コントロールの配置例

○　Htmlソース(Htmlコントロール)

 

　このままではクライアント側で表示をするのみとなってしまいますので、Webサーバー側で利用できるように属性の追加を行ってください。

index.aspx

  1. <body>
  2. 　<form id="form1" runat="server">
  3. 　　<div>
  5. 　　　<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  6. 　　　<br />
  7. 　　　<br />
  8. 　　<input id="Text1" type="text" runat="server" /><br />
  9. 　</form>
  10. </body>

○　デザイン(Button)

　次にボタンを配置してください。

 

コントロールの配置例
コントロールの配置例

○　プログラム

　Buttonコントロールをクリックしたときの処理を記述してください。

index.aspx.vb

  1. Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
  2. 　'HtmlコントロールにWebサーバーコントロールの入力内容を表示
  3. 　Me.Text1.Value = Me.TextBox1.Text
  4. End Sub
 

○　実行結果

実行結果
実行結果

○　解説

　上段のテキストボックスに入力してボタンを押すと、下段のテキストボックスに表示されます。10行目で、Text1はHtmlコントロールを表します。Valueプロパティを使ってこのコントロールの値にアクセスできます。TextBox1はWebサーバーコントロールを表します。このコントロールはTextプロパティを使って値にアクセスできます。

　ここまで見てきたように、コントロールの種類にはいくつかあります。これをどのように使い分けるのでしょうか？Htmlコントロールはイベントを処理する必要がなく、値の取得や表示だけをしたい場合に利用できます。Webサーバーコントロールはサーバー側でイベントなどの処理を行わせる用途で利用します。

前へ   次へ