ASP.NET ユーザー コントロールの概要

  • [アーティクル]

更新 : 2007 年 11 月

コントロールで、組み込みの ASP.NET Web サーバー コントロールが提供していない機能が必要になる場合があります。このような場合は、独自のカスタム コントロールを作成します。これには、2 つの方法があります。次のコントロールを作成できます。

  • ユーザー コントロール。ユーザー コントロールは、マークアップと Web サーバー コントロールを配置できるコンテナです。ユーザー コントロールは単体として扱うことができるので、それに対してプロパティとメソッドを定義できます。

  • カスタム コントロール。カスタム コントロールは、それが Control または WebControl から派生することをユーザーが記述するクラスです。

ユーザー コントロールは既存のコントロールを再利用できるので、カスタム コントロールより簡単に作成できます。ユーザー コントロールを使用すると、特に複雑なユーザー インターフェイス要素を含むコントロールを簡単に作成できます。

ここでは、ASP.NET ユーザー コントロールの使用方法の概要について説明します。

ユーザー コントロールの構造

ASP.NET Web ユーザー コントロールには、完全な ASP.NET Web ページ (.aspx ファイル) と同様のユーザー インターフェイス ページとコードがあります。ユーザー コントロールは ASP.NET ページとほとんど同じ方法で作成でき、その後に必要なマークアップと子コントロールを追加できます。ユーザー コントロールには、ページと同様に、データ連結などのタスクの実行を含むコンテンツを操作するコードを追加できます。

ユーザー コントロールは、次の点で ASP.NET Web ページと異なります。

  • ユーザー コントロールのファイル名の拡張子は .ascx です。

  • ユーザー コントロールには、@ Page ディレクティブの代わりに、構成およびその他のプロパティを定義する @ Control ディレクティブが含まれます。

  • ユーザー コントロールをスタンドアロン ファイルとして実行することはできません。代わりに、ユーザー コントロールは、他のコントロールと同様に ASP.NET ページに追加する必要があります。

  • ユーザー コントロールに html、body 要素や form 要素はありません。これらの要素は、ホスト ページに記述する必要があります。

ユーザー コントロールには、ASP.NET Web ページと同じ HTML 要素 (html、body、または form 要素を除く) および Web コントロールを使用できます。たとえば、ツール バーとして使用するユーザー コントロールを作成する場合は、コントロールに一連の Button Web サーバー コントロールを配置し、各ボタンのイベント ハンドラを作成できます。

ユーザーが上下矢印ボタンをクリックしてテキスト ボックスの一連の候補を順次選択できるスピン コントロールを実装するユーザー コントロールの例を次に示します。

fb3w5b53.alert_security(ja-jp,VS.90).gifセキュリティに関するメモ :

この例には、ユーザー入力を受け付けるテキスト ボックスがあるため、セキュリティ上の脅威になる可能性があります。既定では、ASP.NET Web ページは、ユーザー入力にスクリプトまたは HTML 要素が含まれていないことを検証します。詳細については、「スクリプトによる攻略の概要」を参照してください。

 
<%@ Control Language="VB" ClassName="UserControl1" %>
<script runat="server">
    Protected colors As String() = {"Red", "Green", "Blue", "Yellow"}
    Protected currentColorIndex As Integer = 0
    Protected Sub Page_Load(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If IsPostBack Then
            currentColorIndex = CInt(ViewState("currentColorIndex"))
        Else
            currentColorIndex = 0
            DisplayColor()
        End If
    End Sub
    
    Protected Sub DisplayColor()
        textColor.Text = colors(currentColorIndex)
        ViewState("currentColorIndex") = currentColorIndex.ToString()
    End Sub

    Protected Sub buttonUp_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If currentColorIndex = 0 Then
            currentColorIndex = colors.Length - 1
        Else
            currentColorIndex -= 1
        End If
        DisplayColor()
    End Sub
    
    Protected Sub buttonDown_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If currentColorIndex = colors.Length - 1 Then
            currentColorIndex = 0
        Else
            currentColorIndex += 1
        End If
        DisplayColor()
    End Sub
</script>
<asp:TextBox ID="textColor" runat="server" 
    ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp" runat="server"  
    Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown" runat="server" 
    Text="v" OnClick="buttonDown_Click" />

<% @ Control Language="C#" ClassName="UserControl1" %>
<script runat="server">
    protected int currentColorIndex;
    protected String[] colors = {"Red", "Blue", "Green", "Yellow"};
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            currentColorIndex = 
                Int16.Parse(ViewState["currentColorIndex"].ToString());
        }
        else
        {
            currentColorIndex = 0;
            DisplayColor();
        }
    }
    
    protected void DisplayColor()
    {
        textColor.Text = colors[currentColorIndex];
        ViewState["currentColorIndex"] = currentColorIndex.ToString();
    }
    
    protected void buttonUp_Click(object sender, EventArgs e)
    {
        if(currentColorIndex == 0)
        {
            currentColorIndex = colors.Length - 1;
        }
        else
        {
            currentColorIndex -= 1;
        }
        DisplayColor();
    }

    protected void buttonDown_Click(object sender, EventArgs e)
    {
        if(currentColorIndex == (colors.Length - 1))
        {
            currentColorIndex = 0;
        }    
        else
        {
            currentColorIndex += 1;
        }
        DisplayColor();
    }
</script>
<asp:TextBox ID="textColor" runat="server" 
    ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp" runat="server" 
    Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown" runat="server" 
    Text="v" OnClick="buttonDown_Click" />

ユーザー コントロールは ASP.NET ページによく似ており、いくつかのコントロール (1 つの TextBox コントロール、2 つの Button コントロール)、およびボタンの Click イベントとページの Load イベントを処理するコードが含まれます。ただし、ユーザー コントロールにはコントロールのためのマークアップ以外のマークアップは含まれず、@ Page ディレクティブの代わりに @ Control ディレクティブが含まれます。

ページへのユーザー コントロールの追加

ユーザー コントロールは、ホスト ページに登録することによってページに追加します。ユーザー コントロールを登録するには、ユーザー コントロールを含める .ascx ファイル、タグ プリフィックス、およびページでユーザー コントロールを宣言するために使用するタグ名を指定します。詳細については、「方法 : ASP.NET Web ページにユーザー コントロールを含める」を参照してください。

ユーザー コントロールのプロパティとメソッドの定義

ユーザー コントロールのプロパティとメソッドは、ページと同様に定義できます。ユーザー コントロールのプロパティを定義すると、コードでプロパティを宣言的に設定できます。

ユーザー コントロールのイベント

ユーザー コントロールに Web サーバー コントロールが含まれる場合、子コントロールで発生するイベントを処理するためのコードをユーザー コントロールに記述できます。たとえば、ユーザー コントロールに Button コントロールが含まれる場合は、ユーザー コントロールにボタンの Click イベントのハンドラを作成できます。

既定では、ユーザー コントロールの子コントロールで発生するイベントをホスト ページで使用することはできません。ただし、ユーザー コントロールのイベントを定義して発生させると、ホスト ページにそのイベントを通知できます。この方法は、クラスのイベントを定義する場合と同じです。詳細については、「イベントの発生」を参照してください。

外部リソースの参照

ユーザー コントロールが実行されると、ユーザー コントロールの URL をベース URL として使用して、イメージや他のページのアンカーなどの外部リソースの参照が解決されます。たとえば、ImageUrl プロパティを Images/Button1.gif に設定した Image コントロールがユーザー コントロールに含まれる場合、イメージの URL がユーザー コントロールの URL に追加されてイメージのパスが完全なパスに解決されます。ユーザー コントロールがユーザー コントロール自身のサブフォルダにないリソースを参照する場合、実行時に正しいフォルダに解決されるパスを提供する必要があります。ASP.NET サーバー コントロールのパス指定の詳細については、「ASP.NET Web サイトのパス」を参照してください。

キャッシュとユーザー コントロール

ユーザー コントロールは、ホスト ページとは異なるキャッシュのディレクティブをサポートします。したがって、ユーザー コントロールをページに追加し、ページの一部をキャッシュできます。詳細については、「ASP.NET ページの一部だけのキャッシュ」を参照してください。

参照

その他の技術情報

ASP.NET ユーザー コントロール