ASP.NET 入門

ホーム > ビュレット付きリスト (BulletedList) > ビュレット付きリスト (BulletedList) のリンクボタン

ビュレット付きリスト (BulletedList) のリンクボタン

ここでは、ビュレット付きリスト (BulletedList) コントロールのリンクボタンを利用する例をみてみましょう。
出来上がりは次のようになります。

ビュレット付きリスト

Visual Web Developer を用いた作成手順

ツールボックスから BulletedList コントロールを選択して、Web フォームにドロップします。

ビュレット付きリスト

BulletedList コントロールのプロパティの Items を選択します。すると、下のスクリーンショットのように、 項目コレクションの編集画面が表示されます。

ビュレット付きリスト

データソースにデータをバインドすることも可能ですが、ここでは、このように Items コレクションを静的に作成します。

また、今回のテスト用にラベルをおいておきましょう。

ビュレット付きリスト

三種類のディスプレーモード

ディスプレイモード (DisplayMode) は、次の三つあります。

  • Text - 文字の表示のみ
  • HyperLink - ハイパーリンク
  • LinkButton - リンクボタン。ポストバックが発生する。

ここでは DisplayModeLinkButton に設定します。これによって、リンクをクリックしたときにポストバックが発生して、 サーバー側のコントロールのイベントハンドラで処理を実行できます。ここで行う処理はラベルに、クリックされた文字をセットすることです。

ビュレット付きリスト

イベントハンドラの設定

項目をクリックされたときのイベントハンドラを設定します。Visual Web Developer では、 黄色の雷アイコン(?)をクリックすると、イベントハンドラの設定画面が表示されます。

ここでは Click イベントのハンドラを設定しましょう。

ビュレット付きリスト

イベントハンドラのコードを編集します。ここでは、クリックされた項目データをラベルにセットするだけです。

     protected void BulletedList1_Click(
         object sender, 
         BulletedListEventArgs e)
     {
         Label1.Text = BulletedList1.Items[e.Index].Text;
     }

イベントハンドラのパラメータとして、BulletedListEventArgs オブジェクトが渡されますが、 これがクリックされた項目のリスト内のインデックスを保持しています。

このインデックスを利用して、元のリストから項目を取得できます。

ホーム > ビュレット付きリスト (BulletedList) > ビュレット付きリスト (BulletedList) のリンクボタン