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

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

DropDownList  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 DropDownList có thể kéo thả từ toolbox hoặc viết code.

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

<asp:DropDownList id="DropDownList1" runat="server"  
     DataSource="<% databindingexpression %>"  
     DataTextField="DataSourceField"  
     DataValueField="DataSourceField"  
     AutoPostBack="True|False"  
     OnSelectedIndexChanged="OnSelectedIndexChangedMethod">  
   <asp:ListItem value="value" selected="True|False">  
      Text  
   </asp:ListItem>  
</asp:DropDownList>  

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

 <select name="cboCountry"  id="cboCountry">
	<option selected="selected" value="Việt Nam">Việt Nam</option>
	<option value="Thái Lan">Th&#225;i Lan</option>
	<option value="Lào">L&#224;o</option>
	<option value="Campuchia">Campuchia</option>

</select>

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

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.

Window thuộc tính của DropDownList 

Để tạo dữ liệu cho DropDownList 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 DropDownList .aspx bằng công cụ trực quan của Visual Studio

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

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 DropDownList 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 DropDownList.aspx

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:DropDownList ID="DropDownList1" runat="server" Height="38px" Width="165px">
            <asp:ListItem>Việt Nam</asp:ListItem>
            <asp:ListItem>Thái Lan</asp:ListItem>
            <asp:ListItem>Lào</asp:ListItem>
            <asp:ListItem>Campuchia</asp:ListItem>
        </asp:DropDownList>
    
    </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 Quốc gia gồm 1 DropDownList, 1 label , trong đó điều khiển DropDownList là điều khiển danh sách cboCountry. Khi người sử dụng chọ 1 quốc gia sẽ hiển thị quốc gia đó lên lblChoose:

Thuộc tính AutoPostBack= true

 Khi thiết kế:
       

Code trang DropDownList.aspx

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:DropDownList ID="cboCountry" runat="server" AutoPostBack="True" Height="38px" OnSelectedIndexChanged="cboCountry_SelectedIndexChanged" Width="165px">
        </asp:DropDownList>
        <br />
        Mục đã chọn: <asp:Label ID="lblChoose" runat="server"></asp:Label>
    
    </div>
    </form>
</body>
</html>

Code behind trang DropDownList.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 DropDownList : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            cboCountry.Items.Add("Việt Nam");
            cboCountry.Items.Add("Thái Lan");
            cboCountry.Items.Add("Lào");
            cboCountry.Items.Add("Campuchia");
            
        }
    }
    protected void cboCountry_SelectedIndexChanged(object sender, EventArgs e)
    {
        lblChoose.Text = cboCountry.Items[cboCountry.SelectedIndex].Value;
    }
}

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

Chọn Combox quốc gia cho kết quả