ASP.NET - how to write a repeater inside a repeater

Question

I have two tables in the database (teachers and students), and each teacher has a group of students. I made the HTML JavaScript and CSS code in ASP.NET so that the figure appears here, but I don't know how to put a repeater to extract teachers' names and another repeater for teachers' students' names. In addition to how to write that query in C#.

<div class="container">
    <div class="bs-example">
        <div class="accordion" id="accordionExample">
            <div class="card">
                <div class="card-header" id="headingOne">

                    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"> <i class="fa fa-plus pr-0"></i><span class="pl-0">teacher 1 <%--  i will replace to <%#  Eval("teacher_name")   %> --%></span></button>
                </div>
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="card-body">
                        <p>sturent 7</p>  <%--  i will replace to <%#  Eval("student_name")   %> --%>
                        <p>sturent 1 </p> <%--  i will replace to <%#  Eval("student_name")   %> --%>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingTwo">

                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> teacher 2</button>
                </div>
                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                    <div class="card-body">
                        <p>sturent 5 </p> <%--  i will replace to <%#  Eval("student_name")   %> --%>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingThree">

                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> teacher 3</button>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                    <div class="card-body">
                        <p>sturent 1 </p> <%--  i will replace all of them to <%#  Eval("student_name")   %> --%>
                        <p>student 2 </p>
                        <p>sturent 3 </p>
                        <p>student 4 </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        // Add minus icon for collapse element which is open by default
        $(".collapse.show").each(function () {
            $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
        });

        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function () {
            $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
        }).on('hide.bs.collapse', function () {
            $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
        });
    });
</script>

score 0 · Answer 1 · answered Jul 29 '21 at 11:26

Models :

    public class Teacher
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<Student> Students { get; set; }
    }

    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Family { get; set; }
    }

In your Action :

   public ActionResult Index()
        {
            List<Teacher> teachers = new List<Teacher>();

            Teacher teacher1 = new Teacher();
            teacher1.Students = new List<Student>();
            teacher1.Students.Add(new Student { Name = "A", Family = "X" });
            teacher1.Students.Add(new Student { Name = "B", Family = "Y" });


            Teacher teacher2 = new Teacher();
            teacher2.Students = new List<Student>();
            teacher1.Students.Add(new Student { Name = "C", Family = "Z" });


            teachers.Add(teacher1);
            teachers.Add(teacher2);

            return View(teachers);
        }

In your View:

@model List<WebApplication2.Models.Teacher>

<div class="row">
    <div class="col-md-12">
        @foreach (var teacher in Model)
        {
            <h2>@teacher.Name</h2>
            <table>
                @foreach (var student in teacher.Students)
                {
                    <tr>
                        <td>@student.Name</td>
                        <td>@student.Family</td>
                    </tr>
                }
            </table>
        }
    </div>
</div>

ASP.NET - how to write a repeater inside a repeater

1 Answers1