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
  • 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">&nbsp;</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ả: