Web フォームとは？
ASP.NET では Web フォーム (Web Forms) という仕組みがあります。 Web フォームを活用することで、 一般的な Web アプリケーション開発時に直面しがちな様々な問題を簡単に解決することができます。
Web フォームは、主にサーバー・サイド・コントロール (server-side control) から構成される Web ページのことを言います。 サーバー・サイド・コントロールというのは、以下に具体例で説明するような、テキストボックスコントロール、ボタンコントロールといったコントロールのことを指します。
さっそくサーバーサイドコントロールを実際に使ってみましょう。
次のコードを webform-test1.aspx として保存します。
<%@ Page Language="C#" %> <html> <body> <form runat="server"> <p> <asp:TextBox runat="server" id="textbox1" Text="テキストです"/><br> <asp:Label runat="server" id="label1" Text="ラベルです"/><br> <asp:Button runat="server" id="button1" Text="ボタンです"/> </p> </form> </body> </html>
これを実行すると次のように、テキストボックス、文字、ボタンが表示されます。
ここで表示された、テキストボックス、文字、ボタンはそれぞれ、 asp:TextBox、asp:Label、asp:Button という 「サーバー・サイド・コントロール」 によって作られています。
パッと見て、あたかも普通の HTML のようです。 "普通の" HTML、あるいはこれまで見てきた ASP.NET コードとどこが違うでしょうか。よーく見てみましょう。
<%@ Page Language="C#" %> <html> <body> <form runat="server"> <p> <asp:TextBox runat="server" id="textbox1" Text="テキストです"/><br> <asp:Label runat="server" id="label1" Text="ラベルです"/><br> <asp:Button runat="server" id="button1" Text="ボタンです"/> </p> </form> </body> </html>
黄色でマークしたところが、「なんだこれ？」 というところではないでしょうか。
このような ASPX ファイルを実行すると、最終的に次のような HTML が出力されます。 (HTML は改行、インデントは修正しています）
<html> <body> <form method="post" action="webform-test1.aspx" id="ctl00"><div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEyNTUzOTM3MzRkZL8OWiUM6G228Uzz4RNy1ZLu0CeIic03VSfsxPsNFqGM" /> </div> <div class="aspNetHidden"> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKuy6ynCAKsyrLrBgKs34rGBmDVxELK4b3ZUUG66IQVWrZqKpJ5kikUowSK4zUjLGSR" /> </div><p> <input name="textbox1" type="text" value="テキストです" id="textbox1" /><br> <span id="label1">ラベルです</span><br> <input type="submit" name="button1" value="ボタンです" id="button1" /> </p> </form> </body> </html>
このように、 ASPX ファイルを実行すると、最終的に標準的な HTML (あるいは JavaScript) として出力されるんだ、ということを忘れないようにしてください。
ASP.NET、サーバー・サイド・コントロール等々・・・いろんな言葉が出てきて、なにやら特殊なおまじないを使っているような感覚になって、 最終的に "普通の" HTML が出来上がるんだ、ということを忘れてしまいがちですからね。
上から順番に説明します。
まずは、form タグ。 runat="server" という属性が付いています。 runat="server" という属性の付いたタグはサーバー側、つまり ASP.NET が処理します。
form タグの場合、最終的に生成された HTML と見比べてもらえばわかりますが、 もともとは・・・
<form runat="server">
としか書いていないものが、
<form method="post" action="webform-test1.aspx" id="ctl00">
という風に展開されています。
通常サーバーサイドコントロールは runat="server" 付きの form 要素の中に記述します。 Web フォームを利用する ASP.NET ページでは、一度にひとつの runat="server" 付きの form 要素が利用できます。（visible でなければ複数同時に存在可能） 今回はひとつの form タグの中に三つのサーバーサイドコントロールが記述されています。
<asp:TextBox runat="server" id="textbox1" Text="テキストです"/><br> <asp:Label runat="server" id="label1" Text="ラベルです"/><br> <asp:Button runat="server" id="button1" Text="ボタンです"/>
ここに三つのサーバー・サイド・コントロールが配置されています。 TextBox (テキストボックス)、Label (ラベル)、Button (ボタン) です。
全て、runat="server" という指定と、id、Text という属性が指定されています。
それぞれのコントロールの詳細については別のページで説明します。ここでは、サーバーサイドコントロールは、 asp: から始まるタグとして表現され、 ASPX ページの form タグ内に記述されるということを覚えておいてください。
これだけ見ると、単に HTML の標準のタグから ASP.NET 専用のタグに置き換わっただけのように思えてしまいますが、 実際はそれ以上にさまざまな機能が利用できます。詳細はまた後ほど説明します。