ASP.NET 徹底活用術のホームへ戻る

■リストコントロール応用編

 

DropDownListListBoxDataGridコントロールを使用したサンプルを解説します。

 

DropDownListの任意の場所にアイテムを追加する (lc7.aspx)

 

7のサンプルは、Webページが初期ロードのときFillWithColorsメソッドを実行してDropDownList1にカラー名を追加します。次に、ItemsコレクションのInsertメソッドで「--背景色を選択してください--」をアイテムの先頭に追加します。Insertメソッドの引数には、挿入するアイテムのインデックス番号とListItemオブジェクトを指定します。アイテムの先頭に挿入するには、インデックス番号に「0」を指定します。

 

DropDownList1.Items.Insert(0, New ListItem("--背景色を選択してください--", ""))

 

FillWithColorsメソッドは、System.Drawing名前空間に格納されているKnowColorからEnum値を取得してカラー名を追加します。DropDownList1にカラー名を追加するには、ItemsコレクションのAddメソッドを使用します。Addメソッドの引数にはカラー名を指定します。

 

7 DropDownList1に「--背景色を選択してください--」を追加

 

 

リスト7 DropDownList1の先頭にヘルプ情報を追加

Private Sub Page_Load(...) Handles MyBase.Load

  If Not IsPostBack Then

    FillWithColors(DropDownList1.Items)

    DropDownList1.Items.Insert(0, New ListItem("--背景色を選択してください--", ""))

  End If

End Sub

 

Private Sub FillWithColors(ByVal Items As ListItemCollection)

  Dim arrColors As Array = System.Enum.GetValues(GetType(KnownColor))

 

  For Each kc As KnownColor In arrColors

    Dim c As Color = Color.FromKnownColor(kc)

    If Not c.IsSystemColor AndAlso c.Name <> "Transparent" Then

      Items.Add(c.Name)

    End If

  Next

End Sub

 

 

DropDownListにデフォルトのアイテムを表示する (lc8.aspx)

 

8のサンプルは、FillWithColorsメソッドを実行してDropDownList1にカラー名を追加します。さらに、DropDownList1ItemsコレクションからListItemを検索してカラー名(OldLace)をデフォルトのアイテムとして表示します。

 

ItemsコレクションからListItemを検索するには、FindByTextFindByValueメソッドを使用します。前者はListItemTextプロパティ、後者はListItemValueプロパティを検索します。FindByText/FindByValueメソッドは、検索結果としてListItemオブジェクトを返します。アイテムをデフォルトとして表示するには、ListItemSelectedプロパティに”True”を設定します。

 

FillWithColors(DropDownList1.Items)

DropDownList1.Items.FindByText("OldLace").Selected = True

 

 

8 DropDownList1にデフォルトのアイテム(OldLace)を表示

 

 

リスト8 DropDownListのデフォルトのアイテムを選択

Private Sub Page_Load(...) Handles MyBase.Load

  If Not IsPostBack Then

    FillWithColors(DropDownList1.Items)

    DropDownList1.Items.FindByText("OldLace").Selected = True

    bodyElement.Attributes("bgColor") = DropDownList1.SelectedItem.Value

  End If

End Sub

 

 

●ドロップダウンリストに背景色を付ける (lc9.aspx)

 

ドロップダウンリストに背景色を付けるには、DropDownListコントロールの変わりにHTMLコントロールの<select>…</select>タグを使用します。<select>タグには、「id=」と「runat=」を追加します。

 

<select id="DropDownList1" runat="server"></select>

 

Note

DropDownListListItemAttributesコレクションのAddメソッドでスタイル(style)を追加しても、Webページが生成されるとき<option>タグにスタイル属性が挿入されません。ここではこの問題を回避するために、HTML<select>…</select>タグを使用します。

 

 

HTMLのドロップダウンリストにアイテムを追加するには、ItemsコレクションのAddメソッドを使用します。アイテムに背景色を追加するには、ListItemAttributesコレクションのAddメソッドを使用します。Addの引数には、スタイル属性「style」とCSSの背景色のプロパティ「background-color」を指定します。

 

FillWithColors(DropDownList1.Items)

For Each item As ListItem In DropDownList1.Items

  item.Attributes.Add("style", "background-color:" & item.Value)

Next

 

ランタイム時にダイナミックに追加したスタイル(CSS)は、ビューステートに保存されませんのでWebページがポストバックされる度に追加する必要があります。

 

 

9 ドロップダウンリストの背景色をアイテム別に変える

 

 

リスト9 ドロップダウンリストにHTML<select>タグを使用する

<form id="Form1" method="post" runat="server">

  <P>お好きな背景色を選択してください!</P>

  <select id="DropDownList1" runat="server"></select>

  <asp:Button id="Button1" runat="server" Text="選択"></asp:Button>

</form>

 

 

リスト10 ListItemAttribures.Addメソッドで背景色を追加

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

 ByVal e As System.EventArgs) Handles MyBase.Load

    If Not IsPostBack Then

      FillWithColors(Me.DropDownList1.Items)

     End If

    For Each item As ListItem In DropDownList1.Items

      item.Attributes.Add("style", "background-color:" & item.Value)

    Next

End Sub

 

 

●順番を考慮して複数アイテム選択 (lc10.aspx)

 

10のサンプルは、左側のリストボックスに表示されているカラーの一覧から、最も好きなものを順番に選択します。アイテムを移動するには、リストボックスからアイテムを選択して移動ボタンをクリックします。[>]ボタンをクリックすると左から右にアイテムが移動します。[<]ボタンをクリックすると右から左にアイテムが移動します。[<<][>>]をクリックすると、すべてのアイテムが左右に移動します。

 

リストボックスにアイテムを表示するにはListBoxコントロールを使用しますが、ここではアイテムに背景色を表示するために、HTML<select>…</select>タグを使用します。<select>には、「id=」、「runat=」、「size=」そして「multiple」を追加します。

 

<select id="lstAvailable" multiple size="10" runat="server"></select>

 

リストボックス間でアイテムを移動するには、ItemsコレクションのAddメソッドとRemoveAtメソッドを使用します。たとえば、左側から右側にアイテムを移動するには、右側のリストボックスにAddメソッドでアイテムを追加してから、左側のリストボックスからRemoveAtメソッドで削除します。Addメソッドの引数には、追加するListItemオブジェクトを指定します。RemoveAtメソッドの引数には、削除するListItemのインデックス番号を指定します。

 

 

10 リストボックス間でアイテムを移動する

 

 

リスト11 移動ボタンのクリック時のイベント

Private Sub btnAddOne_Click(ByVal sender As System.Object,

 ByVal e As System.EventArgs) Handles btnAddOne.Click

  If lstAvailable.SelectedIndex <> -1 Then

    Dim item As ListItem = lstAvailable.Items(lstAvailable.SelectedIndex)

    lstSelected.Items.Add(item)

    lstAvailable.Items.RemoveAt(lstAvailable.SelectedIndex)

  End If

End Sub

 

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

 ByVal e As System.EventArgs) Handles btnRemoveOne.Click

  If lstSelected.SelectedIndex <> -1 Then

    Dim item As ListItem = lstSelected.Items(lstSelected.SelectedIndex)

    lstAvailable.Items.Add(item)

    lstSelected.Items.RemoveAt(lstSelected.SelectedIndex)

  End If

End Sub

 

 

●複数列を表示する擬似リストコントロール-その1(lc11.aspx)

 

ASP.NETのリストコントロールは複数列を表示することができませんので、ここではDataGridRadioButtonコントロールを組み合わせた擬似リストコントロール(単一アイテム選択用)を作成します。DataGridRadioButtonを表示するには、テンプレート列を作成してItemTemplateRadioButtonを追加します。DataGridからアイテムを1個のみ選択できるようにするには、RadioButtonGroupNameプロパティにグループ名を指定してRadioButtonをグループ化します。ところが、DataGridのテンプレート列にRadioButtonを追加すると、GrouNameプロパティが書き換えられてグループ化されません。この不都合を回避するために、ここではAndy Smith氏が作成したRowSelectorColumnコントロールを使用します。RowSelectorColumnコントロールは、DataGrid専用のカスタムコントロールでDataGridRadioButton列とCheckBox列を表示することができます。

 

RowSelectorColumndllとソースコードは、著者のWebサイト(http://www.metabuilders.com/)から無償にてダウンロードできます。RowSelectorColumnをダウンロードして解凍したら、binフォルダに格納されている「MetaBuilders.WebControls.RowSelectorColumn.dll」をWebアプリケーションの仮想ディレクトリのbinフォルダにコピーします。

 

VS.NET 2003を起動して新規Webページを作成したら、HTMLビューに切り替えて以下の@Registerディレクティブを追加します。

 

<%@ Register TagPrefix="fs" Namespace="MetaBuilders.WebControls"

Assembly="MetaBuilders.WebControls.RowSelectorColumn" %>

 

デザインビューに切り替えたら、ツールボックスからDataGridをドラッグ&ドロップします。デザイナにDataGrid1のオブジェクトが作成されたら、DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、[]を選択して「実行時に自動的に列を作成する」のチェックを外します。「使用可能な列」から[連結列]を選択して「得意先」、「担当者」、「電話」の連結列を作成します。

 

1DataGrid1に連結列作成

ヘッダーテキスト

データフィールド

得意先

CompanyName

担当

ContactName

電話

Phone

 

 

プロパティビルダを閉じたら、HTMLビューに切り替えてDataGrid<Columns>…</Columns>の間にRowSelectorColumnを追加します。SelectionModeプロパティに「Single」を指定すると、RadioButton列が表示されます。

 

<fs:RowSelectorColumn SelectionMode="Single"></fs:RowSelectorColumn>

 

コードビューに切り替えたら、先頭にImportsステートメントを追加します。

 

Imports MetaBuilders.WebControls

 

DataGridから選択したアイテムを取得するには、ボタンを作成してWebページをポストバックさせます。ボタンのクリック時のイベントでは、RowSelectorColumnオブジェクトのFindColumnメソッドを実行してRowSelectorColumnオブジェクトを取得します。FindColumnメソッドの引数には、DataGridIDを指定します。RowSelectorColumnオブジェクトのSelectedIndexesコレクションには、DataGridから選択されたアイテム(DataGridItem)のインデックス番号が格納されています。DataGridItemsコレクションから、選択されたアイテムを取得するには、以下のように記述します。

 

Dim intIndex As Integer = rsc.SelectedIndexes(0)

Dim item As DataGridItem = DataGrid1.Items(intIndex)

 

11のサンプルでは、[表示]ボタンをクリックするとDataGridDataKeysコレクションから主キー(得意先ID)、DataGridItemから得意先名を取得して表示します。

 

11: 複数列を表示する擬似リストコントロール(単一アイテム選択用)

 

 

リスト12 HTMLビューの内容

<%@ Register TagPrefix="fs" Namespace="MetaBuilders.WebControls"

  Assembly="MetaBuilders.WebControls.RowSelectorColumn" %>

 

<asp:datagrid id="DataGrid1" runat="server"

  AutoGenerateColumns="False" ...>

  <Columns>

    <fs:RowSelectorColumn SelectionMode="Single" />

    <asp:BoundColumn DataField="CompanyName" HeaderText="得意先" />

    <asp:BoundColumn DataField="ContactName" HeaderText="担当者" />

    <asp:BoundColumn DataField="Phone" HeaderText="電話" />

  </Columns>

</asp:datagrid>

 

リスト: ボタンクリック時のイベント

Imports MetaBuilders.WebControls

 

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

 ByVal e As System.EventArgs) Handles Button1.Click

  Dim rsc As RowSelectorColumn = RowSelectorColumn.FindColumn(DataGrid1)

 

  If rsc.SelectedIndexes.Length > 0 Then

    Dim intIndex As Integer = rsc.SelectedIndexes(0)

    Dim item As DataGridItem = DataGrid1.Items(intIndex)

    Label1.Text = String.Format("<li>得意先ID {0} の《{1}》を選択しました!", _

      DataGrid1.DataKeys(intIndex), item.Cells(1).Text)

  End If

End Sub

 

 

●複数列を表示する擬似リストコントロール-その2(lc12.aspx)

 

DataGridから複数アイテムを選択するには、RowSelectorColumnSelectionModeプロパティに「Multiple」を指定します。Multipleを指定すると、RowSelectorColumn列にCheckBoxが表示されます。AllowSelectAllプロパティに”True”を指定すると、DataGridのヘッダーにCheckBoxが表示されます。ヘッダーに表示されているCheckBoxをクリックするとすべてのアイテムを一括して選択/解除することができます。

 

<fs:RowSelectorColumn AllowSelectAll="True" SelectionMode="Multiple" />

 

DataGridから選択した複数アイテムを取得するには、ボタンを作成してWebページをポストバックさせます。ボタンのクリック時のイベントでは、RowSelectorColumnオブジェクトのFindColumnメソッドを実行してRowSelectorColumnオブジェクトを取得します。FindColumnメソッドの引数には、DataGridIDを指定します。RowSelectorColumnオブジェクトのSelectedIndexesコレクションには、DataGridから選択したアイテム(DataGridItem)のインデックス番号が格納されています。DataGridItemsコレクションから、選択したアイテムを取得するには、For Each…Nextステートメントを使用します。

 

For Each i As Integer In rsc.SelectedIndexes

  Dim item As DataGridItem = DataGrid1.Items(i)

  Label1.Text &= String.Format("<li>得意先ID {0} の《{1}》を選択しました!", _

  DataGrid1.DataKeys(i), item.Cells(1).Text)

Next

 

12のサンプルでは、[表示]ボタンをクリックするとFor Each…NextループでDataGridDataKeysコレクションから主キー(得意先ID)、DataGridItemから得意先名を取得して表示します。

 

 

12:複数列を表示する擬似リストコントロール(複数アイテム選択用)

 

リスト13 HTMLビューの内容

<%@ Register TagPrefix="fs" Namespace="MetaBuilders.WebControls"

 Assembly="MetaBuilders.WebControls.RowSelectorColumn" %>

 

<asp:datagrid id="DataGrid1" runat="server"

  AutoGenerateColumns="False" ...>

  <Columns>

    <fs:RowSelectorColumn AllowSelectAll="True" SelectionMode="Multiple" />

    <asp:BoundColumn DataField="CompanyName" HeaderText="得意先" />

    <asp:BoundColumn DataField="ContactName" HeaderText="担当者" />

    <asp:BoundColumn DataField="Phone" HeaderText="電話" />

  </Columns>

</asp:datagrid>

 

リスト14 ボタンクリック時のイベント

Imports MetaBuilders.WebControls

 

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

 ByVal e As System.EventArgs) Handles Button1.Click

  Dim rsc As RowSelectorColumn = RowSelectorColumn.FindColumn(DataGrid1)

 

  For Each i As Integer In rsc.SelectedIndexes

    Dim item As DataGridItem = DataGrid1.Items(i)

    Label1.Text &= String.Format("<li>得意先ID {0} の《{1}》を選択しました!", _

    DataGrid1.DataKeys(i), item.Cells(1).Text)

  Next

End Sub

 

ASP.NET 徹底活用術のホームへ戻る