I want to use the accordion control  using asp.net web forms. I need the accordion show in each panel the course number and course name. when the user clicks on the course it would then expand to show the people registered in the course.

This needs to use the asp:Listview control to write the template that jquery will transform into the Accordion.


I want to use a asp:Listview control to format the data and have jquery transform the listview into an accordion.  since this example is small if someone could demonstrate how to do a postback on the click of each panel it would be appreciated. I feel the merits of preloading all the panels with student might be to much in production but would be ok in this sample.


//9000-Introduction to HTML
//                 Adam Anderson
//9001-Web Devleopment
//                 Adam Anderson
//                 Billy Billingham
//9002-Database
//                 Adam Anderson
//                 Charles Charleston
//9003-System Design
//                 Adam Anderson
//                 Bill Billingham
//                 Daffie Davidson

If all panels were open in on the accordion the above design is  what you would see.

The following code is a load of the data for this example.

void Main()
{
var courseList = new[]
{
new Course { courseNumber =9000,courseName = "Introduction to HTML"},
new Course { courseNumber =9001,courseName = "Web Development"},
new Course { courseNumber =9002,courseName = "Database"},
new Course { courseNumber =9003,courseName = "System Design"}
}.ToList();

var enrollmentList = new[]
{
new Enrollment{ studentId=1,courseNumber=9000},
new Enrollment{ studentId=1,courseNumber=9001},
new Enrollment{ studentId=1,courseNumber=9002},
new Enrollment{ studentId=1,courseNumber=9003},
new Enrollment{ studentId=3,courseNumber=9001},
new Enrollment{ studentId=3,courseNumber=9003},
new Enrollment{ studentId=5,courseNumber=9002},
new Enrollment{ studentId=6,courseNumber=9003},
}.ToList();

var studentList = new []
{
new Student{ studentId=1,fullName="Adam Anderson", email="[email protected]"},
new Student{ studentId=3,fullName="Billy Billingham", email="[email protected]"},
new Student{ studentId=5,fullName="Charles Charleston", email="[email protected]"},
new Student{ studentId=6,fullName="Daffie Davidson", email="[email protected]"},
}.ToList();





// This query joins all the classes together .

var joinedResults = (from c in courseList
join e in enrollmentList on c.courseNumber equals e.courseNumber
join s in studentList on e.studentId equals s.studentId
select new{ CourseNumber =c.courseNumber, CourseName = c.courseName, StudentName = s.fullName}).ToList();


//9000 Introduction to HTML Adam Anderson
//9001 Web Development Adam Anderson
//9001 Web Development Billy Billingham
//9002 Database Adam Anderson
//9002 Database Charles Charleston
//9003 System Design Adam Anderson
//9003 System Design Billy Billingham
//9003 System Design Daffie Davidson


}

public class Course
{
public int courseNumber { get; set; }
public string courseName { get; set; }
}
public class Enrollment
{
public int studentId{get;set;}
public int courseNumber{get;set;}

}
public class Student
{
public int studentId{get; set;}
public string fullName{get;set;}
public string email{get;set;}
}