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

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

ListBox  là điều khiển hiển thị danh sách lựa chọn mà người dùng có thể chọn nhiều . Các mục lựa chọn có thể được thêm vào danh sách thông qua lệnh hoặc ở cửa sổ thuộc tính (Property Windows).

Để tạo điều khiển ListBox có thể kéo thả từ toolbox hoặc viết code.

Cú pháp tạo ListBox Phía Server

  <asp:ListBox ID="ListBox1" runat="server">
      <asp:ListItem>Vịnh Hạ Long</asp:ListItem>
      <asp:ListItem>Phan Thiết - Mũi Né</asp:ListItem>
       <asp:ListItem>Vũng Tàu</asp:ListItem>
       <asp:ListItem>Cần Thơ</asp:ListItem>
       <asp:ListItem>Phú Quốc</asp:ListItem>
 </asp:ListBox>

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

<select size="4" name="ListBox1" id="ListBox1">
	<option value="Vịnh Hạ Long">Vịnh Hạ Long</option>
	<option value="Phan Thiết - Mũi Né">Phan Thiết - Mũi N&#233;</option>
	<option value="Vũng Tàu">Vũng T&#224;u</option>
	<option value="Cần Thơ">Cần Thơ</option>
	<option value="Phú Quốc">Ph&#250; Quốc</option>
</select>
    

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

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.
Rows Qui định chiều cao của ListBox theo số dòng hiển thị.
SelectionMode Thuộc tính này xác định cách thức chọn các mục trong ListBox. SelectionMode chỉ được phép thay đổi trong quá trình thiết kế, vào lúc thực thi chương trình, thuộc tính này chỉ đọc.
o Single: Chỉ được chọn một mục có trong danh sách (mặc định).
o Multiple: Cho phép chọn nhiều lựa chọn.

Window thuộc tính của ListBox

Để tạo dữ liệu cho Listbox có 2 cách

  1.  Dùng công cụ trực quan của  Visual Studio
  2.  Viết code behind trong tập tin.cs 

Cách 1: Tạo trang ListBox.aspx bằng công cụ trực quan của Visual Studio

Bước 1: Kéo Listbox 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 ListBox

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 Listbox.

Bước 4: Nhập dữ liệu cho Listbox vào 2 thuộc tính text và value

Chúng ta có thể nhập nhiều dữ liệu

Sau đó click vào Ok

code trang ListBox.aspx

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ListBox ID="ListBox1" runat="server">
            <asp:ListItem>Vịnh Hạ Long</asp:ListItem>
            <asp:ListItem>Phan Thiết - Mũi Né</asp:ListItem>
            <asp:ListItem>Vũng Tàu</asp:ListItem>
            <asp:ListItem>Cần Thơ</asp:ListItem>
            <asp:ListItem>Phú Quốc</asp:ListItem>
        </asp:ListBox>
    
    </div>
    </form>
</body>
</html>

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


Cách 2: Viết code behind trong tập tin.cs 

Trước khi viết code chúng ta tìm hiểu một số phương mà ListBox cung cấp

Tìm hiểu về tập hợp Items

  • Add: Thêm mục mới vào cuối danh sách, sử dụng phương thức Items.Add
    • Items.Add(<String>);
  • Insert: Thêm mục mới vào danh sách tại một vị trí nào đó, sử dụng phương thức Items.Insert
    • Items.Insert(<index>,<String>);
  •  Count: Trả về số mục (Item) có trong danh sách.
    • Items.Count;
  • Remove: Xóa đối tượng Item tại ra khỏi danh sách.
    • Items.Remove(<Chuoi>);
  • Trong trường hợp các đối tượng Item là kiểu chuỗi, ta truyền vào một chuỗi để xóa. Nếu có nhiều giá trị giống nhau trong danh sách, chỉ có mục chọn đầu tiên bị xóa.
  • RemoveAt: Xóa một item tại vị trí index ra khỏi danh sách.
    • Items.RemoveAt(<index>);
  • Clear: Phương thức Clear của tập hợp Items được dùng để xóa tất cả những Item có trong danh sách. Cú pháp
    • Items.Clear();

Xử lý mục chọn
Các thuộc tính sau sẽ giúp bạn xác định chỉ số, giá trị của mục đang được chọn. Trong trường hợp điều khiển cho phép chọn nhiều, ta duyệt qua các Item trong tập hợp Items, 
Sử dụng thuộc tính Selected của đối tượng Items[i] để kiểm tra xem mục thứ i đó có được chọn hay không. 

  • SelectedIndex: Cho biết chỉ số của mục được chọn. Trong trường hợp chọn nhiều mục, SelectedIndex sẽ trả về chỉ số mục chọn đầu tiên.
  • SelectedItem: Cho biết mục được chọn. Trong trường hợp chọn nhiều mục, SelectedItem sẽ trả về mục chọn đầu tiên.
  • SelectedValue: Cho biết giá trị của mục được chọn. Trong trường hợp chọn nhiều mục, SelectedValue sẽ trả về giá trị mục chọn đầu tiên.

Ví dụ: Tạo Website Dulich  gồm 1 listbox, 2 label , 1 Button trong đó điều khiển Listbox là điều khiển danh sách lstKhu_dl: SelectionMode=Multiple; Rows=4
    Khi thiết kế:
       

Code trang ListBoxDemo.aspx

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 213px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table style="width:100%;">
            <tr>
                <td colspan="2" align="center"><h4>Địa danh du lịch&nbsp;</h4></td>
            </tr>
            <tr>
                <td class="auto-style1">Danh sách địa danh: </td>
                <td>
                    <asp:ListBox ID="lstDiadanh" runat="server" Width="131px"></asp:ListBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style1">Tổng số địa danh</td>
                <td>
                    <asp:Label ID="lblSoDD" runat="server" Text="lblSoDD"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="auto-style1">&nbsp;</td>
                <td>
                    <asp:Button ID="btnChoose" runat="server" Text="Chọn" Width="113px" OnClick="btnChoose_Click" />
                </td>
            </tr>
            <tr>
                <td class="auto-style1">&nbsp;</td>
                <td>
                    <asp:Label ID="lblDiaDanh" runat="server" Text="lblDiaDanh"></asp:Label>
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

Code behind trang ListBoxDemo.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 ListBoxDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lstDiadanh.Items.Add("Vịnh Hạ Long");
            lstDiadanh.Items.Add("Phan Thiết - Mũi Né");
            lstDiadanh.Items.Add("Nha Trang");
            lstDiadanh.Items.Add("Đà Lạt");
            lstDiadanh.Items.Add("Phú Quốc");
            lstDiadanh.Items.Add("Huế - Hội An");
            int n = lstDiadanh.Items.Count;
            lblSoDD.Text = n.ToString();
        }

    }
    protected void btnChoose_Click(object sender, EventArgs e)
    {
        lblDiaDanh.Text = "";
        for (int i = 0; i <= lstDiadanh.Items.Count - 1; i++)
        {
            if (lstDiadanh.Items[i].Selected)
                lblDiaDanh.Text += "<li>" + lstDiadanh.Items[i].Value;
        }
        /* Hoặc
        foreach (ListItem item in lstDiadanh.Items )
          {
         if (item.Selected)
             lbDiadanh.Text  += "<li>" + item.Value    ;
         } */

    }
}

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

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