WebForm(四)——Repeater控件(重要、好用)

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

一、Repeater控件显示数据

      要使用Repeater控件显示数据,必须创建ItemTemplate。如下所示:

     
例1:使用ItemTemplate显示数据  

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <ItemTemplate>
        <div class="movies">
            <h1><%#Eval("Title") %></h1>
        </div>
        <b>Directed by:</b><%#Eval("Director") %>
        <br />
        <b>Description:</b><%#Eval("Description") %>
    </ItemTemplate>
</asp:Repeater> 
View Code

      以上代码,通过浏览器可以看到,.net不会改变里面的结构,模板里面怎么排列,数据显示也怎么样显示。它的HTML如下所示:

<div class="movies">
     <h1>史密斯行动</h1>
</div>
<b>Directed by:</b>Doug Liman
<br />
<b>Description:</b>约翰(布拉德?皮特 Brad Pitt 饰)和
<div class="movies">
     <h1>暴力街区</h1>
</div>
<b>Directed by:</b>Luc Besson
<br />
<b>Description:</b>卧虎藏龙而又凌乱不堪的13区… 
View Code

      所以,Repeater的灵活性就在这个上面,完全可以自由发挥,想怎么显示就怎么显示。例如,都可以把它放在Javascript代码中     

<script type=”text/javascript”>
    <asp:Repeater id=”rptPhotos” Runat=”server”>
         <ItemTemplate>
              <%# Eval(“Name”, "photos.push(‘Photos/{0}’)") %>
         </ItemTemplate>
    </asp:Repeater>
</script> 
View Code

      以上,photos是一个Javscript数组对象。Repeater生成的数据,最后就像以下这样:   

<script type="text/javascript">
        photos.push('Photos/1.jpg');
        photos.push('Photos/2.jpg');
        photos.push('Photos/3.jpg');
        photos.push('Photos/4.jpg');
        …
</script> 
View Code

 


 

二、Repeater中使用模板
      Repeater支持以下5种模板      
             ● ItemTemplate : 对每一个数据项进行格式设置 【Formats each item from the data source.】      
             ● AlternatingItemTemplate : 对交替数据项进行格式设置     
             ● SeparatorTemplate : 对分隔符进行格式设置     
             ● HeaderTemplate : 对页眉进行格式设置 ,在加载开始执行一遍   
             ● FooterTemplate : 对页脚进行格式设置,在加载最后执行一遍     
       以上,英文中使用了Formats item from datasource这样的话,就说明Repeater控件主要是用来对数据进行Format的,控制数据怎么样排列,怎么样显示。     
       Repeater必须使用的是Itemtemplate,其它的类型模板按需添加。     
例2:以下通过CSS控制,显示了一个比较不错的列表项,要求:①性别由布尔型转成字符串显示:true—男;false—女

                                                                                  ②民族将民族代号转成名族名称显示

                                                                                  ③生日显示:yyyy年MM月dd日的形式(对于要求建议用扩展属性的方法)

数据库连接类: 

/// <summary>
/// Nation 的摘要说明
/// </summary>
public class Nation
{
    
    private string _NationCode;

    public string NationCode
    {
        get { return _NationCode; }
        set { _NationCode = value; }
    }
    private string _NationName;

    public string NationName
    {
        get { return _NationName; }
        set { _NationName = value; }
    }
}
Nation
/// <summary>
/// NationDA 的摘要说明
/// </summary>
public class NationDA
{
    SqlConnection conn = null;
    SqlCommand cmd = null;
    public NationDA()
    {
        conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=128712jdhlys");
        cmd = conn.CreateCommand();
    }

    public Nation Select(string Ncode)
    {
        Nation n = new Nation();

        cmd.CommandText = "select *from Nation where NationCode = @a";
        cmd.Parameters.Clear();
        cmd.Parameters.Add("@a", Ncode);

        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            dr.Read();
            n.NationCode = dr["NationCode"].ToString();
            n.NationName = dr["NationName"].ToString();
        }
        conn.Close();
        return n;
    }
}
NationDA
/// <summary>
/// Users 的摘要说明
/// </summary>
public class Users
{
    
    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; }
    }
    public string SexStr
    {
        get { return _Sex ? "" : ""; }
    }

    private DateTime _Birthday;
    /// <summary>
    /// 生日
    /// </summary>
    public DateTime Birthday
    {
        get { return _Birthday; }
        set { _Birthday = value; }
    }

    public string BirthdayStr
    {
        get { return _Birthday.ToString("yyyy年MM月dd日"); }
    }


    private string _Nation;
    /// <summary>
    /// 民族
    /// </summary>
    public string Nation
    {
        get { return _Nation; }
        set { _Nation = value; }
    }

    public string NationName
    {
        get { return new NationDA().Select(this._Nation).NationName; }

    }

    /// <summary>
    /// 扩展年龄
    /// </summary>
    public string Age
    {
        get { return (DateTime.Now.Year - this._Birthday.Year).ToString(); }
    }
Users
/// <summary>
/// UsersDA 的摘要说明
/// </summary>
public class UsersDA
{
    SqlConnection conn = null;
    SqlCommand cmd = null;
    public UsersDA()
    {
        conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=128712jdhlys");
        cmd = conn.CreateCommand();
    }
    public List<Users> Select()
    {
        List<Users> list = new List<Users>();
        cmd.CommandText = "select * from Users";
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        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["Sex"]);
                da.Birthday = Convert.ToDateTime(dr["Birthday"]);
                da.Nation = dr["Nation"].ToString();
                list.Add(da);
            }
        }
        conn.Close();
        return list;
    }
UsersDA

前台web代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #tb1 {
            width: 100%;
            background-color: navy;
            text-align: center;
        }

        #tr_head {
            color: white;
        }

        .tr_Item {
            background-color: white;
        }

        .tr_Item2 {
            background-color: #e0e0e0;
        }
    </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" >
                    <td><%#Eval("UserName") %></td>
                    <td><%#Eval("Password") %></td>
                    <td><%#Eval("NickName") %></td>
                    <td><%#Eval("SexStr") %></td>
                    <td><%#Eval("BirthdayStr") %></td>
                    <td><%#Eval("Age") %></td>
                    <td><%#Eval("NationName") %></td>
                </tr>
            </ItemTemplate>
            <FooterTemplate >
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </form>
</body>
</html>
前台

后台cs代码:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Repeater1.DataSource = new UsersDA().Select();
            Repeater1.DataBind();
        }
    }
}
后台

效果图:

 


 

三、预警显示

      比如:库存预警,某个物品少于某个数量的时候,改变其数据颜色等。

      方法:通过某个属性值判断后,将某条数据的样式进行更改。

               通过属性扩展的方式,写一个返回string类型的属性,返回的是CSS样式表样式,为了让大家知道,属性值不一定非得是展示用。

例3:运用上一个例题2,要求年龄超过14岁,预警显示为红色。

Users实体类,属性扩展:

/// <summary>
    /// 扩展预警属性
    /// </summary>
    public string Red
    {
        get
        {
            string end = "";
            if (Convert.ToInt32(Age) >= 15)
            {
                end = "background-color:red;";
            }
            return end;
        }
    }
Red属性扩展

前台web更改位置:

 <ItemTemplate>
                <tr class="tr_Item" style="<%#Eval("Red") %>" >
                    <td><%#Eval("UserName") %></td>
                    <td><%#Eval("Password") %></td>
                    <td><%#Eval("NickName") %></td>
                    <td><%#Eval("SexStr") %></td>
                    <td><%#Eval("BirthdayStr") %></td>
                    <td><%#Eval("Age") %></td>
                    <td><%#Eval("NationName") %></td>
                </tr>
            </ItemTemplate>
前台更改

其他不变,效果显示:

 


 

四、光棒效果

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

      方法:js代码实现,用到两个事件,分别是:onmouseover(鼠标放上)和onmouseout(鼠标离开)

例:同样运用上个例题2

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>
View Code

注:效果不好截图,感兴趣的可以写写运行看看。
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>
View Code

注:效果不好截图,感兴趣的可以写写运行看看。

 


 

五、非表格信息展示(比如:京东或者淘宝上,各个商品有规律的一格一格的排列展示)
      方法:1、纯HTML+css+js制作

               2、添加Repeater控件,将数据绑定展示

例:同样运用上面的例题2

前台代码:

<body>
    <form id="form1" runat="server">
        <div id="top"></div>
        <div id="main">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="item">
                        <%#Eval("UserName") %><br />
                        <%#Eval("PassWord") %><br />
                        <%#Eval("NickName") %>
                    </div>
                </ItemTemplate>
            </asp:Repeater>           
        </div>
        <div id="bottom"></div>
        <script type="text/javascript">
            var items = document.getElementsByClassName("item");
            var hei = items[0].offsetHeight;
            document.getElementById("main").style.height = (hei + 10) * Math.ceil(items.length / 4) + 'px';
        </script>
前台

css样式表代码:

* {
    padding: 0px;
    margin: 0px;
}

#top {
    position: relative;
    width: 100%;
    height: 70px;
    background-color: navy;
}

#main {
    position: relative;
    width: 80%;
    left: 10%;
    height: auto;

}

.item {
    position: relative;
    width: 23%;
    margin:5px 1%;
    height: 200px;
    background-color: red;
    float:left;
}


#bottom {
    position: relative;
    width: 100%;
    height: 70px;
    background-color: black;
}
css

注:后台数据绑定和连接数据库一样
效果显示:

 


 

六、Repeater控件的事件处理

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

 

后注:整理不当,有误的地方还请告知,相互学习。且此控件在web中非常好用,相当灵活

转载于:https://www.cnblogs.com/H2921306656/p/5898411.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值