Bài toán yêu cầu sử dụng DataList để hiển thị thông tin phòng máy với các thông số. Đồng thời trong đó sẽ kiểm tra điều kiện.
Nếu máy hỏng sẽ hiển thị hình ảnh máy hỏng
Nếu máy đang sử dụng sẽ hiển thị hình ảnh máy đang sử dụng
Nếu máy chưa sử dụng sẽ hiển thị hình ảnh chưa sử dụng.
Demo sẽ giống như hình trên
Cơ sở dữ liệu đính kèm trong tập tin tải về hoặc tạo như hình sau:
Bước 1: Tạo ra Project Website.
Bước 2: Tạo trang aspx
Bước 3: Kéo control DataList từ Toolbox vào trang mặc định
<asp:DataList ID="DataList1" runat="server">
</asp:DataList>
Bước 4: Chuyển từ chế độ xem dạng Source sang chế độ Design .
Nếu chưa có DataSource thì tạo mới DataSource, tìm đến tên Database cần sử dụng, chọn tên Table.
Bước 5: Chuyển từ chế độ xem dạng Design sang chế độ Source.
Source mới sẽ trông giống như thế này:
<asp:DataList ID="DataList1" runat="server" CellPadding="4" DataKeyField="Id" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="Horizontal" RepeatColumns="4" RepeatDirection="Horizontal"
Width="100%">
<AlternatingItemStyle BackColor="White" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />
<ItemTemplate>
IdMay:
<asp:Label ID="IdLabel" runat="server" Font-Bold="true" ForeColor="red" Text='<%# Eval("Id") %>' />
<br />
IdPhong:
<asp:Label ID="IdPhongLabel" runat="server" Text='<%# Eval("IdPhong") %>' />
<br />
TenMay:
<asp:Label ID="TenMayLabel" runat="server" Text='<%# Eval("TenMay") %>' />
<br />
Status:
<asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("Status") %>' />
<br />
<br />
</ItemTemplate>
<SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:VDMayViTinhConnectionString %>"
SelectCommand="SELECT * FROM [PhongMay]"></asp:SqlDataSource>
RepeatDirection="Horizontal": Mặc định Sắp xếp Id theo chiều ngang. Ngược lại là chiều dọc.
RepeatColumns="4": Lặp 4 cột
Còn lại các thông số màu sắc, border hỗ trợ giao diện template.
Bước 6: Tại trường trạng thái, chỉnh sửa để hiển thị hình ảnh theo điều kiện cho trước
<asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("Status").ToString()=="1" ? "<img src=Images/chuasudung.png width=12px title=\"Chưa sử dụng\" />" : Eval("Status").ToString()=="2" ? "<img src=Images/dangsudung.png width=12px title=\"Đang sử dụng\" />" : "<img src=Images/mayhong.png width=12px title=\"Máy hỏng\" />" %>' />
Toàn bộ Source Code sẽ có dạng như sau:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DNGAZ.com | DOTNETGROUP</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" CellPadding="4" DataKeyField="Id" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="Horizontal" RepeatColumns="4" RepeatDirection="Horizontal"
Width="100%">
<AlternatingItemStyle BackColor="White" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />
<ItemTemplate>
<font color="green" style="font-weight: bold">Mã Máy:</font>
<asp:Label ID="IdLabel" runat="server" Font-Bold="true" ForeColor="red" Text='<%# Eval("Id") %>' />
<br />
Phòng số:
<asp:Label ID="IdPhongLabel" runat="server" Text='<%# Eval("IdPhong") %>' />
<br />
Tên máy:
<asp:Label ID="TenMayLabel" runat="server" Text='<%# Eval("TenMay") %>' />
<br />
Trạng thái:
<asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("Status").ToString()=="1" ? "<img src=Images/chuasudung.png width=12px title=\"Chưa sử dụng\" />" : Eval("Status").ToString()=="2" ? "<img src=Images/dangsudung.png width=12px title=\"Đang sử dụng\" />" : "<img src=Images/mayhong.png width=12px title=\"Máy hỏng\" />" %>' />
<br />
<br />
</ItemTemplate>
<SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:VDMayViTinhConnectionString %>"
SelectCommand="SELECT * FROM [PhongMay]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Tải Source đi kèm phía trên bài viết.