WebForm Repeater: 重复器

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

 Repeater支持以下5种模板      

● ItemTemplate : 对每一个数据项进行格式设置 【Formats each item from the data source.】      
● AlternatingItemTemplate : 对交替数据项进行格式设置      
● SeparatorTemplate : 对分隔符进行格式设置      
● HeaderTemplate : 对页眉进行格式设置 ，在加载开始执行一遍    
● FooterTemplate : 对页脚进行格式设置，在加载最后执行一遍     
以上，英文中使用了Formats item from datasource这样的话，就说明Repeater控件主要是用来对数据进行Format的，控制数据怎么样排列，怎么样显示。      
Repeater必须使用的是Itemtemplate，其它的类型模板按需添加。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #table {
             100%;
            text-align: center;
            border: 0px;
        }

        .tr {
            background-color: #00ffff;
        }

        .td {
            background-color: #444;
        }

            .td:hover {
                transition: 0.7s;
                background-color: #00ff90;
            }

        .tt {
            background-color: #00ff90;
        }

        .tr:hover {
            transition: 0.7s;
            background-color: #444;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                    <table id="table">
                        <tr id="tt">
                            <td>编号</td>
                            <td>用户名</td>
                            <td>密码</td>
                            <td>昵称</td>
                            <td>性别</td>
                            <td>生日</td>
                            <td>民族</td>
                            <td>班级</td>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr class="tr" style="<%# Eval("Nationa")%>">
                        <td><%# Eval("ids") %></td>
                        <td><%#Eval("UserName") %></td>
                        <td><%#Eval("PassWordssr")%></td>
                        <td><%#Eval("NickName")%></td>
                        <td>
                            <img src="<%#Eval("sss") %>" /></td>
                        <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td>
                        <td><%#Eval("Nationssr") %></td>
                        <td><%#Eval("Classssr") %></td>
                    </tr>
                </ItemTemplate>


                <AlternatingItemTemplate>
                    <tr class="td" style="<%# Eval("Nationa")%>">
                        <td><%# Eval("ids") %></td>
                        <td><%#Eval("UserName") %></td>
                        <td><%#Eval("PassWordssr")%></td>
                        <td><%#Eval("NickName")%></td>
                        <td>
                            <img src="<%#Eval("sss") %>" />
                        </td>
                        <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td>
                        <td><%#Eval("Nationssr") %></td>
                        <td><%#Eval("Classssr") %></td>
                    </tr>
                </AlternatingItemTemplate>


                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>





        </div>
    </form>
</body>
</html>
前台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Repeater1.DataSource = new UsersData().select();
        Repeater1.DataBind();
    }
}
后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Users 的摘要说明
/// </summary>
public class Users
{
    public Users()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }


    public int Ids { get; set; }
    public string UserName { get; set; }
    public string PassWord { get; set; }
    public string NickName { get; set; }
    public bool Sex { get; set; }
    public DateTime Birthday { get; set; }
    public string Nation { get; set; }
    public string Class { get; set; }

    public string Sexssr
    {
        get
        {
            string Sexssr = Sex ? "男" : "女";
            return Sexssr;
        }
    }

    public string Nationssr
    {
        get
        {
            string Nationssr = null;
            if (Nation == "N001")
            {
                Nationssr = "汉族";
            }
            else if (Nation == "N002")
            {
                Nationssr = "苗族";
            }
            else if (Nation == "N003")
            {
                Nationssr = "满族";
            }
            else if (Nation == "N004")
            {
                Nationssr = "藏族";
            }
            return Nationssr;
        }
    }


    public string Classssr
    {
        get
        {
            string Classssr = null;
            if (Class == "C001")
            {
                Classssr = "基础班";
            }
            else if (Class == "C002")
            {
                Classssr = "提高班";
            }
            else if (Class == "C003")
            {
                Classssr = "进阶班";
            }
            else if (Class == "C004")
            {
                Classssr = "总裁班";
            }
            return Classssr;
        }
    }

    public string PassWordssr
    {
        get
        {
            String PassWordssr = "****";
            if (PassWord != "1234")
            {
                PassWordssr = "1234";
            }
            return PassWordssr;
        }
    }


    public String Nationa
    {
        get
        {
            string Nationa = null;
            if (Nation == "N004")
            {
                Nationa = "background-color: Red;";
            }
            return Nationa;
        }
    }


    public string sss
    {
        get
        {
            string sss = null;
            if (Sex)
            {
                sss = "20090119095429234.png";
            }
            else
            {
                sss = "20090119095429248.png";
            }
            return sss;
        }
    }


}
Users
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;       

/// <summary>
/// UsersData 的摘要说明
/// </summary>
public class UsersData
{
    SqlConnection conn = null;
    SqlCommand cmd = null;

    public UsersData()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
        conn = new SqlConnection("server=.;database=data0928;user=sa;pwd=123");
        cmd = conn.CreateCommand();
    }

    public List<Users> select()
    {
        List<Users> Ulist = new List<Users>();
        cmd.CommandText = "select * from Users";
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                Users u = new Users();
                u.Ids = Convert.ToInt32(dr[0].ToString());
                u.UserName = dr[1].ToString();
                u.PassWord = dr[2].ToString();
                u.NickName = dr[3].ToString();
                u.Sex = Convert.ToBoolean(dr[4].ToString());
                u.Birthday = Convert.ToDateTime(dr[5].ToString());
                u.Nation = dr[6].ToString();
                u.Class = dr[7].ToString();
                Ulist.Add(u);

            }
        }
        conn.Close();
        return Ulist;
    }
}
UsersDate

光棒效果

      意思是，当鼠标放上的时候，改变其属性，比如：背景色，边框颜色，边框样式等

      方法：js代码实现，用到两个事件，分别是：onmouseover（鼠标放上）和onmouseout（鼠标离开）

1、不论是正常显示的还是预警显示的，当鼠标放上时，背景色变为黄色；鼠标离开，回复原来的颜色。

复制代码
</style>
    <script >
        window.onload=function(){
            var items = document.getElementsByClassName("tr_Item");
            var oldColor = "";注释：存放原来的背景色
            for (var i = 0; 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>
</head>
<body>
复制代码

2、除预警显示红色不变外，当鼠标放上时，背景色变为黄色；鼠标离开，回复原来的颜色。

复制代码
</style>
    <script >
        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 = oldColor;
                    }
                }
            }
        }
    </script>
复制代码

Repeater控件的事件处理

      Repeater控件有以下事件：      
              ● DataBinding : Repeater控件绑定到数据源时触发      
              ● ItemCommand : Repeater控件中的子控件触发事件时触发      
              ● ItemCreated : 创建Repeater每个项目时触发  
              ● ItemDataBound : Repeater控件的每个项目绑定数据时触发  

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/1030351096zzz/p/6237399.html