ItemTemplate： 包含要逐一呈現給數據源中的每個數據項的 HTML 元素和控件
AlternatingItemTemplate： 包含要逐一呈現給數據源中的其他每個數據項的 HTML 元素和控件。通常，可以使用此模板來為替代項創建不同的外觀，例如指定一種不同於 ItemTemplate 中所指定顏色的背景色
HeaderTemplate 呈現在列表開始處的文本和空間
FooterTemplate： 呈現在列表結束處的文本和控件
SeparatorTemplate： 包含呈現在每項之間的元素。典型的示例可能是一條直線（使用 HR 元素）
添加Repeater控件，將數據綁定展示
以chinastates表為例：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table style="background-color: navy; text-align: center;"> <tr style="color: white; padding: 10px;"> <td>區域編號</td> <td>區域名稱</td> <td>區域父級編號</td> </tr> </HeaderTemplate> <ItemTemplate> <%--itemtemplate模板 輸出數據行數 --%> <tr style="background-color: #e0e0e0;"> <%--綁定輸出的列--%> <td><%#Eval("AreaCode") %></td> <td><%#Eval("AreaName") %></td> <td><%#Eval("ParentAreaCode") %></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </form> </body> </html>
后台代碼
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Repeater1.DataSource = new ChinaStatesData().Select("0001");//讀出數據庫數據的數據進行數據指向 Repeater1.DataBind();//綁定數據 } }
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
庫存預警效果：
以users表為例
</body><body>
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table>
<td>民族</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("UserName") %></td>
<td><%#Eval("Password") %></td>
<td><%#Eval("NickName") %></td>
<td><%#Eval("SexName") %></td>
<td><%#Eval("birthdayn" )%></td>
<td><%#Eval("NationName") %></td>
</tr>
</ItemTemplate>
<FooterTemplate></table>
</FooterTemplate>
</asp:Repeater>
</form> <tr>
<td>用戶名</td>
<td>密碼</td>
<td>昵稱</td>
<td>性別</td>
<td>生日</td>
實體類：
public class Users { public Users() { } private string _UserName; /// <summary> /// 用戶名 /// </summary> public string UserName { get { return _UserName; } set { _UserName = value; } } private string _PassWord; /// <summary> /// 密碼 /// </summary> public string PassWord { get { return _PassWord; } set { _PassWord = value; } } private string _NickName; /// <summary> /// 昵稱 /// </summary> public string NickName { get { return _NickName; } set { _NickName = value; } } private bool _Sex; /// <summary> /// 性別 /// </summary> public bool Sex { get { return _Sex; } set { _Sex = value; } } public string SexStr //擴展屬性 bool類型變為 男或女 { get { return _Sex ? "男" : "女"; } } private DateTime _Birthday; /// <summary> /// 生日 /// </summary> public DateTime Birthday { get { return _Birthday; } set { _Birthday = value; } } public string BirthdayStr //擴展屬性 顯示年月日 { get { return _Birthday.ToString("yyyy年MM月dd日"); } } private string _Nation; /// <summary> /// 民族 /// </summary> public string Nation { get { return _Nation; } set { _Nation = value; } } public string NationName { get { return new NationData().Select(this._Nation).NationName; } } public string Age { get { return (DateTime.Now.Year - this._Birthday.Year).ToString(); } } public string Red //擴展屬性 加判斷條件 如果大於16歲 該條屬數據背景色變為紅色 返回的是CSS樣式 代碼 { get { string end = ""; if (Convert.ToInt32(Age) >= 16) { end = "background-color:red;"; } return end; } }
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------光棒效果：
<style type="text/css"> #tb1 { width: 100%; background-color: navy; text-align: center; } #tr_head { color: white; } .tr_Item { background-color: white; } .tr_Item2 { background-color: #e0e0e0; } </style> <script type="text/javascript"> window.onload = function () { var items = document.getElementsByClassName("tr_Item"); var oldColor = "";//用來記錄原來的顏色 for (var i = 0; i < items.length; i++) { items[i].onmouseover = function () { oldColor = this.style.backgroundColor; this.style.backgroundColor = "yellow"; }; items[i].onmouseout = function () { this.style.backgroundColor = oldColor; }; } }; </script>