Ngôn ngữ ASP.NET - Điều khiển DataList
Sử dụng DataList để hiển thị dữ liệu
Như điều khiển Gridview, đ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 GridView).
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
- Horizontal: Hiển thị dữ liệu theo chiều ngang
- RepeatColumns: Qui định số cột hiển thị của DataList
Ví dụ: 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 GridView
Bước 1: Chọn Edit Template 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 để đị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.
Bước 2: Chọn chức năng thiết kế cho DataList
Bước 3: Chọn HyperLink từ ToolBox thay thế cột HinhMinhHoa theo hình sau
Code trang InfoBooks.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InfoBooks.aspx.cs" Inherits="DataList" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 70px;
}
.auto-style2 {
width: 355px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="SqlDataSource1" ForeColor="Black">
<AlternatingItemStyle BackColor="PaleGoldenrod" />
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<ItemTemplate>
<table style="width:100%;">
<tr>
<td colspan="3">
<asp:Label ID="TenSachLabel" runat="server" Text='<%# Eval("TenSach") %>' />
</td>
</tr>
<tr>
<td class="auto-style1">
<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl='<%# "~/Hinhdulieu/"+Eval("HinhMinhHoa", "{0}") %>'>HyperLink</asp:HyperLink>
</td>
<td colspan="2">
<asp:Label ID="MoTaLabel" runat="server" Text='<%# Eval("MoTa") %>' />
<br />
<br />
</td>
</tr>
<tr>
<td class="auto-style1"> </td>
<td align="right" class="auto-style2">Giá bán</td>
<td style="color:red;text-align:left">
<asp:Label ID="DonGiaLabel" runat="server" Text='<%# Eval("DonGia") %>' />
</td>
</tr>
</table>
<br />
</ItemTemplate>
<SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLBANSACH1ConnectionString %>" SelectCommand="SELECT [TenSach], [MoTa], [HinhMinhHoa], [DonGia] FROM [SACH]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Thực thi trang web InfoBooks.aspx cho kết quả: