a. Thuộc tính
2.1. Sử dụng DataList để hiển thị dữ liệu
Như điều khiển DataGrid, điều khiển DataList được sử dụng để hiển thị dữ liệu. Tuy nhiên, đối với DataList, chúng ta phải tự thiết kế hình thức hiển thị dữ liệu (giống như Template Column của DataGrid).
Sử dụng DataList hiển thị thông tin sách
Một số thuộc tính cần chú ý của DataList
RepeatDirection: Qui định hướng hiển thị dữ liệu - Horizontal: Hiển thị dữ liệu theo chiều ngang
- Vertical (mặc định):
RepeatColumns = 3
Thiết kế hình thức hiển thị cho DataList cũng tương tự như thiết kế cho cột Template Column của DataGrid.
Chọn Edit Template | ItemTemplate từ thực đơn ngữ cảnh để thực hiện thiết kế hình thức hiển thị cho DataList.
Chọn chức năng thiết kế cho DataList Ví dụ: Hiển thị thông tin sách với DataList
Thiết kế thông tin sách với DataList
Như cột Template Column của DataGrid, xử lý hiển thị dữ liệu cho DataList được viết trong sự kiện ItemDataBound. Xử lý nhấn của các Button đặt trong DataList được viết trong sự kiện ItemCommand.
private void Page_Load() {
if (!IsPostBack) {
Lien_ket_du_lieu(); }
}
public void Lien_ket_du_lieu() { dtSach = Doc_danh_sach_Sach(); dtlSach.DataSource = dtSach; dtlSach.DataKeyField = "Ms"; dtlSach.DataBind(); }
private void dtlSach_ItemDataBound() {
int lDong = e.Item.ItemIndex; if (lDong < 0) return; //Hiển thị Tên sách LinkButton lnkTs; lnkTs = e.Item.FindControl("lnkTen_sach"); lnkTs.Text = e.Item.DataItem("Ten_sach"); //Hiển thị thông tin mô tả tóm tắt nội dung Label lblMt;
lblMt = e.Item.FindControl("lblMo_ta");
//Hiển thị hình ảnh minh họa HyperLink hplHinh;
hplHinh = e.Item.FindControl("hplHinh_mh");
hplHinh.ImageUrl = "../Data_Pic/" + e.Item.DataItem("Hinh_minh_hoa"); //Hiển thị giá bán sách
Label lblGia;
lblGia = e.Item.FindControl("lblGia_ban"); lblGia.Text = e.Item.DataItem("Don_gia"); }
Kết quả hiển thị thông tin sách trên trang Web
Kết quả trên trang Web 2.2. Cập nhật dữ liệu với DataList
Ngoài việc hiển thị dữ liệu, DataList cũng hỗ trợ các thao tác cập nhật dữ liệu. Để thực hiện chức năng cập nhật dữ liệu với DataList, chúng ta cần phải thiết kế thêm vùng EditIemTemplate cho DataList. (xem hình)