简介：
Repeater控件是Web 服务器控件中的一个容器控件，它使您可以从页的任何可用数据中创建出自定义列表。
Repeater 控件不具备内置的呈现功能，这表示用户必须通过创建模板为 Repeater 控件提供布局。当该页运行时，
Repeater 控件依次通过数据源中的记录为每个记录呈现一个项。
Repeater控件不具备内置的呈现功能，所以我们得用一些模板来实现他的数据呈现
下表描述了 Repeater 控件支持的模板。
模板属性 说明
ItemTemplate 包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件。有多少条数据就执行多少遍
AlternatingItemTemplate 通常，可以使用此模板为交替项创建不同的外观，例如指定一种与在 ItemTemplate 中指定的颜色不同的背景色。一行一个颜色
HeaderTemplate 在开始加载执行一遍
FooterTemplate 在最后加载执行一遍
如果Repeater控件没有指定数据源，它将不显示，如果指定的数据源中没有数据，那么头，脚模板将继续显示。
这个控件主要点：
1，对Repeater几个模板的理解
2，简单实用 Repeater控件实现数据读取以及呈现。
3，实现该控件的嵌套使用
4，实现数据分页
▲：表格展示数据
Users实体类：
using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> /// Users 的摘要说明 /// </summary> public class Users { public Users() { // // TODO: 在此处添加构造函数逻辑 // } 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; } } private DateTime _Birthday; /// <summary> /// 生日 /// </summary> public DateTime Birthday { get { return _Birthday; } set { _Birthday = value; } } private string _Nation; /// <summary> /// 民族 /// </summary> public string Nation { get { return _Nation; } set { _Nation = value; } } //定义性别为string类型的，显示时直接显示男或女，需扩展属性 public string Ssex //前台Eval时 输入的是 Ssex， { get//只读取显示出就可 { return _Sex ? "男" : "女"; } } //定义生日为string类型的，显示时直接显示....年..月..日 public string Birthday2 //前台Eval时 输入的是 Birthday2， { get//同上 { return _Birthday.ToString("yyyy年MM月dd日"); } } //在显示表时 显示出年龄 就要在前台加 Age列，现日期 减 生日 public string Age { get { return (DateTime.Now.Year - this.Birthday.Year).ToString(); } } public string red { get { string end = ""; if (Convert.ToInt32( Age) >= 16) { end = "background-color:red;";//不能写错 } return end; //大于等于16的数据 背景色变红 } } }
public string NationName { get { return new NationDA().Select(this._Nation).NationName; } } public List<Users> Sel {
UserDA里查询所有数据 cmd.CommandText = "select * from Users "; cmd.Parameters.Clear(); conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); List<Users> list = new List<Users>(); if (dr.HasRows) { while (dr.Read()) { Users da = new Users(); da.UserName=dr[0].ToString(); da.PassWord=dr[1].ToString(); da.NickName=dr[2].ToString(); da.Sex=Convert.ToBoolean( dr[3]); da.Birthday=Convert.ToDateTime( dr[4]); da.Nation= dr[5].ToString(); list.Add(da); } } conn.Close(); return list; }
NationDA里显示民族名称的方法：
public string nationnm(string code) { cmd.CommandText = "select NationName from Nation where NationCode=@nationcode"; cmd.Parameters.Clear(); cmd.Parameters.Add("@nationcode", code); conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { dr.Read(); return dr[0].ToString(); } else { return "汉族"; } conn.Close(); }
后台代码。cs:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Repeater1.DataSource = new UsersDA().Select(); Repeater1.DataBind(); } }
前台代码 aspx:
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> 写的样式 #tb1 { 100%; background-color:#0094ff; text-align:center; } #tr_head { color:white; } .tr_Item { background-color:white; } .tr_Item { background-color:#e4dede; } </style> </head> <body> <form id="form1" runat="server"> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table id="tb1"> <tr id="tr_head"> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>生日</td> <td>年龄</td> <td>民族</td> </tr> </HeaderTemplate> <ItemTemplate> <tr class="tr_Item" style='<%#Eval("red") %>'>大于16的显示红色 <td><%#Eval("UserName") %></td> <td><%#Eval("Password") %></td> <td><%#Eval("NickName") %></td> <td><%#Eval("Ssex") %></td> <td><%#Eval("Birthday2") %></td> <td><%#Eval("Age") %></td> <td><%#Eval("Nation") %></td> </tr> </ItemTemplate> <AlternatingItemTemplate> 交替显示 <tr class="tr_Item2"style='<%#Eval("red") %>'> <td><%#Eval("UserName") %></td> <td><%#Eval("Password") %></td> <td><%#Eval("NickName") %></td> <td><%#Eval("Ssex") %></td> <td><%#Eval("Birthday2") %></td> <td><%#Eval("Age") %></td> <td><%#Eval("Nation") %></td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </form> </body> </html>
库存预警：
通过某个属性值判断后，将某条数据的样式进行更改
属性扩展的方式，写一个返回string类型的属性，返回的是CSS样式表样式
属性值不一定非得是展示用
效果图：
JS里的效果：光棒效果；鼠标放上变色，拿走恢复原来的样 <script></script>onmouseout、onmouseout俩事件
库存预警：
通过某个属性值判断后，将某条数据的样式进行更改
属性扩展的方式，写一个返回string类型的属性，返回的是CSS样式表样式
为了让大家知道，属性值不一定非得是展示用
写在head里
<script type="text/javascript"> window.onload = function () { var items = document.getElementsByClassName("tr_Item"); for (var i = 0; i < items.length; i++) { if (items[i].style.backgroundColor != "red") {判断点到红色不变黄 items[i].onmouseover = function () { 移入时 this.style.backgroundColor = "yellow"; }; items[i].onmouseout = function () { 移出时 this.style.backgroundColor = "white"; }; } } };
</script>
</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].onmouseout = function () {
oldColor = this.style.backgroundColor;
this.style.backgroundColor = "yellow";
};
items[i].onmouseout = function () {
this.style.backgroundColor = oldColor; 点到红色也变色
};
}
};
</script>