Điều khiển DataList và các ví dụ mở rộng

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): Hiển thị dữ liệu theo chiều đứng

• RepeatColumns: Qui định số cột hiển thị của DataList

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.

Trong quá trình thực hành, để công việc thiết kế được dễ dàng, các bạn thực hiện thiết kế ở bên ngoài điều khiển DataList. Sử dụng Table (thực đơn Insert -> Table) để định vị trí hiển thị của các điều khiển.

Sau khi hoàn tất công việc thiết kế, chúng ta kéo kết quả đã thiết kế vào vị trí cần hiển thị trong DataList.

Private Sub Page_Load(…, e …) Handles MyBase.Load 
    If Not IsPostBack Then 
    Lien_ket_du_lieu() 
    End If 
    End Sub 
    

Public Sub Lien_ket_du_lieu() 
    dtSach = Doc_danh_sach_Sach() 
    dtlSach.DataSource = dtSach 
    dtlSach.DataKeyField = "Ms" 
    dtlSach.DataBind() 
    End Sub 
    

Private Sub dtlSach_ItemDataBound(…, e …) … 
    Dim lDong as Integer = e.Item.ItemIndex 
    If lDong < 0 Then Exit Sub 
    

'Hiển thị Tên sách 
    Dim lnkTs As LinkButton 
    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
    HyperLink
    LinkButton
    Dim lblMt As Label 
    lblMt = e.Item.FindControl("lblMo_ta") 
    lblMt.Text = Left(e.Item.DataItem("Mo_ta"), 200) & "..." 
    

'Hiển thị hình ảnh minh họa 
    Dim hplHinh As HyperLink 
    hplHinh = e.Item.FindControl("hplHinh_mh") 
    hplHinh.ImageUrl = "../Data_Pic/" & e.Item.DataItem("Hinh_minh_hoa") 
    

'Hiển thị giá bán sách 
    Dim lblGia As Label 
    lblGia = e.Item.FindControl("lblGia_ban") 
    lblGia.Text = e.Item.DataItem("Don_gia") 
    End Sub 
    

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)

Các bước xử lý

Thiết kế

Thiết kế cả 2 vùng ItemTemplate và EditItemTemplate. Thực hiện các thao tác liên kết dữ liệu cho các điều khiển trong vùng EditItemTemplate thông qua cửa sổ thuộc tính tương tự như trong ItemTemplate.

Chú ý : Chúng ta hoàn toàn có thể thực hiện việc liên kết dữ liệu trong sự kiện ItemDataBound.

Chọn chức năng DataBindings cho ô Đơn giá

Liên kết dữ liệu với cột Don_gia

Yêu cầu thiết kế
Tên điều khiển	Thiết lập thuộc tính
Hieu_chinh: ImageButton	CommandName: Edit
Ghi_nhan: ImageButton	CommandName: Update CommandArgument: DataBinder.Eval(Container, "DataItem.Ms") -> Lưu lại mã số của sách đang hiệu chỉnh.
Bo_qua: ImageButton	CommandName: Cancel

Xử lý lệnh để cập nhật dữ liệu

Xử lý các sự kiện EditCommand, CancelCommand, UpdateCommand để thực hiện/bỏ qua việc thay đổi dữ liệu.

Private Sub Page_Load(…, e …) Handles MyBase.Load 
    'Put user code to initialize the page here 
    If Not IsPostBack Then 
    Lien_ket_du_lieu() 
    End If 
    End Sub 
    

Private Sub dtlHang_hoa_EditCommand(…, e …) … 
    dtlHang_hoa.EditItemIndex = e.Item.ItemIndex 
    Lien_ket_du_lieu() 
    End Sub 
    

Private Sub dtlHang_hoa_CancelCommand(…, e …) … 
    dtlHang_hoa.EditItemIndex = -1 
    Lien_ket_du_lieu() 
    End Sub 
    

Private Sub dtlHang_hoa_UpdateCommand(…, e …) … 
    'Xử lý cập nhật dữ liệu tại đây 
    Dim Don_gia_sua As TextBox 
    Don_gia_sua = e.Item.FindControl("Don_gia_sua") 
    'Don_gia_sua.Text Î Trả về đơn giá mới được sửa 
    '…… 
    

dtlHang_hoa.EditItemIndex = -1 
    Lien_ket_du_lieu() 
    End Sub
    

DataList ở chế độ đang hiệu chỉnh

Xử lý đảo hướng sắp xếp trong DataGrid

Ví dụ minh họa dưới đây xử lý đảo hướng sắp xếp trong DataGrid. Đồng thời, trong ví dụ này, chúng tôi thực hiện liên kết dữ liệu qua đối tượng DataView để thực hiện sắp xếp trên nguồn dữ liệu.

Private Sub Page_Load(…, e …) Handles MyBase.Load 
    If Not IsPostBack Then Lien_ket_du_lieu() 
    End Sub 
    

Public Sub Lien_ket_du_lieu() 
    Dim dtKhach_hang As DataTable = Doc_ds_khach_hang() 
    Dim dvKhach_hang As New DataView(dtKhach_hang) 
    

dvKhach_hang.Sort = ViewState("SortExpression") 
    If ViewState("SortAscending") = "false" Then 
    dvKhach_hang.Sort &= " desc" 
    End If 
    dtgKhach_hang.DataSource = dvKhach_hang 
    dtgKhach_hang.DataBind() 
    End Sub 
    

Public Function Doc_ds_khach_hang() As DataTable 
    Dim sKet_noi As String 
    sKet_noi = "Provider=Microsoft.Jet.Oledb.4.0;Data Source=" & _ 
    Server.MapPath("..DataQlBanSach.mdb") 
    Dim cnKet_noi As New OleDbConnection(sKet_noi) 
    Dim dsCSDL As New DataSet 
    

'Mở và đóng kết nối ngay khi thực hiện xong 
    cnKet_noi.Open() 
    Dim daBo_doc_ghi As New OleDbDataAdapter _ 
    ("Select * From KHACH_HANG", cnKet_noi) 
    cnKet_noi.Close() 
    

daBo_doc_ghi.Fill(dsCSDL, "KHACH_HANG") 
    Return dsCSDL.Tables("KHACH_HANG") 
    End Function 
    

Private Sub dtgKhach_hang_SortCommand(…, e …) … 
    Dim sSap_xep As String = ViewState("SortExpression")
    Dim sHuong As String = ViewState("SortAscending") 
    ViewState("SortExpression") = e.SortExpression 
    

If (e.SortExpression = sSap_xep) Then 
    ViewState("SortAscending") = IIf(sHuong = "false", "true", "false") 
    End If 
    Lien_ket_du_lieu() 
    End Sub
    

Tạo biểu tượng sắp xếp trong cột cho DataGrid

Sắp xếp tăng dần theo tên khách hàng

Private Sub dtgKhach_hang_ItemDataBound(…, e …) … 
    If e.Item.ItemType = ListItemType.Header Then 
    Dim sSap_xep As String = ViewState("SortExpression") 
    Dim sHuong As String = ViewState("SortAscending") 
    Dim sKy_hieu As String = IIf(sHuong = "false", " 6", " 5") 
    Dim i% 
    For i = 0 To dtgKhach_hang.Columns.Count - 1 
    If sSap_xep = _ 
    dtgKhach_hang.Columns(i).SortExpression Then 
    Dim cell As TableCell = e.Item.Cells(i) 
    Dim lblKy_hieu As New Label 
    lblKy_hieu.Text = sKy_hieu 
    lblKy_hieu.Font.Name = "webdings" 
    lblKy_hieu.Font.Size = FontUnit.XSmall 
    cell.Controls.Add(lblKy_hieu) 
    End If 
    Next 
    End If 
    End Sub
    

Định dạng hình thức hiển thị cho dòng dữ liệu thỏa điều kiện trên DataGrid

Sau đây, chúng ta thực hiện tô màu cho những khách hàng có tên bắt đầu bằng ký tự H.

Private Sub dtgKhach_hang_ItemDataBound(…, e …) … 
    If e.Item.ItemIndex < 0 Then Exit Sub 
    Dim sTen_kh As String 
    sTen_kh = e.Item.DataItem("Ten_khach_hang") 
    

'Tiến hành kiểm tra điều kiện, 
    'nếu thỏa -> thực hiện các xử lý định dạng 
    If sTen_kh.StartsWith("H") Then 
    e.Item.BackColor = Color.LemonChiffon 
    e.Item.Cells(1).Font.Bold = True 
    End If 
    End Sub
    

Tạo hiệu ứng chọn khi rê chuột qua các dòng dữ liệu

Private Sub dtgKhach_hang_ItemDataBound(…, e …) … 
    If e.Item.ItemIndex < 0 Then Exit Sub 
    e.Item.Attributes("onMouseOver") = _ 
    "this.style.backgroundColor='#FFF8DC'" 
    e.Item.Attributes("onMouseOut") = _ 
    "this.style.backgroundColor='" 
    End Sub 
    

Tạo hiệu ứng chọn dòng dữ liệu trên lưới

Kinh nghiệm giảng dạy:

Các điều khiển liên kết dữ liệu (DataGrid, DataList, Repeater) hỗ trợ khá tốt việc hiển thị dữ liệu trên trang web.

Do hỗ trợ khá nhiều chức năng, giáo viên nên hướng dẫn học viên sử dụng tuần tự từng chức năng mà các điều khiển hỗ trợ. Sau khi nắm vững các thao tác của từng chức năng, học viên có thể phối hợp các chức năng lên cùng một bài tập.