Repeater 控件

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.绑定数据与简单操作

　　在后台中代码绑定

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

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

 <asp:Repeater ID="Repeater1" runat="server">　　　　<%--插入Repester控件--%>

             <HeaderTemplate>　　　　　　　　　　　　　　<%--列头显示--%>

                 <table id="tb">

                     <tr id="tr_head">

                         <td>用户名</td>

                         <td>密码</td>

                         <td>昵称</td>

                         <td>性别</td>

                         <td>年龄</td>

                         <td>生日</td>

                         <td>民族</td>

                         <td>操作</td> 　　　　　　　　　　　　　　　　<%--插入一个操作列--%>

                     </tr>

             </HeaderTemplate>

             <ItemTemplate>　　　　　　　　　　　　　　　　　　　　　　　　<%--循环展示数据--%>

                 <tr class="tr_item" style="<%#Eval("Red") %>"> <%--扩展一个Red属性，可用于样式表中，作一个预警--%>

                     <td><%#Eval("Username") %></td>

                     <td><%#Eval("Pword") %></td>

                     <td><%#Eval("Nickname") %></td>

                     <td><%#Eval("Sexstr") %></td>

                     <td><%#Eval("Age") %></td>

                     <td><%#Eval("Birstr") %></td>

                     <td><%#Eval("NationName") %></td>

                     <td>

                         <a onclick="return del();" href="Delte.aspx?id=<%#Eval("Username") %>" >删除</a> &nbsp

                         <a href="updata.aspx?upid=<%#Eval("Username") %>" target="_blank" >修改</a>  <%--删除与修改操作--%>

                     </td>

                 </tr>

             </ItemTemplate>

             <FooterTemplate></table></FooterTemplate>      　　　　《%-- 列尾显示--%>

         </asp:Repeater>

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

 public int Age  //计算年龄

     {

         get { return DateTime.Now.Year - _Birthday.Year; }

     }

     public string Red

     {

         get {

             if (Age < )//年龄小于20

             {

                 return "background-color: red;"; //样式表的样式

             }

             else //如果不是年龄小于20返回一个空的字符创

             {

                 return "";

             }

         }

     }

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

<script type="text/javascript">

                var item = document.getElementsByClassName("tr_item");

                for (var v = ; 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)里面，在进行修改操作

2.为 Repeater 控件创建模板

相关文章