ItemTemplate: 包含要逐一呈现给数据源中的每个数据项的 HTML 元素和控件
AlternatingItemTemplate: 包含要逐一呈现给数据源中的其他每个数据项的 HTML 元素和控件。通常,可以使用此模板来为替代项创建不同的外观,例如指定一种不同于 ItemTemplate 中所指定颜色的背景色
HeaderTemplate 呈现在列表开始处的文本和空间
FooterTemplate: 呈现在列表结束处的文本和控件
SeparatorTemplate: 包含呈现在每项之间的元素。典型的示例可能是一条直线(使用 HR 元素)
添加Repeater控件,将数据绑定展示
以chinastates表为例:
后台代码
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Repeater1.DataSource = new ChinaStatesData().Select("0001");//读出数据库数据的数据进行数据指向 Repeater1.DataBind();//绑定数据 } }
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
库存预警效果:
以users表为例
用户名 密码 昵称 性别 生日
实体类:
public class Users{ public Users() { } private string _UserName; ////// 用户名 /// public string UserName { get { return _UserName; } set { _UserName = value; } } private string _PassWord; ////// 密码 /// public string PassWord { get { return _PassWord; } set { _PassWord = value; } } private string _NickName; ////// 昵称 /// public string NickName { get { return _NickName; } set { _NickName = value; } } private bool _Sex; ////// 性别 /// public bool Sex { get { return _Sex; } set { _Sex = value; } } public string SexStr //扩展属性 bool类型变为 男或女 { get { return _Sex ? "男" : "女"; } } private DateTime _Birthday; ////// 生日 /// public DateTime Birthday { get { return _Birthday; } set { _Birthday = value; } } public string BirthdayStr //扩展属性 显示年月日 { get { return _Birthday.ToString("yyyy年MM月dd日"); } } private string _Nation; ////// 民族 /// 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; } }
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------光棒效果: