ユーザコントロールにイベントを関連づける方法

概要

ASP.NET のユーザコントロールは、既存のコントロールをデザイナから貼り付けるだけで簡単に作成することができます。カスタムコントロールの簡易版として利用されることも多いですが、少し複雑なことを仕様とするとすぐに行き詰まってしまう方が多いようです。

そこで本記事では、ユーザコントロール内部のコントロールに、外部 (.aspx 側など) からイベントを関連づける方法について説明します。サンプルでは、テキストボックスを 1 個持ったユーザコントロールを作成します。そして、追加したテキストボックスにイベントを関連づけられるようにします。

ユーザコントロールの作成

通常の方法でユーザコントロールを作成 *1 します。作成された ascx ファイルにテキストボックスを 1 つ追加します。追加後の ascx ファイルは、以下のようになります。

<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="InnerTextBox.ascx.cs" Inherits="UserControl_InnerTextBox" %>
<asp:TextBox ID="TextBoxMain" runat="server"></asp:TextBox>

次に、コードビハインド側 (ascx.cs) にコードを追加し、テキストボックスにイベントを関連づけられるようにします。追加後のコードは以下のようになります。

このサンプルで注目する場所は、 TextChanged イベントです。 (AutoPostBack プロパティと Text プロパティはおまけです。) 以下のサンプルのように、 add と remove でイベントを関連づけられるようにするのがポイントです。以上で、 (単にテキストボックスの機能を外部に公開するだけの) ユーザコントロールが完成しました。

public partial class UserControl_InnerTextBox : System.Web.UI.UserControl
{
    public bool AutoPostBack
    {
        get { return TextBoxMain.AutoPostBack; }
        set { TextBoxMain.AutoPostBack = value; }
    }

    public event EventHandler TextChanged
    {
        add
        {
            TextBoxMain.TextChanged += value;
        }
        remove
        {
            TextBoxMain.TextChanged -= value;
        }
    }

    public string Text
    {
        get { return TextBoxMain.Text; }
        set { TextBoxMain.Text = value; }
    }
}

使用サンプル

上記で作成したユーザコントロール (InnerTextBox) の使用サンプルは、以下のようになります。ここでは、値が変更されたときに自動でポストバックを発生させる設定 (AutoPostBack) にしています。また、値変更時のイベント (OnTextChanged) を割り当てています。

<uc1:InnerTextBox ID="InnerTextBoxSample" runat="server" AutoPostBack="true" OnTextChanged="InnerTextBoxSample_TextChanged" />

コードビハインド側は、以下のようになります。 OnTextChanged イベントに割り当てたメソッドを定義しています。ここでは単純に、変更された値をデバッグウィンドウへ出力しています。

protected void InnerTextBoxSample_TextChanged(object sender, EventArgs e)
{
    System.Diagnostics.Debug.WriteLine(InnerTextBoxSample.Text);
}

*1:やり方は何でもいいですが、「新しい項目の追加」-「Web ユーザーコントロール」など