Ngôn ngữ ASP.NET - Điều khiển CheckBoxList

Điều khiển CheckBoxList của Web Form

Dùng để tạo ra nhóm các CheckBox, cho phép người sử dụng chọn nhiều trong nhiều chọn lựa. Đây là điều khiển danh sách nên nó cũng có thuộc tính items chứa tập hợp các mục chọn
Để tạo CheckBoxList bạn có thể viết code hoặc kéo thả từ công cụ trực quan của Visual Studio.

Cú pháp tạo điều khiển CheckBoxList phía Server:

 <asp:CheckBoxList ID="CheckBoxList1" runat="server">
     <asp:ListItem>Lập Trình C</asp:ListItem>
     <asp:ListItem>Lập Trình Web</asp:ListItem>
     <asp:ListItem>Lập Trinh Di Động</asp:ListItem>
     <asp:ListItem>Lập Trình Window</asp:ListItem>
</asp:CheckBoxList>

Phía server xử lý code trên trả về cho trình duyệt dạng HTML:

<table id="CheckBoxList1">
	<tr>
		<td><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="Lập Trình C" /><label for="CheckBoxList1_0">Lập Trình C</label></td>
	</tr><tr>
		<td><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="Lập Trình Web" /><label for="CheckBoxList1_1">Lập Trình Web</label></td>
	</tr><tr>
		<td><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="Lập Trinh Di Động" /><label for="CheckBoxList1_2">Lập Trinh Di Động</label></td>
	</tr><tr>
		<td><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" value="Lập Trình Window" /><label for="CheckBoxList1_3">Lập Trình Window</label></td>
	</tr>
</table>

Bảng thuộc tính điều khiển CheckBoxList

Thuộc tính Ý nghĩa
(ID) Qui định tên của điều khiển. Tên của điều khiển là duy nhất.
AccessKey Qui định ký tự để di chuyển nhanh đến điều khiển - ký tự xử lý phím nóng.
BackColor Qui định màu nền của điều khiển.
CssClass Qui định hình thức hiển thị của điều khiển qua tên CSS.
Enabled Qui định điều khiển có được hiển thị hay không. Giá trị mặc định của thuộc tính này là True – được phép hiển thị.
Font Qui định Font hiển thị cho điều khiển
ForeColor Qui định màu chữ hiển thị trên điều khiển
Height Qui định chiều cao của điều khiển
ToolTip Dòng chữ sẽ hiển thị khi rê chuột vào điều khiển.
Width Qui định độ rộng của điều khiển.
AutoPostBack Thuộc tính này qui định điều khiển có được phép tự động PostBack về Server khi chỉ số của mục chọn bị thay đổi. Giá trị mặc định của thuộc tính này là False - không tự động Postback.
Items Đây là tập hợp chứa các mục chọn của điều khiển. Ta có thể thêm vào mục chọn vào thời điểm thiết kế thông qua cửa sổ ListItem Collection Editor, hoặc thông qua lệnh.
RepeatColumns Số cột hiển thị.
RepeatDirection Hình thức hiển thị
Vertical: chiều dọc
Horizontal: chiều ngang

Window thuộc tính CheckBoxList

 

Ví dụ: Tạo trang web CheckBoxList.aspx cho người sử dụng chọn các môn học sau:

Bước 1: Kéo CheckBoxList từ thanh toolbox vào trang web

Bước 2: Vào Window  thuộc tính chọn Item thêm dữ liệu cho CheckBoxList

Bước 3: Click vào Collection sẽ mở một window mới như sau, Ban đầu không có dữ liệu, click vào nút add để thêm Text và Value cho CheckBoxList.

Sau đó click vào Ok

Code trang CheckBoxList.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBoxList.aspx.cs" Inherits="CheckBoxList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <table style="width: 51%;">
        <tr>
            <td>Bạn Thích môn học nào?</td>
        </tr>
        <tr>
            <td>
    <form id="form1" runat="server">
    <div>
    
        <asp:CheckBoxList ID="chkSubject" runat="server">
            <asp:ListItem>Lập Trình C</asp:ListItem>
            <asp:ListItem>Lập Trình Web</asp:ListItem>
            <asp:ListItem>Lập Trinh Di Động</asp:ListItem>
            <asp:ListItem>Lập Trình Window</asp:ListItem>
        </asp:CheckBoxList>
    
    </div>
    </form>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnView" runat="server" Text="Xem các môn học đã chọn" Width="227px" />
            </td>
        </tr>
        <tr>
            <td>Danh sách các môn học thích:</td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblChoose" runat="server" Text="Label"></asp:Label>
            </td>
        </tr>
    </table>
    <asp:CheckBoxList ID="CheckBoxList1" runat="server" Height="29px" Width="135px">
    </asp:CheckBoxList>
</body>
</html>

Code behind trang CheckBoxList.aspx.cs

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

public partial class CheckBoxList : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnView_Click(object sender, EventArgs e)
    {
        string subject;
        subject = chkSubject.SelectedItem.Text;
        lblChoose.Text = "Môn học yêu thích:";
        for (int i = 0; i < chkSubject.Items.Count; i++)
            if (chkSubject.Items[i].Selected)
                lblChoose.Text += "<br/>" + chkSubject.Items[i].Text;

    }
}

Thực thi trang web cho kết quả

Chọn các mục sau đó click vào button cho kết quả