最も単純なイベント処理

いよいよサーバーサイドコントロールの大きな目玉機能である、イベント処理を試していきましょう。

前回のページで作った Web フォームを機能拡張します。

ここで作るのは次のページです。

テキストボックスに文字を入力して OK ボタンを押すと・・・

ラベルに入力した文字が表示されます。また、テキストボックスには入力した文字がそのまま残っていることにも注意してください。

これを実現するにはどのように書いたらよいでしょうか？HTML をご存知の方はちょっと考えてみてください。

普通こうしたページを実現するなら・・・

フォームのサブミットボタンを押して、サーバーに入力データを POST します・・・
POST データを読み取り・・・
そのポストデータをテキストボックスやボタンのあるその下側へ出力する・・・
テキストボックスにも文字を残すために、テキストボックス (input タグの type="text") にも同じデータをセットする・・・

という手続きが必要ですよね。

では、こうした流れがサーバーサイドコントロールによってどのように単純化されるでしょうか。

上記を実現するコードは次のとおりです。

<%@ Page Language="C#" %>
<html>
<script runat="server">

protected void button1_OnClick(object sender, EventArgs e){

     label1.Text = textbox1.Text;

}

</script>
<body>
<form runat="server">
<p>
<asp:TextBox runat="server" id="textbox1"/>
<asp:Button runat="server" id="button1" Text="OK" OnClick="button1_OnClick"/><br>
<asp:Label runat="server" id="label1" BackColor="#aaaaaa" Width="150px"/>
</p>
</form>
</body>
</html>

たったこれだけです。

もう一度イベント処理を追加する前のコードと見比べましょう。

<%@ Page Language="C#" %>
<html>
<body>
<form runat="server">
<p>
<asp:TextBox runat="server" id="textbox1"/>
<asp:Button runat="server" id="button1" Text="OK" /><br>
<asp:Label runat="server" id="label1" BackColor="#aaaaaa" Width="150px"/>
</p>
</form>
</body>
</html>

結局、追加されたコードは次の黄色の部分です。

<%@ Page Language="C#" %>
<html>
<script runat="server">

protected void button1_OnClick(object sender, EventArgs e){

     label1.Text = textbox1.Text;

}

</script>
<body>
<form runat="server">
<p>
<asp:TextBox runat="server" id="textbox1"/>
<asp:Button runat="server" id="button1" Text="OK" OnClick="button1_OnClick"/><br>
<asp:Label runat="server" id="label1" BackColor="#aaaaaa" Width="150px"/>
</p>
</form>
</body>
</html>

ボタンコントロールの OnClick 属性として、ボタンをクリックしたときのイベントハンドラ名を指定しています。

そして、イベントハンドラ (ここでは button1_OnClick という名前の関数) は runat="server" とマークされた script タグ内に書かれています。 runat="server" という属性が設定された script はサーバー側で実行されますから、C# や VB.NET などの言語で記述できます。

こうすることで、ボタンをクリックしたときに処理をする内容を記述できるのです。

テキストボックスに入力された文字には、テキストボックスの Text 属性でアクセス可能です。また、ラベルに表示される文字はラベルの Text 属性です。

従ってここでは、ラベルの Text 属性に、テキストボックスの Text 属性の値を設定しています。これだけで、テキストボックスの値を取得して、ラベルにセットするということが可能なのです。また、テキストボックスには文字は自動的に残りますので、開発者は特に何もする必要はありません。

いかがでしょうか？ ASP.NET を使うとこのようにイベント処理が簡単に行えるのです。