チュートリアル : ASP.NET ユーザー コントロールによる再利用可能な要素の作成

  • [アーティクル]

更新 : 2007 年 11 月

ASP.NET ユーザー コントロールを使用すると、複数のサーバー コントロールの機能を 1 つの単位としてカプセル化できます。ユーザー コントロールは、1 つ以上の ASP.NET サーバー コントロール (Button コントロール、TextBox コントロールなど) と、機能を実行するためにコントロールに必要なコードで構成されています。ユーザー コントロールには、ユーザー コントロールの機能 (通常は ASP.NET ページ) をコンテナに公開するカスタム プロパティまたはメソッドも含まれています。

このチュートリアルでは、ピッカー コントロールとして機能する ASP.NET ユーザー コントロールを作成します。ピッカー コントロールには 2 つのリストがあり、一方のリスト (ソース) には選択肢のセットが格納されています。ユーザーは [SourceList] ボックスの項目をクリックし、その項目を [TargetList] ボックスに追加できます。

このチュートリアルは、次のように 3 つの部分に分かれています。

  • 最初に、基本的なユーザー コントロールを作成して、コントロールとコードを追加します。

  • 次に、新しい ASP.NET ページ (ホスト ページ) を作成して、ユーザー コントロールを ASP.NET ページに追加します。

  • 最後に、ホスト ページからコントロールと対話できるように、カスタム プロパティとメソッドをユーザー コントロールに追加します。

このチュートリアルでは、以下のタスクを行います。

  • ユーザー コントロールの作成とユーザー コントロールへの ASP.NET サーバー コントロールの追加

  • ユーザー コントロールでのプロパティとメソッドの作成

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

  • ユーザー コントロールを処理するホスト ページへのコードの追加

前提条件

このチュートリアルを実行するための要件は次のとおりです。

  • Microsoft Visual Web Developer Web 開発ツール

  • Microsoft .NET Framework

このチュートリアルは、Visual Web Developer での作業に関する一般的な知識があることを前提としています。概要については、「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を参照してください。

Web サイトの作成

「チュートリアル : Visual Web Developer での基本的な Web ページの作成」などを完了して Visual Web Developer で既に Web サイトを作成済している場合は、その Web サイトを使用して、次のセクションに進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

ファイル システム Web サイトを作成するには

  1. Visual Web Developer を開きます。

  2. [ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  3. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  4. 右端の [場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。

    たとえば、フォルダ名として「C:\WebSites」と入力します。

  5. [言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。

  6. [OK] をクリックします。

    Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

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

ユーザー コントロールの作成は、ASP.NET Web ページの作成に似ています。実際には、ユーザー コントロールは ASP.NET ページのサブセットであり、ASP.NET ページに配置するほとんどの種類の要素を格納できます。

ユーザー コントロールを作成するには

  1. ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。

  2. [新しい項目の追加 <Path>] ダイアログ ボックスの、[Visual Studio にインストールされたテンプレート] の下の [Web ユーザー コントロール] をクリックします。

  3. [名前] ボックスに「ListPicker」と入力します。

    ユーザー コントロール ファイルの拡張子は .ascx になります。これは、ListPicker に自動的に追加されます。

  4. [言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。

  5. [追加] をクリックします。

    新しいコントロールが作成され、デザイナ上に開きます。コントロールのマークアップは、ページのマークアップに似ていますが、ページの上部に @ Page ディレクティブがない点が大きく異なります。代わりに、@ Control ディレクティブがあります。これは、ASP.NET へのファイルをユーザー コントロールとして識別します。

ユーザー コントロールへのサーバー コントロールの追加

このチュートリアルでは、ユーザー コントロールのユーザー インターフェイスを構成するコントロールを追加します。

サーバー コントロールを追加するには

  1. デザイン ビューに切り替えます (分離コード ページを使用して作業している場合は、ListPicker.ascx コントロールに切り替えてから、デザイン ビューに切り替えます)。

  2. [テーブル] メニューの [テーブルの挿入] をクリックします。

  3. [表の挿入] ダイアログ ボックスを使用して 1 行 3 列のテーブルを作成し、[OK] をクリックします。

    コントロールを保持するテーブル、つまりレイアウト テーブルが作成されます。

  4. テーブルの左の列に「Available」と入力し、Enter キーを押して新しい行を作成します。

  5. 右の列に「Selected」と入力し、Enter キーを押して新しい行を作成します。

  6. 次のコントロールをツールボックスの [標準] グループからテーブルにドラッグし、ここに示すようにプロパティを設定します。

    コントロール

    プロパティ

    ListBox を左の列にドラッグして、[Available] の下に配置します。

    Height: 200px

    ID: SourceList

    Width: 200px

    Button を中央の列にドラッグします。

    ID: AddAll

    Text: >>

    Button を中央の列にドラッグします。

    ID: AddOne

    Text: (空白)>(空白)

    Button を中央の列にドラッグします。

    ID: Remove

    Text: (空白)X(空白)

    ListBox を右の列にドラッグして、[Selected] の下に配置します。

    Height: 200px

    ID: TargetList

    Width: 200px

    ImageButton コントロールを Button コントロールの代わりに使用して、マウスのクリックに応答するイメージを表示できます。ただし、このチュートリアルでは、すべて追加、追加、および削除を表示するために頻繁に使用されるグラフィックの種類を列挙するテキスト (それぞれ、2 つの右山かっこ (>>)、1 つの右山かっこ (>)、X) を使用するだけで十分です。

  7. 必要に応じて、テーブルの列の幅と高さを調整します。

  8. [SourceList] ボックスをクリックし、[プロパティ] の Items プロパティの省略記号ボタン ([…]) をクリックします。

    [ListItem コレクション エディタ] ダイアログ ボックスが表示されます。

  9. 3 つの項目について [追加] をクリックして、その 3 つの項目を追加します。

  10. 最初の項目、2 番目の項目、および 3 番目の項目について、[ListItem プロパティ] の [Text] をそれぞれ「A」、「B」、および「C」に設定します。

    これによりテスト データが作成されます。このチュートリアルの後半の「ユーザー コントロールへのカスタム プロパティとメソッドの追加」では、テスト データを削除して、[SourceList] ボックスを動的に読み込むコードを追加します。

ユーザーの選択を処理するコードの追加

ユーザーは、テーブルの中央の列にあるボタンを使用して項目を選択します。したがって、コントロールのコードのほとんどは、Click イベントのハンドラ内にあります。

ユーザーの選択を処理するコードを追加するには

  1. デザイン ビューで [>>] ([AddAll]) をダブルクリックして Click イベントのイベント ハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub AddAll_Click(ByVal sender As Object, _
        ByVal e As EventArgs) Handles AddAll.Click
   TargetList.SelectedIndex = -1   Dim li As ListItem   For Each li In SourceList.Items      AddItem(li)   Next
End Sub

    protected void AddAll_Click(object sender, EventArgs e)
{
    TargetList.SelectedIndex = -1;    foreach(ListItem li in SourceList.Items)    {        AddItem(li);    }
}

    コードは、[SourceList] ボックス内のすべてのリスト項目を反復処理します。項目ごとに AddItem メソッドが呼び出され、現在の項目に渡されます。この手順の後半で、AddItem メソッドのコードを記述します。

  2. デザイン ビューに切り替え、[>] ([AddOne]) をダブルクリックして Click イベントのイベント ハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub AddOne_Click(ByVal sender As Object, _
       ByVal e As EventArgs) Handles AddOne.Click
   If SourceList.SelectedIndex >= 0 Then      AddItem(SourceList.SelectedItem)   End If
End Sub

    protected void AddOne_Click(object sender, EventArgs e)
{
    if(SourceList.SelectedIndex >= 0)    {        AddItem(SourceList.SelectedItem);    }
}

    このコードは、[SourceList] ボックス内に選択があることをまず確認します。選択がある場合、コードは AddItem メソッドを呼び出します。このメソッドは、このチュートリアルの後半で記述され、[SourceList] ボックスで現在選択されている項目に渡されます。

  3. デザイン ビューに切り替え、[X] ([Remove]) をダブルクリックして Click イベントのイベント ハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub Remove_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles Remove.Click
   If TargetList.SelectedIndex >= 0 Then     TargetList.Items.RemoveAt(TargetList.SelectedIndex)     TargetList.SelectedIndex = -1   End If
End Sub

    protected void Remove_Click(object sender, EventArgs e)
{
    if (TargetList.SelectedIndex >= 0)    {        TargetList.Items.RemoveAt(TargetList.SelectedIndex);        TargetList.SelectedIndex = -1;      }
}

    コードは、[TargetList] ボックスに選択が含まれていることをまず確認します。選択がある場合、コードは選択された項目をリストおよび選択から削除します。

  4. 次の AddItem メソッドを追加します。

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.SelectedIndex = -1
   TargetList.Items.Add(li)
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;
    TargetList.Items.Add(li);
}

    このコードは、項目を [TargetList] ボックスに無条件に追加します。このチュートリアルの後半の「ユーザー コントロールへのカスタム プロパティとメソッドの追加」では、重複があるかどうかを判断するオプションを追加して、このコードを改善します。

ユーザー コントロールはページでホストする必要があるため、直接テストすることはできません。次のセクションでは、コントロールを操作できる ASP.NET Web ページを作成します。

ユーザー コントロールの使用

すべてのコントロールと同様に、ユーザー コントロールはページでホストする必要があります。このチュートリアルでは、コントロールのホスト ページを作成して、ページにユーザー コントロールを追加します。

ホスト ページを作成するには

  1. ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。

  2. [Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。

  3. [名前] ボックスに「HostUserControl」と入力します。

  4. [言語] ボックスの一覧で、作業に使用する言語をクリックし、[追加] をクリックします。

    新しいページがデザイナに表示されます。

ページにユーザー コントロールを追加するには

  1. デザイン ビューに切り替えます。

  2. ソリューション エクスプローラからユーザー コントロール ファイル (ListPicker.ascx) をページにドラッグします。

    3457w616.alert_note(ja-jp,VS.90).gifメモ :

    ListPicker.ascx をページにドラッグする場合は、必ずデザイン ビューで行ってください。

    コントロールがデザイナに表示されます。

  3. ソース ビューに切り替えます。

    ユーザー コントロールをページに配置すると、ページに 2 つの新しい要素が作成されます。

    • ページの上部に新しい @ Register ディレクティブが表示され、次のようになります。

      <%@ Register Src="ListPicker.ascx" TagName="ListPicker"
   TagPrefix="uc1" %>

      ユーザー コントロールは外部コンポーネントであるため、@ Register ディレクティブは必須です。ディレクティブ内にある値は、ページをコンパイルして実行するときにコントロールを検索するために ASP.NET で必要な情報を提供します。また、TagPrefix 属性と TagName 属性は、ユーザー コントロールがページでどのように宣言されるかを指定します。Src 属性はファイルを指定します。また、必要に応じて、ソース ファイルが存在するパスも指定します。

    • 2 番目の新しい要素は、ユーザー コントロール用の要素で、次のようになります。

      <uc1:ListPicker id="ListPicker1" Runat="server" />

      ユーザー コントロール用の要素は、通常の ASP.NET サーバー コントロールの要素に似ています。ユーザー コントロールには異なるタグ プレフィックス (uc1) と一意のタグ名 (ListPicker) がある点が異なります。ユーザー コントロールをページに配置したときに、@ Register ディレクティブによって値が自動的に設定されますが、値がページでまだ使用されていない限り、ユーザー コントロールには任意のタグ プレフィックスとタグ名を使用できます。

ユーザー コントロールのテスト

ここで、ユーザー コントロールの暫定バージョンをテストできます。

ユーザー コントロールをテストするには

  1. Ctrl キーを押しながら F5 キーを押してページを実行します。

    ページがブラウザに表示され、ユーザー コントロールを構成する 2 つのリストと 3 つのボタンが表示されます。

  2. [>>] ([AddAll]) をクリックします。

    [SourceList] ボックスのすべての値が [TargetList] ボックスにコピーされます。

  3. [TargetList] ボックス内の各項目を順にクリックし、すべての項目が削除されるまで [X] ([Remove]) をクリックします。

  4. [SourceList] ボックスで 1 つの値を選択し、[>] ([AddOne]) をクリックします。

    1 つの値が [TargetList] ボックスにコピーされます。

  5. オプションで、コントロールが意図したとおりに機能することを確認できるまで、コントロールをさらにテストします。

  6. 完了したら、ブラウザを閉じます。

ユーザー コントロールへのカスタム プロパティとメソッドの追加

現在、ユーザー コントロールは機能していますが、汎用コントロールとしては有効ではありません。より実用的なユーザー コントロールを使用すると、次の操作を実行できます。

  • [SourceList] ボックスに動的に表示される項目のリストを指定します。

  • ユーザーが [TargetList] ボックスで選択した項目のリストを取得します。

  • オプションで、[TargetList] ボックスで重複する値を許可するかどうかを指定します。

  • [TargetList] ボックス内のすべての項目を迅速に消去する方法をユーザーに提供します。

これらのタスクを実行するには、値の共有 (プロパティの設定と読み取り) とコマンドの実行 (メソッドの呼び出し) の両方を実行するために、ホスト ページがユーザー コントロールと通信できる必要があります。このチュートリアルでは、ユーザー コントロールを変更して、いくつかのメンバ (プロパティとメソッド) を追加します。

ユーザー コントロールに 2 つのプロパティを追加します。最初のプロパティは、[TargetList] ボックスにある項目のリストを取得します。2 番目のプロパティを使用すると、[TargetList] ボックスが重複する値を受け入れるかどうかを指定できます。このセクションの後半では、[SourceList] ボックスを読み込むことができるメソッドを追加します。

カスタム プロパティを定義するコードを追加するには

  1. ListPicker コントロールで、コード ファイルを開くか、切り替えます。

  2. 次のコードを使用して SelectedItems プロパティを作成します。

    Public ReadOnly Property SelectedItems() As ListItemCollection
   Get
      Return TargetList.Items
   End Get
End Property

    public ListItemCollection SelectedItems
{
   get { return TargetList.Items ; }
}

    SelectedItems プロパティは、[TargetList] ボックスにある値を取得します。[TargetList] ボックス内の値をプログラムによって設定する必要がないため、このプロパティは読み取り専用です。

  3. 次のコードを使用して AllowDuplicates プロパティを作成します。

    Public Property AllowDuplicates() As Boolean
   Get
      Return CType(ViewState("allowDuplicates"), Boolean)
   End Get
   Set(ByVal value As Boolean)
      ViewState("allowDuplicates") = value
   End Set
End Property

    public Boolean AllowDuplicates
{
    get
    {
        return (Boolean)ViewState["allowDuplicates"];
    }
    set
    {
        ViewState["allowDuplicates"] = value;
    }
}

    AllowDuplicates プロパティは読み取り/書き込みプロパティです。 AllowDuplicates プロパティの値は、ラウンド トリップの間も存続するように、ビューステートに明示的に保存する必要があります ([TargetList] ボックスはビューステートに値を保存するため、SelectedItems プロパティをビューステートに明示的に保存する必要はありません)。

これでプロパティが定義されました。ただし、AllowDuplicates プロパティ設定を利用するために、ユーザー コントロール内の既存のコードを変更する必要があります。

AllowDuplicates プロパティを使用するように既存のコードを変更するには

  • このチュートリアルの前半の「ユーザーの選択を処理するコードの追加」で記述した AddItem メソッドを検索し、その内容を次の強調表示されたコードに置き換えます。

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.Selectedindex = -1   If Me.AllowDuplicates = True Then      TargetList.Items.Add(li)   Else      If TargetList.Items.FindByText(li.Text) Is Nothing Then         TargetList.Items.Add(li)      End If   End If
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;    if (this.AllowDuplicates == true)    {        TargetList.Items.Add(li);    }    else    {        if (TargetList.Items.FindByText(li.Text) == null)        {            TargetList.Items.Add(li);        }    }
}

    コードは以前と同じ関数 ([TargetList] ボックスへの項目の追加) を実行しますが、今度は、AllowDuplicate プロパティが true に設定されているかどうかを確認します。AllowDuplicate プロパティが true に設定されている場合、項目が追加されます。AllowDuplicate プロパティが false に設定されている場合、コードは、指定された新しい項目と同じ値を使用して既存の項目を検索し、既存の項目が見つからなかった場合は新しい項目を追加します。

プロパティを使用して [SourceList] ボックスの内容を設定するため、このチュートリアルの前半の「ユーザー コントロールへのサーバー コントロールの追加」で入力したテスト データを削除できます。

[SourceList] ボックスのテスト データを削除するには

  1. デザイン ビューに切り替えます。

  2. SourceList コントロールをクリックし、[プロパティ] の [Items] の省略記号ボタン ([…]) をクリックします。

    ListItem コレクション エディタが表示されます。

  3. [削除] をクリックして各サンプル項目を削除し、[OK] をクリックします。

ユーザー コントロールへのメソッドの追加

メソッドがホスト ページ内のコードによって呼び出される場合、ユーザー コントロールでタスクを実行するメソッドを追加することもできます。このチュートリアルでは、この手順を示すために、2 つのメソッドを追加します。最初のメソッドは、項目を [SourceList] ボックスに追加するために呼び出されます。2 番目のメソッドは、[TargetList] ボックスの内容を消去します。

[TargetList] ボックスを消去するメソッドを追加するには

  1. 次のコードを使用して AddSourceItem メソッドを追加します。

    Public Sub AddSourceItem(ByVal sourceItem As String)
    SourceList.Items.Add(sourceItem)
End Sub

    public void AddSourceItem(String sourceItem)
{
    SourceList.Items.Add(sourceItem);
}

  2. 次のコードを使用して ClearAll メソッドを追加します。

    Public Sub ClearAll()
    SourceList.Items.Clear()
    TargetList.Items.Clear()
End Sub

    public void ClearAll()
{
    SourceList.Items.Clear();
    TargetList.Items.Clear();
}

  3. [ファイル] メニューの [すべてを保存] をポイントし、ユーザー コントロールに加えた変更を保存します。

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

このチュートリアルでは、ユーザー コントロールと値を共有できるようにホスト ページを拡張します。ユーザー コントロールのいくつかのプロパティを宣言によって設定できます (このチュートリアルのコードを使用して、[SourceList] ボックスを直接設定することはできませんが、プログラムによって設定できます)。この手順では、AllowDuplicates プロパティを既定値の true に設定します。

ユーザー コントロールのプロパティを宣言によって設定するには

  1. HostUserControl.aspx ページに切り替えるか、このページを開きます。

  2. ソース ビューで、次のような構文を使用して AllowDuplicates を宣言によって設定します。

    <uc1:ListPicker id="ListPicker1" Runat="server"
    AllowDuplicates="true" />

    AllowDuplicates の Microsoft IntelliSense 機能を取得します。

プログラムによるユーザー コントロールの使用

ユーザー コントロールをプログラムによって使用して、プロパティを設定して取得し、メソッドを呼び出すこともできます。ユーザー コントロールをプログラムによって使用する方法を示すために、ホスト ページにコントロールを追加します。

ユーザー コントロールをプログラムによって使用するには

  1. デザイン ビューに切り替えます。

  2. 次のコントロールをツールボックスの [標準] グループからホスト ページ上のテーブルにドラッグし、ここに示すようにプロパティを設定します。

    コントロール

    プロパティ

    TextBox

    ID: NewItem

    Text: (空)

    Button

    ID: AddItem

    Text: Add Item

    Button

    ID: LoadFiles

    Text: File List

    Button

    ID: ClearSelection

    Text: Clear All

    CheckBox

    AutoPostBack: True

    Checked: True

    ID: AllowDuplicates

    Text: Allow duplicates

    Button

    ID: ShowSelection

    Text: Show Selection

    Label

    ID: Selection

    Text: (空)

  3. デザイン ビューで [AllowDuplicates] をダブルクリックして CheckedChanged イベントのイベント ハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub AllowDuplicates_CheckedChanged( _
ByVal sender As Object, _
ByVal e As EventArgs) Handles AllowDuplicates.CheckedChanged
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked
End Sub

    protected void AllowDuplicates_CheckedChanged(Object sender, EventArgs e)
{
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked;
}

  4. デザイン ビューに切り替え、[AddItem] をダブルクリックして Click イベントのイベント ハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub AddItem_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles AddItem.Click
    Dim sourceItem As String = Server.HtmlEncode(NewItem.Text)    ListPicker1.AddSourceItem(sourceItem)
End Sub

    protected void AddItem_Click(object sender, EventArgs e)
{
    ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text));
}

    コードにより、コード内に ListItemCollection コレクションが作成され、サンプル データが読み込まれます。次に、コードにより、SourceItems プロパティがコレクションに設定されます。

  5. デザイン ビューに切り替え、[LoadFiles] をダブルクリックして Click イベントのイベント ハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub LoadFiles_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles LoadFiles.Click
   Dim path As String = Server.MapPath(Request.ApplicationPath)   Dim files() As String = System.IO.Directory.GetFiles(path)   Dim filename As String   For Each filename in Files      ListPicker1.AddSourceItem(filename)   Next
End Sub

    protected void LoadFiles_Click(object sender, EventArgs e)
{
   String path = Server.MapPath(Request.ApplicationPath);   String[] files = System.IO.Directory.GetFiles(path);   foreach(String filename in files)   {      ListPicker1.AddSourceItem(filename);   }
}

    このコードは、AddItem のコードに似ていますが、このコードは Web サイトのルート ディレクトリにファイルの一覧を追加する点が異なります。

  6. デザイン ビューに切り替え、[ShowSelection] をダブルクリックして Click イベントのイベント ハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub ShowSelection_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles ShowSelection.Click
   Dim lItem As ListItem   Dim selectedItemsString As String = ""   For Each lItem in ListPicker1.SelectedItems      selectedItemsString &= "<br>" & lItem.Text   Next   Selection.Text = selectedItemsString
End Sub

    protected void ShowSelection_Click(object sender, EventArgs e)
{
   String selectedItemsString = "";   foreach(ListItem lItem in ListPicker1.SelectedItems)   {      selectedItemsString += "<br>" + lItem.Text;   }   Selection.Text = selectedItemsString;
}

    このコードは、ListItemCollection オブジェクトとして入力されたオブジェクトを取得し、コレクション内の各項目を読み取って、結果を [Selection] に表示します。

  7. デザイン ビューに切り替え、[ClearSelection] をダブルクリックして Click イベントのイベント ハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub ClearSelection_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles ClearSelection.Click
   ListPicker1.ClearAll()
End Sub

    protected void ClearSelection_Click(object sender, EventArgs e)
{
   ListPicker1.ClearAll();
}

    このコードは、ユーザー コントロールの ClearAll メソッドを呼び出して、[TargetList] ボックスからすべての項目を削除します。

完成したユーザー コントロールのテスト

ここで、完成したユーザー コントロールをテストできます。

ユーザー コントロールをテストするには

  1. Ctrl キーを押しながら F5 キーを押してページを実行します。

  2. テキスト ボックスに値を入力し、[項目の追加] をクリックします。

  3. ユーザー コントロール内の項目が選択されるまで、手順 2 を複数回繰り返します。

  4. ボタンを使用して [SourceList] ボックスから 1 つ以上のソース項目を選択し、[TargetList] ボックスに追加します。

  5. [Show Selection] をクリックします。

    [TargetList] リスト項目が [Selection] に表示されます。

  6. [すべてクリア] をクリックします。

  7. [ファイル リスト] をクリックします。

    [SourceList] ボックスにファイル名の一覧が表示されます。

  8. ユーザー コントロールの [追加] をクリックして、いくつかの項目を [TargetList] ボックスに追加します。

  9. 既にリストにある項目を [TargetList] ボックスに追加してみます。

    重複する値が追加されます。

  10. [Allow duplicates] ボックスをオフにして、重複する値を再度追加してみます。

    今度は、重複する値は [TargetList] ボックスには追加されません。

  11. [Show Selection] をクリックします。

    [TargetList] ボックス内の項目のリストがホスト ページに表示されます。

次の手順

作成したコントロールはそれほど複雑ではありませんが、ユーザー コントロールに組み込むことができる基本的な機能の多くを学習しました。コントロールの微調整は、コントロールの機能を強化する追加のプロパティとメソッドの公開に大きく影響します。追加のメンバには、次のものが含まれます。

  • 外観プロパティ

    ユーザーがコントロールの背景、リストのサイズなどを設定できる、ユーザー コントロール プロパティを作成できます。

    3457w616.alert_note(ja-jp,VS.90).gifメモ :

    既定では、ユーザー コントロールは子コントロールに適用される現在のテーマを使用します。たとえば、Button コントロールにスキンが定義されている場合、ユーザー コントロール内のボタンはそのスキンと共に表示されます。

  • データ プロパティ

    ユーザー コントロールが [SourceList] ボックスに表示するさまざまなデータを使用できるプロパティを追加できます。たとえば、データセット、データ テーブル、およびデータ表示フィールドを設定するプロパティを追加できます。

  • 機能

    ユーザーが [SourceList] ボックスから [TargetList] ボックスに項目をコピーするだけでなく、項目を移動できるボタンとコードをユーザー コントロールに追加できます。移動の場合、項目を [TargetList] ボックスに移動すると、[SourceList] ボックスからその項目が削除されます。コントロールには、データを [TargetList] ボックスから [SourceList] ボックスに戻すボタンも追加できます。

参照

処理手順

方法 : Web フォーム ページを ASP.NET ユーザー コントロールに変換する

概念

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

Web アプリケーションのセキュリティ上の脅威の概要