Repeater 控件是一个容器控件,可用于从网页的任何可用数据中创建自定义列表。Repeater 控件没有自己内置的呈现功能,这意味着用户必须通过创建模板来提供 Repeater 控件的布局。当网页运行时,Repeater 控件会循环通过数据源中的记录,并为每个记录呈现一个项。

1.向网页中添加Repeater 控件

将 Repeater 控件从“工具箱”任务窗格拖放到网页上。

2.为 Repeater 控件创建模板

  在“代码”视图中,将插入点放置在 <asp:Repeater></asp:Repeater> 标记内。

   Repeater 控件支持的 Repeater 模板:

  HeaderTemplate 和 FooterTemplate: 包含分别呈现在列表的开始和结束处的文本和控件。

  ItemTemplate: 包含要逐一呈现给数据源中的每个数据项的 HTML 元素和控件。

  AlternatingItemTemplate: 交互显示给数据源中的其他每个数据项的 HTML 元素和控件。通常,可以使用此模板来为替代项创建不同的外观,例如指定一种不同于                  ItemTemplate 中所指定颜色的背景色。

  SeparatorTemplate:一般情况下很少用到 包含呈现在每项之间的元素。典型的示例可能是一条直线(使用 HR 元素)。

3.绑定数据与简单操作

  在后台中代码绑定

1 Repeater1.DataSource = new userData().select();//数据源指向2 Repeater1.DataBind();//数据绑定

界面中显示内容绑定显示数据用<%#Eval("字段名称") %>,一个简单人员管理系统为例,进行简单操作,界面代码:

 1 <asp:Repeater ID="Repeater1" runat="server">    <%--插入Repester控件--%>
 2             <HeaderTemplate>              <%--列头显示--%>
 3                 <table id="tb">
 4                     <tr id="tr_head">
 5                         <td>用户名</td>
 6                         <td>密码</td>
 7                         <td>昵称</td>
 8                         <td>性别</td>
 9                         <td>年龄</td>
10                         <td>生日</td>
11                         <td>民族</td>
12                         <td>操作</td>                 <%--插入一个操作列--%>
13                     </tr>
14             </HeaderTemplate>
15             <ItemTemplate>                        <%--循环展示数据--%>
16                 <tr class="tr_item" style="<%#Eval("Red") %>"> <%--扩展一个Red属性,可用于样式表中,作一个预警--%>
17                     <td><%#Eval("Username") %></td>
18                     <td><%#Eval("Pword") %></td>
19                     <td><%#Eval("Nickname") %></td>
20                     <td><%#Eval("Sexstr") %></td>
21                     <td><%#Eval("Age") %></td>
22                     <td><%#Eval("Birstr") %></td>
23                     <td><%#Eval("NationName") %></td>
24                     <td>
25                         <a οnclick="return del();" href="Delte.aspx?id=<%#Eval("Username") %>" >删除</a> &nbsp
26                         <a href="updata.aspx?upid=<%#Eval("Username") %>" target="_blank" >修改</a>  <%--删除与修改操作--%>
27                     </td>
28                 </tr>
29             </ItemTemplate>
30             <FooterTemplate></table></FooterTemplate>          《%-- 列尾显示--%>
31         </asp:Repeater>

1.通过属性拓展来做一个预警 比如年龄小于20的列显示为红色,就在实体类中拓展一个熟悉,用做样式表中:拓展属性

 1 public int Age  //计算年龄
 2     {
 3         get { return DateTime.Now.Year - _Birthday.Year; }
 4     }
 5     public string Red
 6     {
 7         get {
 8             if (Age < 20)//年龄小于20
 9             {
10                 return "background-color: red;"; //样式表的样式
11             }
12             else //如果不是年龄小于20返回一个空的字符创
13             {
14                 return "";
15             }
17         }
18     }

2.在js端实现一个光棒效果,代码如下  :

<script type="text/javascript"> var item = document.getElementsByClassName("tr_item");for (var v = 0; v < item.length;v++){var ordcolor = "";//定义一个鼠标指向前的颜色                item[v].onmouseover = function ()//鼠标移入颜色变为黄色
                    {ordcolor=this.style.backgroundColor;//记录改变之前的颜色this.style.backgroundColor = "yellow";};item[v].onmouseout = function ()//鼠标移出颜色变为原来的颜色
                    {this.style.backgroundColor = ordcolor;};}</script>    

3.简单的删除与修改操作,用QueryString - 地址栏数据拼接传主键值 格式为?key=value

删除操作:创建一个删除的页面,只需要执行后台代码

    //将要删除的主键值去出来string uname = Request["id"];//执行删除方法new userData().delete(uname);//刷新跳转页面Response.Redirect("Default.aspx");    //为防止用户误操作 可在js端先进行判断确定删除以后在执行 js端del()方法
<script type="text/javascript">function del() {var ok = confirm("是否确定要删除?");if (ok == false) {return false;}}
</script>

修改操作:添加一个属性target="_blank" 在新页面打开,将主键值传到修改页面查出数据绑定到修改页面这里绑定数据要写在if (!IsPostBack)里面,在进行修改操作

 

转载于:https://www.cnblogs.com/fuze/p/6215246.html

Repeater 控件相关推荐

  1. Datalist控件,Repeater控件如何分页?

    Asp.net提供了三个功能强大的列表控件:DataGrid.DataList和Repeater控件,但其中只有DataGrid控件提供分页功能.相对DataGrid,DataList和Repeate ...

  2. Repeater控件的分页问题

    作者:zhoubin@mail.sdu.edu.cn 以前做ASP的时间不算短,可是做ASP.NET我是个新手.前几天做项目,遇到一个问题,要求比较复杂的数据格式显示,用DataGrid非常难实现,后 ...

  3. 使用嵌套的Repeater控件显示分级数据

    作者:wincheer  来自:Asp.Net中文专业网 简介 本文描述如何使用嵌套的Repeater 控件来显示分级数据 .当然了,你也可以将这一技术应用到其他的列表绑定控件上去,比如DataGri ...

  4. 改变Repeater控件中按钮颜色

    昨晚有在论坛看到一帖,手上的工作一直忙到现在,Insus.NET现在抽点时间尝试实现它. Insus.NET没有使用数据库作为数据源,而是使用List<T>作为数据源.因此你在这篇博文中学 ...

  5. Repeater控件的使用

    Repeater控件的使用 今天学习了Repeater控件的使用,Repeater控件没有定义样式,要自己编写HTML来定义样式,这样工作量可能会大一些,但它所带来的好处是可以随心所欲地定义自己数据的 ...

  6. onmouseover和onmouseout在Repeater控件中应用

    如果你曾看过这篇,http://www.cnblogs.com/insus/articles/1411057.html ,它是在GridView控件中演示,但是它的方法在Repeater控件是无法复制 ...

  7. 读书笔记:《Aspx开发200问》——如何实现Repeater控件的分页

    由于Repeater控件没有分页相关的属性,要使用System.Web.UI.WebControl中的PageDataSource类. PageDataSource封装了DataGrid控件的分页属性 ...

  8. Repeater控件最后一笔记录高亮显示

    Insus.NET以前有写过 <Repeater控件第前10笔记录高亮显示> 不过,现在有一个想法,就是最后一笔记录高亮显示,怎样实现? 技术要求,就是获取最后一笔的索引即可.可以从数据源 ...

  9. Repeater控件

    Repeater控件和DataList控件,可以用来一次显示一组数据项.比如,可以用它们显示一个数据表中的所有行.      Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输 ...

  10. asp.net学习之Repeater控件

    Repeater控件和DataList控件,可以用来一次显示一组数据项.比如,可以用它们显示一个数据表中的所有行.      Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输 ...

最新文章

  1. Windows XP下,JDK环境变量配置
  2. [转] JSON转换
  3. synchronized的可重入怎么实现的
  4. dynamic与var
  5. vue绑定自定义属性(属性值:false),DOM不显示问题
  6. 洛谷 P1344 [USACO4.4]追查坏牛奶Pollutant Control 解题报告
  7. jsp中的四种对象作用域
  8. 吴恩达机器学习【第四天】多元线性规划模型
  9. WebAPI基本封装
  10. base64解密后乱码_php实现php代码的加密解密
  11. kite:Python 代码自动补全神器
  12. nginx下Thinkphp 隐藏index.php
  13. 腾讯面试题:如何实现一个类似新浪微博的短链接服务!
  14. 三思笔记之一步一步学ORACLE
  15. jenkins集成kettle
  16. Untiy 接入 移动MM 详解 转
  17. 系统工程原理(持续更新):3.方法论--霍尔“三维结构”模型
  18. AI崛起,阿里的科技孵化力
  19. 事件分发(EventDispatcher)模式
  20. 论文笔记 Dependent Gaussian Processes 相关高斯过程

热门文章

  1. C++ lq 长整型、字符运算
  2. c语言程序设计秋考答案,南开《C语言程序设计》19秋期末考核【标准答案】
  3. android attributeset 工具类,android attributeset总结
  4. Fresco+retrofit+rxjava+mvp+电商进阶购物车(wxr)
  5. 【推荐】HTTP/HTTPS抓包工具——HttpAnalyzer,替代WSockExpert
  6. Math 相关的用法
  7. pod概念及常用操作
  8. kali浏览器设置中文
  9. thinkpad怎么把计算机设置到桌面,教你thinkpad桌面设置为纯色以及macbook笔记本怎么...
  10. windows7安装node14版本及以上