Repeater控件的嵌套使用

    Repeater控件专门用于精确内容的显示，它也是基于模板的方式，不过它不会自动生成任何用于布局的代码。Repeater控件甚至没有默认的外观，它完全是通过模板控制。而却也只能通过源代码视图进行模板的编辑。Repeater控件由于不自动生成任何HTML标签，所以带来的效率上的提升，也使精确展示内容成为可能。本文将介绍Repeater控件的嵌套使用，如图1.1所示。

图1.1  Repeater控件的嵌套使用

1、页面代码

<%-- 一级Repeater绑定班级信息 --%>
<asp:Repeater ID="rptClassInfo" runat="server" OnItemCreated="On_rptCatsItemCreated">
    <ItemTemplate>
        <div class ="classInfo">
            <h3><%# Eval("ClassName") %></h3>
            <div class="stuInfo">
                <ul class="title">
                    <li>姓名</li>
                    <li>性别</li>
                    <li>年龄</li>
                </ul>
                <%-- 二级Repeater绑定学生信息 --%>
                <asp:Repeater ID="rptStudentInfo" runat="server">
                    <ItemTemplate>
                        <ul class="<%# Container.ItemIndex%2==0?"cor1":"cor2" %>">  <%-- 根据单双行增加样式 --%>
                            <li><%# DataBinder.Eval(Container.DataItem,"Name") %></li>
                            <li><%# DataBinder.Eval(Container.DataItem,"Sex") %></li>
                            <li><%# DataBinder.Eval(Container.DataItem,"Age") %></li>
                        </ul>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

RepeaterItem 成员属性：

Container.ItemIndex：获取Repeater控件的Items集合中的项的索引。

Container.DataItem：获取Repeater控件中RepeaterItem对象关联的数据项。

2、CS端逻辑代码

//绑定班级信息(一级Repeater)
public void BindClassInfo()
{
    List<ClassInfo> classInfoList = GetClassInfoList();//获取所有班级信息
    rptClassInfo.DataSource = classInfoList;
    rptClassInfo.DataBind();
}

//绑定学生信息（二级Repeater）
public void On_rptCatsItemCreated(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        Repeater rptStudentInfo = e.Item.FindControl("rptStudentInfo") as Repeater;
        if (rptStudentInfo != null)
        {
            ClassInfo classInfo = e.Item.DataItem as ClassInfo;
            if (classInfo != null && classInfo.StudentList!=null)
            {
                rptStudentInfo.DataSource = classInfo.StudentList;
                rptStudentInfo.DataBind();
            }
        }
    }
}

3、辅助代码

(1) 班级信息实体类：

/// <summary>
/// 班级信息实体类
/// </summary>
public class ClassInfo 
{
    public string ClassName { get; set; }                //班级名称
    public List<StudentInfo> StudentList { get; set; }   //学生列表
}

(2) 学生信息实体类：

/// <summary>
/// 学生信息实体类
/// </summary>
public class StudentInfo
{
    public string Name { get; set; }   //学生姓名
    public string Sex { get; set; }   //学生性别
    public int Age { get; set; }   //学生年龄
}

(3) 获取所有班级信息方法：

/// <summary>
/// 获取所有班级信息
/// </summary>
/// <returns></returns>
public List<ClassInfo> GetClassInfoList()
{
    List<ClassInfo> classInfoList = new List<ClassInfo>();
    //创建班级1信息
    List<StudentInfo> studentList1 = new List<StudentInfo>();
    StudentInfo stu1 = new StudentInfo() { Name = "李涛", Sex = "男", Age = 13 };
    StudentInfo stu2 = new StudentInfo() { Name = "陈浩", Sex = "男", Age = 12 };
    StudentInfo stu3 = new StudentInfo() { Name = "王林", Sex = "女", Age = 10 };
    StudentInfo stu4 = new StudentInfo() { Name = "李成", Sex = "男", Age = 13 };
    studentList1.Add(stu1);
    studentList1.Add(stu2);
    studentList1.Add(stu3);
    studentList1.Add(stu4);

    ClassInfo classInfo1 = new ClassInfo();
    classInfo1.ClassName = "高一（1）班";
    classInfo1.StudentList = studentList1;

    //创建班级2信息
    List<StudentInfo> studentList2 = new List<StudentInfo>();
    StudentInfo stu5 = new StudentInfo() { Name = "王丽", Sex = "女", Age = 15 };
    StudentInfo stu6 = new StudentInfo() { Name = "孙柳", Sex = "男", Age = 12 };
    StudentInfo stu7 = new StudentInfo() { Name = "刘杰", Sex = "男", Age = 11 };
    StudentInfo stu8 = new StudentInfo() { Name = "陈红", Sex = "女", Age = 12 };
    studentList2.Add(stu5);
    studentList2.Add(stu6);
    studentList2.Add(stu7);
    studentList2.Add(stu8);

    ClassInfo classInfo2 = new ClassInfo();
    classInfo2.ClassName = "高一（2）班";
    classInfo2.StudentList = studentList2;

    //创建班级3信息
    List<StudentInfo> studentList3 = new List<StudentInfo>();
    StudentInfo stu9 = new StudentInfo() { Name = "张铮", Sex = "男", Age = 14 };
    StudentInfo stu10 = new StudentInfo() { Name = "李冰", Sex = "女", Age = 12 };
    StudentInfo stu11 = new StudentInfo() { Name = "杜涛", Sex = "男", Age = 13 };
    studentList3.Add(stu9);
    studentList3.Add(stu10);
    studentList3.Add(stu11);

    ClassInfo classInfo3 = new ClassInfo();
    classInfo3.ClassName = "高一（3）班";
    classInfo3.StudentList = studentList3;

    classInfoList.Add(classInfo1);
    classInfoList.Add(classInfo2);
    classInfoList.Add(classInfo3);
    return classInfoList;
}

(4) 页面CSS代码：

<style type="text/css">
    *{padding:0px; margin:0px; }
    body {font: 12px/1.6em Helvetica,Arial,sans-serif;}
    ul{overflow:hidden; list-style:none;}
    ul li{float:left;}
    .classInfo{margin:10px; width:165px; border:1px solid #aaaaaa; float:left;}
    .classInfo h3{background: none repeat scroll 0 0 #3B5998;color: #FFFFFF;height: 26px;line-height: 26px;text-indent: 6px;}
    .classInfo .stuInfo ul li{width:50px; text-align:center;}
    .classInfo .stuInfo .title{font-weight:bold;}
    .classInfo .stuInfo .cor1{background-color:#f1f4f2;}
    .classInfo .stuInfo .cor2{background-color:#d6d6d6;}
</style>

*4、知识补充

(1) Repeater绑定Dictionary字典：

Repeater绑定一般的Dictionary如Dictionary<string, string>,获取值的时候很容易，绑定方法是:

Key：<%#Eval(“key”) %>；

Value：<%#Eval(“Value”) %>

(2) Repeater绑定数组：

如数组：string[] users = {“Peter” ,  “Kevin”,  “Polo”};

绑定方法：<%#Container.DataItem %>

今天的文章Repeater控件的嵌套使用分享到此就结束了，感谢您的阅读。