■リストコントロール基礎編

 

VS.NET を使用してWebページにリストコントロールを作成します。

 

  アイテムをListItemコレクションエディタから入力 (lc1.aspx)

 

VS.NET を起動して新規Webフォームを作成します。ツールボックスの[Webフォーム]からRadioButtonListをドラッグしてデザイナにドロップします。デザイナにRadioButtonList1のオブジェクトが作成されます。RadioButtonList1のプロパティウィンドウからItemsコレクションをクリックして右端の[…]ボタンをクリックします。「ListItemコレクションエディタ」が表示されたら[追加]ボタンをクリックします。右側の「ListItemプロパティ」からTextに「red」、Value16進のカラーコード「#ff0000」を入力します。同様の手順で、「green - #008000」、「blue - #0000ff」を入力したら、[OK]をクリックしてエディタを閉じます。デザイナのRadioButtonList1にエディタから追加したアイテムが表示されます。

 

3: ListItemコレクションエディタからTextValueを入力

 

4 :デザイナのRadioButton1にアイテムが表示される

 

 

●アイテムをランタイム時に追加 (lc2.aspx)

 

リストコントロールにアイテムをダイナミックに追加するには、リストコントロールのItemsコレクションのAddメソッドを使用します。たとえば、RadioButtonList1にアイテムを追加するには、Page_LoadイベントでIsPostBackプロパティを参照して、Webページが初期ロードか調べます。初期ロードのときは、BindListを実行してアイテムを追加します。

 

BindListでは、RadioButtonList1ItemsコレクションのAddメソッドでアイテムを追加しています。Addメソッドの引数には、ListItemのオブジェクトを指定します。ListItemの引数には、TextValueプロパティを指定します。ここでは、Textに「カラー名」、Valueに「16進のカラーコード」を指定しています。

 

リスト1 ランタイム時にアイテムを追加する

Private Sub BindList()

  With RadioButtonList1.Items

    .Add(New ListItem("red", "#ff0000"))

    .Add(New ListItem("green", "#008000"))

    .Add(New ListItem("blue", "#0000ff"))

  End With

End Sub

 

 

ArrayListHashTableSortedListをバインド (lc3.aspx)

 

リストコントロールには、ICollectionインターフェイス、IEnumerableインターフェイスをサポートしているオブジェクトをバインドすることができます。たとえば、ArrayListをバインドするには、ArrayListListItemオブジェクトを格納します。次に、リストコントロールのDataSourceプロパティにArrayListを設定して、DataBindメソッドを実行します。これで、リストコントロールにArrayListがバインドされます。

 

リストコントロールに、HashTable/SortedListをバインドするときは、リストコントロールのDataTextFieldDataValueFieldプロパティに「Key」と「Value」を設定します。ArrayListListItemオブジェクトが格納されているときは、リストコントロールのDataTextFieldDataValueFieldの設定は不要です。

 

 

リスト2 DropDownListArrayList/HashTable/SortedListをバインド

 

DropDownListArrayListをバインド

Sub BindArrayList()

  Dim ar As New ArrayList

 

  With ar

    .Add(New ListItem("black", "#000000"))

    .Add(New ListItem("silver", "#c0c0c0"))

    .Add(New ListItem("gray", "#808080"))

  End With

  DropDownList1.DataSource = ar

  DropDownList1.DataBind()

End Sub

 

DropDownListHashTableをバインド

Sub BindHashTable()

  Dim ht As New Hashtable

 

  With ht

    .Add("black", "#000000")

    .Add("silver", "#c0c0c0")

    .Add("gray", "#808080")

  End With

  DropDownList2.DataSource = ht

  DropDownList2.DataTextField = "Key"

  DropDownList2.DataValueField = "Value"

  DropDownList2.DataBind()

End Sub

 

DataReaderをバインド (lc3.aspx)

 

リストコントロールにDataReaderをバインドするには、DataSourceプロパティにDataReaderを設定してDataBindメソッドを実行します。リストコントロールのDataTextFieldDataValueFieldプロパティには、DataReaderのフィールド名を設定します。

 

DataReaderオブジェクトを作成するには、ConnectionオブジェクトとCommandオブジェクトのインスタンスを生成します。Connectionの引数には、データベース接続文字列を指定します。ここでは、AccessのデータベースNwind.mdbに接続するための接続文字列を指定しています。Nwind.mdbの物理パスは、Server.MapPathメソッドを使用して取得します。「~/webdb\Nwind.mdb」の先頭の「~」は、仮想ディレクトリからの相対アドレスを使用することを意味します。Commandの引数には、テーブルからレコードを抽出するためのSQL文とConnectionオブジェクトを指定します。

 

ConnectionオブジェクトのOpenメソッドでデータベースNwind.mdbを開いたら、CommandオブジェクトのExecuteReaderメソッドを実行してDataReaderを作成します。ここで作成したDataReaderは、戻り値として返します。ExecuteReaderの引数にCommandBehavior.CloseConnectionを指定すると、DataRederが閉じたときに、ConnectionオブジェクトのCloseメソッドを自動的に実行してデータベースを閉じます。このサンプルの場合、ListBox1DataBindメソッドでDataReaderのすべてのレコードが読み込まれてたときに、データベースが閉じられます。

 

リスト3 ListBox1DataReaderをバインド

Sub BindList()

  Dim strSQL As String = "Select * From tblColorNames"

  With ListBox1

    .DataSource = CreateDataReader(strSQL)

    .DataTextField = "ColorName"

    .DataValueField = "ColorValue"

    .DataBind()

  End With

End Sub

 

Function CreateDataReader(ByVal strSQL As String) As OleDbDataReader

  Dim strConnectionString As String = _

    String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _

    Server.MapPath("~/webdb/Nwind.mdb"))

  Dim con As New OleDbConnection(strConnectionString)

  Dim cmd As New OleDbCommand(strSQL, con)

  con.Open()

  Return cmd.ExecuteReader(CommandBehavior.CloseConnection)

End Function

 

 

DataSetをバインド (lc4.aspx)

 

リストコントロールにDataSetをバインドするには、DataSourceプロパティにDataSetを設定してDataBindメソッドを実行します。DataTextFieldDataValueFieldプロパティには、DataSetに格納されているDataTable(テーブル)のフィールド名を指定します。DataSetに複数のDataTableが格納されているときは、DataMemberプロパティにDataTableの名前を設定します。

 

da.Fill(ds,"Customers")

da.Fill(ds,"Suppliers")

 

ListBox1.DataSource = ds

ListBox1.DataMember = "Customers"

 

DataSetにデータベースのテーブルを格納するには、ConnectionDataAdapterDataSetのインスタンスを生成します。Connectionの引数には、データベースの接続文字列を指定します。DataAdapterの引数には、テーブルからレコードを抽出するためのSQL文とConnectionオブジェクトを指定します。DataAdapterFillメソッドを実行すると、レコードを抽出するSQL文が実行されてDataSetDataTable(テーブル)が格納されます。

 

リスト4 ListBox1DataSetをバインド

Sub BindList()

  Dim strSQL As String = "Select * From tblColorNames"

  With ListBox1

    .DataSource = CreateDataSet(strSQL)

    .DataTextField = "ColorName"

    .DataValueField = "ColorValue"

    .DataBind()

  End With

End Sub

 

Function CreateDataSet(ByVal strSQL As String) As DataSet

  Dim strConnectionString As String = _

    String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _

    Server.MapPath("~/webdb/Nwind.mdb"))

  Dim con As New OleDbConnection(strConnectionString)

  Dim da As New OleDbDataAdapter(strSQL, con)

  Dim ds As New DataSet

 

  da.Fill(ds)

  Return ds

End Function

 

 

●リストコントロールから選択したアイテムを取得する

 

リストコントロールには、単一アイテムと複数アイテムを選択するものがあります。以下に、リストコントロールから単一アイテムを取得する方法と複数アイテムを取得する方法を説明します。

 

 

◎単一アイテムを取得する (lc5.aspx)

RadioButtonListDropDownListなどのリストコントロールから1個のアイテムを選択するときは、リストコントロールのAutoPostBackプロパティに”True”を設定します。この場合、リストコントロールからアイテムをクリックするとWebページがポストバックされます。選択したアイテムを取得するには、リストコントロールのSelectedIndexChangedイベントを使用します。

 

リストコントロールから選択したアイテム(ListItem)は、リストコントロールのSelectedItemプロパティに格納されています。アイテムのText/Value値は、SelectedItem.TextSelectedItem.Valueプロパティに格納されています。なお、アイテムのValue値は、SelectedValueプロパティにも格納されています。

 

Trace.Warn(RadioButtonList1.SelectedValue)

Trace.Warn(RadioButtonList1.SelectedItem.Text)

Trace.Warn(RadioButtonList1.SelectedItem.Value)

 

5のサンプルは、RadioButtonList1から選択したアイテム(ListItem)Value値(16進のカラーコード)を<body>タグのbgColor属性に設定して、Webページの背景色を書き換えています。bgColor属性を書き換えるには、bodyオブジェクトのAttributesコレクションを使用します。背景色を書き換えるには、Attributesの引数に「bgColor」を指定します。

 

Note

<body>タグのbgColor属性をランタイム時に書き換えるには、「id=」と「runat=」を追加します。さらに、コードビハインドに「Protected WithEvents bodyElement As ….」を追加します。

 

<body id="bodyElement" runat="server">

Protected WithEvents bodyElement As System.Web.UI.HtmlControls.HtmlGenericControl

bodyElement.Attributes("bgColor") = RadioButtonList1.SelectedValue

 

 

リスト5 選択したアイテムのValue値を取得してWebページの背景色を書き換える

Private Sub RadioButtonList1_SelectedIndexChanged( _

 ByVal sender As System.Object, ByVal e As System.EventArgs) _

 Handles RadioButtonList1.SelectedIndexChanged

  bodyElement.Attributes("bgColor") = RadioButtonList1.SelectedValue

End Sub

 

5 RadioButtonList1から[green]を選択

 

 

◎複数アイテムを取得する (lc6.aspx)

 

CheckBoxListListBoxなどのリストコントロールから複数のアイテムを選択するには、リストコントロールのAutoPostBackプロパティに”True”を設定する代わりに、Buttonコントロールを作成してWebページをポストバックさせます。

 

リストコントロールから複数のアイテムを選択したら、ボタンをクリックしてWebページをポストバックします。ボタンのクリック時のイベントでは、リストコントロールのItemsコレクションからListItemオブジェクトを取得してSelectedプロパティを調べます。アイテム(ListItem)が選択されているときは、Selected”True”が格納されています。選択したアイテムのText/Value値は、ListItemText/Valueプロパティに格納されています。

 

6のサンプルは、CheckBoxList1から選択したカラーをLabelコントロールに表示します。CheckBoxListに表示されているカラーをクリックしてチェックマークを付けたら、[選択]ボタンをクリックします。[選択]ボタンのクリック時のイベントでは、ItemsコレクションからListItemオブジェクトを取得してSelectedプロパティを調べます。Selected”True”のときは、LabelTextプロパティにカラー名を格納して表示します。

 

 

6 CheckBoxList1から選択したカラーを表示

 

リスト6[選択]ボタンのクリック時のイベント

Private Sub btnSelect_Click(ByVal sender As System.Object, _

 ByVal e As System.EventArgs) Handles btnSelect.Click

  For Each item As ListItem In Me.CheckBoxList1.Items

    If item.Selected Then

      Me.Label1.Text &= String.Format("<li>{0}</li>", item.Text)

    End If

  Next

End Sub