Ngôn ngữ ASP.NET - Điều khiển ListView
Đối tượng điều khiển ListView
ListView control là 1 control hiển thị dử liệu mới được thêm vào trong .NET 3.5, bạn có lẻ tự hỏi là tại sao nó được thêm vào và nó cung cấp những gì?
Một số tính năng cơ bản nhất của ListView control:
- Rất linh động và bố trí tùy thích.
- Xây dựng sẳn tính năng phân trang kết hợp với DataPager control.
- Hổ trợ nhóm dử liệu.
- Xây dựng sẳn các tính năng như: thêm, xóa, sửa, sắp xếp dử liệu.
Ví dụ: tạo trang web ListViewCustomerList.aspx:
Bước 1: Kéo thả điều khiển FormView từ ToolBox -> Chọn New data source
Bước 2: Chọn kết nối với cơ sở dữ liệu -> chọn chuỗi kết nối -> chọn table cần làm nguồn dữ liệu
-> Chọn Ok
Bước 3 : Chọn định dạng cho ListView
Bước 4: Thay đối các tiêu đề ListView và các Button sang tiếng Việt
Bước 4: Chuyển sang tiếng Việt cho DataPager
Code trang ListViewCustomerList.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListViewCustometList.aspx.cs" Inherits="ListViewBookList" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="ListView1" runat="server" DataKeyNames="MaKH" DataSourceID="SqlDataSource1" InsertItemPosition="LastItem">
<AlternatingItemTemplate>
<tr style="background-color:#FFF8DC;">
<td>
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="Xóa" />
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Sửa" />
</td>
<td>
<asp:Label ID="MaKHLabel" runat="server" Text='<%# Eval("MaKH") %>' />
</td>
<td>
<asp:Label ID="HoTenKHLabel" runat="server" Text='<%# Eval("HoTenKH") %>' />
</td>
<td>
<asp:Label ID="DiaChiKHLabel" runat="server" Text='<%# Eval("DiaChiKH") %>' />
</td>
<td>
<asp:Label ID="DienThoaiKHLabel" runat="server" Text='<%# Eval("DienThoaiKH") %>' />
</td>
<td>
<asp:Label ID="NgaySinhLabel" runat="server" Text='<%# Eval("NgaySinh") %>' />
</td>
<td>
<asp:Label ID="EmailLabel" runat="server" Text='<%# Eval("Email") %>' />
</td>
</tr>
</AlternatingItemTemplate>
<EditItemTemplate>
<tr style="background-color:#008A8C;color: #FFFFFF;">
<td>
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Cập nhật" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Hủy" />
</td>
<td>
<asp:Label ID="MaKHLabel1" runat="server" Text='<%# Eval("MaKH") %>' />
</td>
<td>
<asp:TextBox ID="HoTenKHTextBox" runat="server" Text='<%# Bind("HoTenKH") %>' />
</td>
<td>
<asp:TextBox ID="DiaChiKHTextBox" runat="server" Text='<%# Bind("DiaChiKH") %>' />
</td>
<td>
<asp:TextBox ID="DienThoaiKHTextBox" runat="server" Text='<%# Bind("DienThoaiKH") %>' />
</td>
<td>
<asp:TextBox ID="NgaySinhTextBox" runat="server" Text='<%# Bind("NgaySinh") %>' />
</td>
<td>
<asp:TextBox ID="EmailTextBox" runat="server" Text='<%# Bind("Email") %>' />
</td>
</tr>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<tr style="">
<td>
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="Thêm" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Xóa trắng" />
</td>
<td> </td>
<td>
<asp:TextBox ID="HoTenKHTextBox" runat="server" Text='<%# Bind("HoTenKH") %>' />
</td>
<td>
<asp:TextBox ID="DiaChiKHTextBox" runat="server" Text='<%# Bind("DiaChiKH") %>' />
</td>
<td>
<asp:TextBox ID="DienThoaiKHTextBox" runat="server" Text='<%# Bind("DienThoaiKH") %>' />
</td>
<td>
<asp:TextBox ID="NgaySinhTextBox" runat="server" Text='<%# Bind("NgaySinh") %>' />
</td>
<td>
<asp:TextBox ID="EmailTextBox" runat="server" Text='<%# Bind("Email") %>' />
</td>
</tr>
</InsertItemTemplate>
<ItemTemplate>
<tr style="background-color:#DCDCDC;color: #000000;">
<td>
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="Xóa" />
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Sửa" />
</td>
<td>
<asp:Label ID="MaKHLabel" runat="server" Text='<%# Eval("MaKH") %>' />
</td>
<td>
<asp:Label ID="HoTenKHLabel" runat="server" Text='<%# Eval("HoTenKH") %>' />
</td>
<td>
<asp:Label ID="DiaChiKHLabel" runat="server" Text='<%# Eval("DiaChiKH") %>' />
</td>
<td>
<asp:Label ID="DienThoaiKHLabel" runat="server" Text='<%# Eval("DienThoaiKH") %>' />
</td>
<td>
<asp:Label ID="NgaySinhLabel" runat="server" Text='<%# Eval("NgaySinh") %>' />
</td>
<td>
<asp:Label ID="EmailLabel" runat="server" Text='<%# Eval("Email") %>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr runat="server" style="background-color:#DCDCDC;color: #000000;">
<th runat="server"></th>
<th runat="server">Mã Khách hàng</th>
<th runat="server">Tên khách hàng</th>
<th runat="server">Địa chỉ</th>
<th runat="server">Điện thoại</th>
<th runat="server">Ngày sinh</th>
<th runat="server">Email</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="text-align: center;background-color: #CCCCCC;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" FirstPageText="Trang đầu"
LastPageText ="Trang cuối" NextPageText="Tiếp theo" PreviousPageText="Quay lại"
ShowFirstPageButton="True" ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<SelectedItemTemplate>
<tr style="background-color:#008A8C;font-weight: bold;color: #FFFFFF;">
<td>
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="Delete" />
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
</td>
<td>
<asp:Label ID="MaKHLabel" runat="server" Text='<%# Eval("MaKH") %>' />
</td>
<td>
<asp:Label ID="HoTenKHLabel" runat="server" Text='<%# Eval("HoTenKH") %>' />
</td>
<td>
<asp:Label ID="DiaChiKHLabel" runat="server" Text='<%# Eval("DiaChiKH") %>' />
</td>
<td>
<asp:Label ID="DienThoaiKHLabel" runat="server" Text='<%# Eval("DienThoaiKH") %>' />
</td>
<td>
<asp:Label ID="NgaySinhLabel" runat="server" Text='<%# Eval("NgaySinh") %>' />
</td>
<td>
<asp:Label ID="EmailLabel" runat="server" Text='<%# Eval("Email") %>' />
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:QLBANSACH1ConnectionString %>" DeleteCommand="DELETE FROM [KHACHHANG] WHERE [MaKH] = @original_MaKH AND (([HoTenKH] = @original_HoTenKH) OR ([HoTenKH] IS NULL AND @original_HoTenKH IS NULL)) AND (([DiaChiKH] = @original_DiaChiKH) OR ([DiaChiKH] IS NULL AND @original_DiaChiKH IS NULL)) AND (([DienThoaiKH] = @original_DienThoaiKH) OR ([DienThoaiKH] IS NULL AND @original_DienThoaiKH IS NULL)) AND (([NgaySinh] = @original_NgaySinh) OR ([NgaySinh] IS NULL AND @original_NgaySinh IS NULL)) AND (([Email] = @original_Email) OR ([Email] IS NULL AND @original_Email IS NULL))" InsertCommand="INSERT INTO [KHACHHANG] ([HoTenKH], [DiaChiKH], [DienThoaiKH], [NgaySinh], [Email]) VALUES (@HoTenKH, @DiaChiKH, @DienThoaiKH, @NgaySinh, @Email)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [MaKH], [HoTenKH], [DiaChiKH], [DienThoaiKH], [NgaySinh], [Email] FROM [KHACHHANG]" UpdateCommand="UPDATE [KHACHHANG] SET [HoTenKH] = @HoTenKH, [DiaChiKH] = @DiaChiKH, [DienThoaiKH] = @DienThoaiKH, [NgaySinh] = @NgaySinh, [Email] = @Email WHERE [MaKH] = @original_MaKH AND (([HoTenKH] = @original_HoTenKH) OR ([HoTenKH] IS NULL AND @original_HoTenKH IS NULL)) AND (([DiaChiKH] = @original_DiaChiKH) OR ([DiaChiKH] IS NULL AND @original_DiaChiKH IS NULL)) AND (([DienThoaiKH] = @original_DienThoaiKH) OR ([DienThoaiKH] IS NULL AND @original_DienThoaiKH IS NULL)) AND (([NgaySinh] = @original_NgaySinh) OR ([NgaySinh] IS NULL AND @original_NgaySinh IS NULL)) AND (([Email] = @original_Email) OR ([Email] IS NULL AND @original_Email IS NULL))">
<DeleteParameters>
<asp:Parameter Name="original_MaKH" Type="Int32" />
<asp:Parameter Name="original_HoTenKH" Type="String" />
<asp:Parameter Name="original_DiaChiKH" Type="String" />
<asp:Parameter Name="original_DienThoaiKH" Type="String" />
<asp:Parameter Name="original_NgaySinh" Type="DateTime" />
<asp:Parameter Name="original_Email" Type="String" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="HoTenKH" Type="String" />
<asp:Parameter Name="DiaChiKH" Type="String" />
<asp:Parameter Name="DienThoaiKH" Type="String" />
<asp:Parameter Name="NgaySinh" Type="DateTime" />
<asp:Parameter Name="Email" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="HoTenKH" Type="String" />
<asp:Parameter Name="DiaChiKH" Type="String" />
<asp:Parameter Name="DienThoaiKH" Type="String" />
<asp:Parameter Name="NgaySinh" Type="DateTime" />
<asp:Parameter Name="Email" Type="String" />
<asp:Parameter Name="original_MaKH" Type="Int32" />
<asp:Parameter Name="original_HoTenKH" Type="String" />
<asp:Parameter Name="original_DiaChiKH" Type="String" />
<asp:Parameter Name="original_DienThoaiKH" Type="String" />
<asp:Parameter Name="original_NgaySinh" Type="DateTime" />
<asp:Parameter Name="original_Email" Type="String" />
</UpdateParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
OnPagePropertiesChanging=”OnPagePropertiesChanging”: là sự kiện được gọi ở code behind, thực hiện chuyển trang
– ItemTemplate: là phần code tùy chỉnh để tạo một template hiển thị (tin tức chẳng hạn)
– EmptyDataTemplate: dòng hiển thị khi dữ liệu rỗng
– DataPager: là phần trang của Listview, cùng với các button Next, Preview và Page number
thực thi trang web trên cho kết quả:
So Sánh ListView với các control dạng lưới
ListView là 1 control hiển thị dữ liệu mới được thêm vào trong .NET 3.5. Các Control hiển thị dữ liệu trước đó là Repeater, DataList, GridView. Repeater được biết đến là đơn giản và tốc độ, sau đó DataList có nhiều tính năng hơn, cuối cùng là GridView phức tạp nhất, nhiều tính năng nhất nhưng nặng do đó sẽ load trang chậm
ListView sẽ khắc phục các nhược điểm của các control trước nó là tốc độ và bố trí linh hoạt. Cung cấp thêm các tính năng phân trang, update, delete records. Do đó ListView sẽ là lựa chọn tốt hơn so với Repeater và DataList
Hãy nhìn vào bảng so sánh bên dưới bạn sẽ rõ:
Control | Phân trang | Nhóm | bố trí linh động | Cập nhật/ Xoá | Thêm | Sắp xếp |
ListView | hổ trợ | hổ trợ | hổ trợ | hổ trợ | hổ trợ | hổ trợ |
GridView | hổ trợ | không | không | hổ trợ | không | hổ trợ |
DataList | không | hổ trợ | hổ trợ | không | không | không |
Repeater | không | không | hổ trợ | không | Không | không |
GridView: hỗ trợ phân trang, nhưng không linh động trong việc bố trí, mục tiêu chính cho việc hiển thị dử liệu, không xây dựng sẳn chức năng thêm, tức là chúng ta không thể gọi phương thức thêm, khi chúng ta nhấn vào nút (Button) với CommandName là "Insert".
DataList: hổ trợ nhóm dử liệu, thông qua thuộc tính RepeatColumns, nhưng nó không có xây dựng sẳn chức năng phân trang, thêm, xoá, cập nhật dử liệu, nhìn vào các bố trí của nó, thì mặc định datalist biểu hiện (render) như dạng bảng html và bạn phải thiết lập thuộc tính flowLayout của nó thành Flow để ngăn chặn hành xử này.
Repeater: Repeater chỉ đơn giản lặp dữ liệu và hiển thị dữ liệu theo templace. Quá trình lặp đi lặp lại thường là mã HTML + dữ liệu. Với cùng một templace và cùng dữ liệu, Repeater thường hoạt động nhanh hơn so với DataList hoặc GridView.
So với GridView và DataList, Repeater còn một số hạn chế. Repeater không hỗ trợ chỉnh sửa dữ liệu. Ngoài ra, nó không cung cấp phân trang và sắp xếp.