ASP.NET - Control DataList

Control DataList, tương tự như Control Repeater, được sử dụng để hiển thị danh sách lặp lại của các mục bị giới hạn bởi control này. Tuy nhiên, control DataList sẽ tự động thêm bảng vào các mục dữ liệu.

Gán DataSet vào control DataList

Control DataList, tương tự như Control Repeater, được sử dụng để hiển thị danh sách lặp lại của các mục bị giới hạn bởi control này. Tuy nhiên, control DataList sẽ tự động thêm bảng vào các mục dữ liệu. Control DataList có thể được gán với bảng cơ sở dữ liệu, tệp XML hoặc danh sách các mục khác. Ở đây, chúng ta sẽ trình bày cách gán tệp XML vào control DataList.

Chúng ta sẽ sử dụng tệp XML sau ("cdcatalog.xml") trong ví dụ:

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
  <title>Empire Burlesque</title>
  <artist>Bob Dylan</artist>
  <country>USA</country>
  <company>Columbia</company>
  <price>10.90</price>
  <year>1985</year>
</cd>
<cd>
  <title>Hide your heart</title>
  <artist>Bonnie Tyler</artist>
  <country>UK</country>
  <company>CBS Records</company>
  <price>9.90</price>
  <year>1988</year>
</cd>
<cd>
  <title>Greatest Hits</title>
  <artist>Dolly Parton</artist>
  <country>USA</country>
  <company>RCA</company>
  <price>9.90</price>
  <year>1982</year>
</cd>
<cd>
  <title>Still got the blues</title>
  <artist>Gary Moore</artist>
  <country>UK</country>
  <company>Virgin records</company>
  <price>10.20</price>
  <year>1990</year>
</cd>
<cd>
  <title>Eros</title>
  <artist>Eros Ramazzotti</artist>
  <country>EU</country>
  <company>BMG</company>
  <price>9.90</price>
  <year>1997</year>
</cd>
</catalog>

Vui lòng xem tệp XML này:cdcatalog.xml

Trước tiên, nhập tên không gian "System.Data" cần thiết để làm việc cùng với đối tượng DataSet. Trên đầu trang của trang .aspx, chúng ta cần bao gồm lệnh chỉ thị sau:

<%@ Import Namespace="System.Data" %>

Tiếp theo, tạo một DataSet cho tệp XML này và tải tệp XML này vào DataSet khi trang được tải lần đầu:

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
end if
end sub

Sau đó, chúng ta tạo một Control DataList trong trang .aspx. Nội dung của phần tử <HeaderTemplate> chỉ xuất hiện một lần trong đầu ra, trong khi nội dung của phần tử <ItemTemplate> sẽ tương ứng với "record" trong DataSet và lặp lại, cuối cùng, nội dung của <FooterTemplate> chỉ xuất hiện một lần trong đầu ra:

<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Sau đó chúng ta thêm đoạn mã để tạo DataSet và gán DataSet mycdcatalog này vào Control DataList. Chúng ta cũng sử dụng các phần tử này để điền vào Control DataList: <HeaderTemplate> chứa tiêu đề bảng, <ItemTemplate> chứa các mục cần hiển thị, và <FooterTemplate> chứa văn bản. Lưu ý rằng thuộc tính gridlines của DataList được đặt là "both" để hiển thị viền bảng:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog"
gridlines="both" runat="server">
<HeaderTemplate>
My CD Catalog
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" của
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Bản quyền codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Hiển thị ví dụ này

Sử dụng样式

Bạn cũng có thể thêm样式 cho Control DataList để làm cho nó trở nên thời trang hơn:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="true"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
footerstyle-font-size="9pt"
footerstyle-font-italic="true"
<HeaderTemplate>
My CD Catalog
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" của
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Bản quyền codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Hiển thị ví dụ này

Sử dụng <AlternatingItemTemplate>

Bạn có thể thêm phần tử <AlternatingItemTemplate> sau phần tử <ItemTemplate> để mô tả外观 của các dòng chẵn. Bạn có thể định dạng样式 cho phần tử <AlternatingItemTemplate> bên trong Control DataList:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="True"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
alternatingitemstyle-backcolor="#e8e8e8"
alternatingitemstyle-forecolor="#000000"
footerstyle-font-size="9pt"
footerstyle-font-italic="True">
<HeaderTemplate>
My CD Catalog
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" của
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" của
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>
<FooterTemplate>
© codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Hiển thị ví dụ này