iPentec.com  /  Document  /  カテゴリ: C#  /  タグ:  C# ASP.NET

目次

ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する

目次

ASP.NET Webフォームで動的に複数のチェックボックスをページに配置してチェック状態を取得できるコードを紹介します。

概要

リストの項目にチェックボックスを用意したい場合など、チェックボックスを動的に複数個配置して、チェック状態を取得したい場合があります。 この記事では、ASP.NET Webフォームでチェックボックスを複数個設置する手順と、チェック状態を取得するコードを紹介します。

プログラム例1 : 要素のオブジェクトに対応するチェックボックスを格納する方法

要素のオブジェクトに対応するチェックボックスのインスタンスを代入して格納する方法です。

UI

下図のWebフォームを作成します。チェックボックスを配置するPlaceHolderコントロールとボタン、メッセージを出力するLiterlコントロールを配置します。

ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する:画像1

コード

Webフォームのコードに下記のコードを記述します。

Checkbox1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DynamicCheckbox
{
  public partial class Checkbox1 : System.Web.UI.Page
  {
    class MyItem
    {
      public int id;
      public string name;
      public CheckBox checkbox;
    }

    private List<MyItem> myList = new List<MyItem>();

    protected void Page_Load(object sender, EventArgs e)
    {
      myList.Add(new MyItem { id = 0, name = "ぺんぎんクッキー" });
      myList.Add(new MyItem { id = 1, name = "しろくまアイス" });
      myList.Add(new MyItem { id = 2, name = "かるがもサブレ" });
      myList.Add(new MyItem { id = 3, name = "らくだキャラメル" });
      myList.Add(new MyItem { id = 4, name = "くじらケーキ" });
      myList.Add(new MyItem { id = 5, name = "かぴばらタルト" });

      for (int i = 0; i < myList.Count; i++)
      {
        CheckBox cb = new CheckBox();
        myList[i].checkbox = cb;

        cb.Text = myList[i].name;
        PlaceHolder1.Controls.Add(cb);
        
        PlaceHolder1.Controls.Add(new Literal() { Text = "</br>" });
      }

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      Literal1.Text = "";

      for (int i = 0; i < myList.Count; i++)
      {
        if (myList[i].checkbox.Checked == true)
        {
          Literal1.Text += String.Format("{0:d}:{1} がチェックされています。</br>", myList[i].id, myList[i].name);
        }
      }
    }
  }
}

解説

表示要素の情報を格納するクラスです。今回はidとnameの2つの情報を持つクラスとして実装します。 checkbox メンバは対応するチェックボックスのオブジェクトを代入する変数です。

    class MyItem
    {
      public int id;
      public string name;
      public CheckBox checkbox;
    }


Loadイベントでは、はじめにListの要素を作成します。

      myList.Add(new MyItem { id = 0, name = "ぺんぎんクッキー" });
      myList.Add(new MyItem { id = 1, name = "しろくまアイス" });
      myList.Add(new MyItem { id = 2, name = "かるがもサブレ" });
      myList.Add(new MyItem { id = 3, name = "らくだキャラメル" });
      myList.Add(new MyItem { id = 4, name = "くじらケーキ" });
      myList.Add(new MyItem { id = 5, name = "かぴばらタルト" });


作成したListの要素をループで取得し、チェックボックスオブジェクトを作成しPlaceHolderコントロール内に配置します。

      for (int i = 0; i < myList.Count; i++)
      {
        CheckBox cb = new CheckBox();
        myList[i].checkbox = cb;

        cb.Text = myList[i].name;
        PlaceHolder1.Controls.Add(cb);
        
        PlaceHolder1.Controls.Add(new Literal() { Text = "</br>" });
      }
    }


作成したチェックボックスをMyItemクラスのcheckboxメンバ変数に代入しておきます。

        myList[i].checkbox = cb;


ボタンがクリックされると、どのチェックボックスがチェックされているかを取得します。 表示要素のListオブジェクトをループで1つずつ取得します。MyItemクラスのcheckbox変数で対応するチェックボックスオブジェクトを取得し、Checkedプロパティの値を確認します。 Checkedプロパティがtrueであれば、チェックされている要素としてLiteralコントロールメッセージを表示します。

    protected void Button1_Click(object sender, EventArgs e)
    {
      Literal1.Text = "";

      for (int i = 0; i < myList.Count; i++)
      {
        if (myList[i].checkbox.Checked == true)
        {
          Literal1.Text += String.Format("{0:d}:{1} がチェックされています。</br>", myList[i].id, myList[i].name);
        }
      }
    }

実行結果

プロジェクトを実行します。下図のページが表示されます。
ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する:画像2

チェックボックスをクリックしてチェックをつけます。チェック後ページ下部の[Button]ボタンをクリックします。
ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する:画像3

ボタンの下部にチェックされている要素がどれかを示すメッセージが表示されます。
ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する:画像4

プログラム例2 : チェックボックスのIDをキーにする方法

UI

下図のWebフォームを作成します。チェックボックスを配置するPlaceHolderコントロールとボタン、メッセージを出力するLiterlコントロールを配置します。
ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する:画像5

コード

Webフォームのコードに下記のコードを記述します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DynamicCheckbox
{
  public partial class Checkbox2 : System.Web.UI.Page
  {
    class MyItem
    {
      public int id;
      public string name;
    }

    private Dictionary<int, MyItem> myList = new Dictionary<int, MyItem>();
    private List<CheckBox> chkList = new List<CheckBox>();

    protected void Page_Load(object sender, EventArgs e)
    {
      myList.Add(0, new MyItem { id = 0, name = "ぺんぎんクッキー" });
      myList.Add(1, new MyItem { id = 1, name = "しろくまアイス" });
      myList.Add(2, new MyItem { id = 2, name = "かるがもサブレ" });
      myList.Add(3, new MyItem { id = 3, name = "らくだキャラメル" });
      myList.Add(4, new MyItem { id = 4, name = "くじらケーキ" });
      myList.Add(5, new MyItem { id = 5, name = "かぴばらタルト" });

      for (int i = 0; i < myList.Count; i++)
      {
        CheckBox cb = new CheckBox();
        cb.ID = myList[i].id.ToString();
        cb.Text = myList[i].name;
        chkList.Add(cb);


        PlaceHolder1.Controls.Add(cb);

        PlaceHolder1.Controls.Add(new Literal() { Text = "</br>" });
      }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      Literal1.Text = "";

      for (int i = 0; i < chkList.Count; i++)
      {
        if (chkList[i].Checked == true)
        {
          int sid = Convert.ToInt32(chkList[i].ID);
          MyItem sItem = myList[sid];
          Literal1.Text += String.Format("{0:d}:{1} がチェックされています。</br>", sItem.id, sItem.name);
        }
      }
    }
  }
}

解説

チェックボックスの項目の情報を格納するMyItemクラスの実装です。 今回の例ではMyItemクラスにはCheckBoxオブジェクトのメンバ変数は含めません。

    class MyItem
    {
      public int id;
      public string name;
    }


項目の要素を複数管理するため、MyItemクラスのDictionaryオブジェクトを作成します。idの値で参照できるよう、キーをint型に設定します。
また、チェックボックスを格納するための List<CheckBox> オブジェクトも作成します。

    private Dictionary<int, MyItem> myList = new Dictionary<int, MyItem>();
    private List<CheckBox> chkList = new List<CheckBox>();


LoadイベントではmyListオブジェクトを作成し要素のMyItemオブジェクトを挿入します。

      myList.Add(0, new MyItem { id = 0, name = "ぺんぎんクッキー" });
      myList.Add(1, new MyItem { id = 1, name = "しろくまアイス" });
      myList.Add(2, new MyItem { id = 2, name = "かるがもサブレ" });
      myList.Add(3, new MyItem { id = 3, name = "らくだキャラメル" });
      myList.Add(4, new MyItem { id = 4, name = "くじらケーキ" });
      myList.Add(5, new MyItem { id = 5, name = "かぴばらタルト" });


myListオブジェクトをループしてCheckBoxオブジェクトを作成してPlaceHolderに追加します。 作成したCheckBoxオブジェクトのIDをMyItemオブジェクトのIDと同じ値にすることで、MyItemオブジェクトとチェックボックスを対応付けます。 また、チェックボックスオブジェクトのリストchkListに作成したCheckBoxオブジェクトを追加します。

      for (int i = 0; i < myList.Count; i++)
      {
        CheckBox cb = new CheckBox();
        cb.ID = myList[i].id.ToString();
        cb.Text = myList[i].name;
        chkList.Add(cb);

        PlaceHolder1.Controls.Add(cb);

        PlaceHolder1.Controls.Add(new Literal() { Text = "</br>" });
      }


ボタンをクリックするとButton1のClickイベントが実行されます。
チェックボックスオブジェクトを代入したリストをループで処理します。チェックボックスのチェックがついている場合は、チェックボックスのIDを取得し、myListから対応するIDのMyItem オブジェクトを取得し、情報を画面に表示します。

      for (int i = 0; i < chkList.Count; i++)
      {
        if (chkList[i].Checked == true)
        {
          int sid = Convert.ToInt32(chkList[i].ID);
          MyItem sItem = myList[sid];
          Literal1.Text += String.Format("{0:d}:{1} がチェックされています。</br>", sItem.id, sItem.name);
        }
      }

実行結果

プロジェクトを実行します。下図のページが表示されます。
ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する:画像6

チェックボックスをクリックしてチェックをつけます。チェック後ページ下部の[Button]ボタンをクリックします。
ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する:画像7

ボタンの下部にチェックされている要素がどれかを示すメッセージが表示されます。
ASP.NET Webフォームで動的に複数のチェックボックスをページに配置する:画像8

AuthorPortraitAlt
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2022-04-19

関連するページ

ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
iPentecについて
プライバシー
お問い合わせ
Copyright © 1995–2025 iPentec all rights reserverd.