ASP.NET - Điều khiển Repeater

Điều khiển Repeater được sử dụng để hiển thị danh sách các mục lặp lại, các mục này được giới hạn trong điều khiển.

Mô hình

Điều khiển Repeater
Điều khiển Repeater có <AlternatingItemTemplate>
Điều khiển Repeater có <SeparatorTemplate>

Gắn kết DataSet vào điều khiển Repeater

Điều khiển Repeater được sử dụng để hiển thị danh sách các mục lặp lại, các mục này được giới hạn trong điều khiển. Điều khiển Repeater có thể được gắn kết 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 kết tệp XML vào điều khiển Repeater.

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

<?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

Đầu tiên,导入 "System.Data" 命名空间。Chúng ta cần sử dụng tên không gian này cùng với đối tượng DataSet. Trên đầu trang của trang .aspx bao gồm lệnh sau đây：

<%@ 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 điều khiển Repeater trong trang .aspx. Nội dung của Element <HeaderTemplate> chỉ xuất hiện một lần trong đầu ra, nội dung của Element <ItemTemplate> sẽ xuất hiện tương ứng với "record" trong DataSet, và cuối cùng, nội dung của Element <FooterTemplate> chỉ xuất hiện một lần:

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

Sau đó, chúng ta thêm đoạn mã script để tạo DataSet và gán DataSet mycdcatalog này vào điều khiển Repeater. Chúng ta cũng sử dụng các thẻ HTML để làm đầy điều khiển Repeater này, và gán dữ liệu item bằng phương pháp <%#Container.DataItem("fieldname")%> vào ô trong phần <ItemTemplate>:

<%@ 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:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

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

Sử dụng <AlternatingItemTemplate>

Bạn có thể thêm Element <AlternatingItemTemplate> sau Element <ItemTemplate> để mô tả appearances của các hàng chẵn. Trong ví dụ sau, mỗi hàng chẵn của bảng sẽ có nền màu xám nhạt:

<%@ 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:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="#e8e8e8">
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

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

Sử dụng <SeparatorTemplate>

Element <SeparatorTemplate> có thể được sử dụng để mô tả dấu phân cách giữa mỗi bản ghi. Ví dụ sau đây sẽ chèn một đường thẳng ngang giữa mỗi hàng của 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:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="0" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<SeparatorTemplate>
<tr>
<td colspan="6"><hr /></td>
</tr>
</SeparatorTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

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