Tương tự như hai điều khiển GridView và DataList, điều khiển Repeater cũng được sử dụng để hiển thị dữ liệu. Tuy nhiên, để hiển thị dữ liệu chúng ta phải tự thiết kế hình thức hiển thị thông qua các tag HTML.
Điều khiển Repeater có các tag HTML như sau:
- <HeaderTemplate></HeaderTemplate> (Tuỳ chọn): Quy định hình thức hiển thị cho tiêu đề (chỉ xuất hiện 1 lần, phía trên của điều khiển).
- <ItemTemplate></ItemTemplate> (Bắt buộc): Quy định hình thức hiển thị cho các mục dữ liệu trong điều khiển.
- <AlternatingItemTemplate></AlternatingItemTemplate> (Tuỳ chọn): Quy định hình thức hiển thị cho các mục dữ liệu trong điều khiển. Nội dung được quy định trong cặp tag này sẽ hiển thị xen kẽ với các nội dung trong cặp tag: <ItemTemplate></ItemTemplate>. - <SeparatorTemplate></SeparatorTemplate> (Tuỳ chọn): Quy định hình thức hiển thị
giữa các dòng dữ liệu.
- <FooterTemplate></FooterTemplate> (Tuỳ chọn): Quy định hình thức hiển thị cho tiêu đề dưới (chỉ xuất hiện 1 lần, phía dưới cùng của điều khiển).
Ví dụ: Sử dụng điều khiển Repeater để thiết kế trang web với nội dung như sau:
Hình 3.9: Sử dụng điều khiển Repeater
Các tag HTML sử dụng trong ví dụ được viết như sau:
<asp:Repeater ID="rptChudesach" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<table border="1" cellspacing="0">
<tr><td width="60" align="center">
<strong>Mã CĐ</strong> </td>
<td width="150" align="center">
<strong>Tên chủ đề </strong> </td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td> <%# Eval("MaCd") %> </td> <td> <%# Eval("Tenchude")%> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr bgcolor="GhostWhite"> <td> <%# Eval("MaCD")%> </td> <td> <%# Eval("TenChude")%> </td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table>
</FooterTemplate> </asp:Repeater>
3.4. Điều khiển DetailView và FormView
Hai điều khiển này cho phép bạn làm việc với một trường dữ liệu đơn tại mỗi thời điểm Cả hai điều khiển này cho phép chúng ta thay đổi, thêm mới hay xoá dữ liệu như một bản ghi cơ sở dữ liệu, và nó cho phép chuyển sang trang tiếp theo hay quay lại trang trước thông qua thiết lập dữ liệu.
3.4.1. Điều khiển DetailView a. Hiển thị dữ liệu
DetailView được đưa ra hiển thị như một bảng trong HTML để hiển thị dữ liệu như một bản ghi.
Hình 3.10: Hiển thị dữ liệu trong DetailView
b. Sử dụng thuộc tính Field
Điều khiển DetailView hỗ trợ tất cả các Field như trong điều khiển GridView. • BoundView: Cho phép hiển thị giá trị của dữ liệu như dữ liệu Text.
• CheckBoxField: Hiển thị dữ liệu dưới dạng một CheckBox.
• CommandField: Hiển thị liên kết cho phép chỉnh sửa, thêm mới, xoá dữ liệu. • ButtonField: Hiển thị dữ liệu như một Button (ImageButton).
• HyperLinkField: Hiển thị dữ liệu như dữ liệu dạng liên kết. • ImageField: Hiển thị dữ liệu dạng ảnh.
Hình 3.11: Sử dụng Field trong điều khiển DetailView
Ví dụ: Sử dụng điều khiển DetailView với 5 BoundField và một CheckBoxField, điền vào dữ liệu với thuộc tính DataField và thiết lập tiêu đề với HeaderText, tạo phân trang tại góc trên bên phải như sau:
Hình 3.12: Thiết kế DetailView (adsbygoogle = window.adsbygoogle || []).push({});
3.4.2. Điều khiển FormView a. Hiển thị dữ liệu
Điều khiển FormView được sử dụng để hiển thị dữ liệu với các điều khiển tuỳ biến để hiển thị dữ liệu dạng bản ghi.
Hình 3.13: Hiển thị dữ liệu với FormView
b. Thiết kế sử dụng Edit Template
Điều khiển FormView hỗ trợ trình bày dữ liệu dạng tuỳ biến cho tất cả các trường như trong điều khiển DataList.
Các thiết kế được trình bày với các điều khiển tương tự như khi thiết kế điều khiển DataList với các điều khiển tuỳ biến.
Hình 3.14: Thiết kế sử dụng Edit Template