Repeater控件的嵌套使用

港控/mmm° 2021-09-12 08:48 409阅读 0赞

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

![1334473902_1671.png][]

图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代码：**

**\*4、知识补充**

**(1) Repeater绑定Dictionary字典：**

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

Key：<%\#Eval("key") %>；

Value：<%\#Eval("Value") %>

**(2) Repeater绑定数组：**

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

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

[1334473902_1671.png]: https://img-my.csdn.net/uploads/201204/15/1334473902_1671.png