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ái Lan</option>
<option value="Lào">Là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
- Dùng công cụ trực quan của Visual Studio
- 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ả