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("");//读出数据库数据的数据进行数据指向
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) >= )
{
end = "background-color:red;";
}
return end;
}
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------光棒效果：
<style type="text/css">
#tb1 {
width: %;
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 = ; 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>