javascript - ASP.NET - 如何在转发器中编写转发器

Question

我在数据库中有两个表（教师和学生），每个教师都有一组学生。我在 ASP.NET 中制作了 HTML JavaScript 和 CSS 代码，使图出现在这里，但我不知道如何放置一个中继器来提取教师姓名和另一个中继器用于教师学生姓名。除了如何在 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>

标签： javascriptc#jqueryasp.netrepeater

Answer 1

楷模 ：

    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; }
    }

在你的行动中：

   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);
        }

在您看来：

@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>