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

[アーティクル]
09/30/2008

更新 : 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 サイトを作成するには

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

[新しい Web サイト] ダイアログボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
右端の [場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。

たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。

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

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

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

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

ソリューションエクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加 <Path>] ダイアログボックスの、[Visual Studio にインストールされたテンプレート] の下の [Web ユーザーコントロール] をクリックします。
[名前] ボックスに「ListPicker」と入力します。

ユーザーコントロールファイルの拡張子は .ascx になります。これは、ListPicker に自動的に追加されます。
[言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。
[追加] をクリックします。

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

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

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

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

デザインビューに切り替えます (分離コードページを使用して作業している場合は、ListPicker.ascx コントロールに切り替えてから、デザインビューに切り替えます)。
[テーブル] メニューの [テーブルの挿入] をクリックします。
[表の挿入] ダイアログボックスを使用して 1 行 3 列のテーブルを作成し、[OK] をクリックします。

コントロールを保持するテーブル、つまりレイアウトテーブルが作成されます。
テーブルの左の列に「Available」と入力し、Enter キーを押して新しい行を作成します。
右の列に「Selected」と入力し、Enter キーを押して新しい行を作成します。

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

コントロール	プロパティ
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) を使用するだけで十分です。

必要に応じて、テーブルの列の幅と高さを調整します。
[SourceList] ボックスをクリックし、[プロパティ] の Items プロパティの省略記号ボタン ([…]) をクリックします。

[ListItem コレクションエディタ] ダイアログボックスが表示されます。
3 つの項目について [追加] をクリックして、その 3 つの項目を追加します。
最初の項目、2 番目の項目、および 3 番目の項目について、[ListItem プロパティ] の [Text] をそれぞれ「A」、「B」、および「C」に設定します。

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

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

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

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

デザインビューで [>>] ([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 メソッドのコードを記述します。
デザインビューに切り替え、[>] ([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] ボックスで現在選択されている項目に渡されます。

デザインビューに切り替え、[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] ボックスに選択が含まれていることをまず確認します。選択がある場合、コードは選択された項目をリストおよび選択から削除します。

次の 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 ページを作成します。

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

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

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

ソリューションエクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[名前] ボックスに「HostUserControl」と入力します。
[言語] ボックスの一覧で、作業に使用する言語をクリックし、[追加] をクリックします。

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

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

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

メモ :

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

コントロールがデザイナに表示されます。
ソースビューに切り替えます。

ユーザーコントロールをページに配置すると、ページに 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 ディレクティブによって値が自動的に設定されますが、値がページでまだ使用されていない限り、ユーザーコントロールには任意のタグプレフィックスとタグ名を使用できます。

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

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

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

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

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

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

[SourceList] ボックスのすべての値が [TargetList] ボックスにコピーされます。
[TargetList] ボックス内の各項目を順にクリックし、すべての項目が削除されるまで [X] ([Remove]) をクリックします。
[SourceList] ボックスで 1 つの値を選択し、[>] ([AddOne]) をクリックします。

1 つの値が [TargetList] ボックスにコピーされます。
オプションで、コントロールが意図したとおりに機能することを確認できるまで、コントロールをさらにテストします。
完了したら、ブラウザを閉じます。

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

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

[SourceList] ボックスに動的に表示される項目のリストを指定します。
ユーザーが [TargetList] ボックスで選択した項目のリストを取得します。
オプションで、[TargetList] ボックスで重複する値を許可するかどうかを指定します。
[TargetList] ボックス内のすべての項目を迅速に消去する方法をユーザーに提供します。

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

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

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

ListPicker コントロールで、コードファイルを開くか、切り替えます。
次のコードを使用して 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] ボックス内の値をプログラムによって設定する必要がないため、このプロパティは読み取り専用です。
次のコードを使用して 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] ボックスのテストデータを削除するには

デザインビューに切り替えます。
SourceList コントロールをクリックし、[プロパティ] の [Items] の省略記号ボタン ([…]) をクリックします。

ListItem コレクションエディタが表示されます。
[削除] をクリックして各サンプル項目を削除し、[OK] をクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

HostUserControl.aspx ページに切り替えるか、このページを開きます。
ソースビューで、次のような構文を使用して AllowDuplicates を宣言によって設定します。
```
<uc1:ListPicker id="ListPicker1" Runat="server"
    AllowDuplicates="true" />
```
AllowDuplicates の Microsoft IntelliSense 機能を取得します。

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

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

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

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

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

コントロール	プロパティ
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: (空)

デザインビューで [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;
}

デザインビューに切り替え、[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 プロパティがコレクションに設定されます。

デザインビューに切り替え、[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 サイトのルートディレクトリにファイルの一覧を追加する点が異なります。

デザインビューに切り替え、[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] に表示します。

デザインビューに切り替え、[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] ボックスからすべての項目を削除します。

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

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

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

Ctrl キーを押しながら F5 キーを押してページを実行します。
テキストボックスに値を入力し、[項目の追加] をクリックします。
ユーザーコントロール内の項目が選択されるまで、手順 2 を複数回繰り返します。
ボタンを使用して [SourceList] ボックスから 1 つ以上のソース項目を選択し、[TargetList] ボックスに追加します。
[Show Selection] をクリックします。

[TargetList] リスト項目が [Selection] に表示されます。
[すべてクリア] をクリックします。
[ファイルリスト] をクリックします。

[SourceList] ボックスにファイル名の一覧が表示されます。
ユーザーコントロールの [追加] をクリックして、いくつかの項目を [TargetList] ボックスに追加します。
既にリストにある項目を [TargetList] ボックスに追加してみます。

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

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

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

次の手順

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

外観プロパティ

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

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

データプロパティ

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

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

参照

処理手順

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

概念

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

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

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

前提条件

Web サイトの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次の手順

参照

処理手順

概念

その他のリソース

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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