This tutorial will cover the AJAX Accordion Control and how to set it up and use it.
This tutorial will cover the AJAX Accordion Control and how to set it up and use it. This tutorial will also cover styling the Accordion control with CSS so that it looks presentable.
Create an AJAX ready Web Application
Start by creating a Web Form Called "Default.aspx"
Then we need to add an AJAX Script Manager to the form which will allow it to be AJAX Ready
Once that is complete we can add the Accordion Control and see it work
Create the Accordion Control
It is important to note how Accordion Controls are setup.
An Accordion Control contains several Accordion Panes, and these Accordion Panes are comprised of Header and Content Sections.
When an Accordion Pane is minimized you will only see the header section and when it is enlarged you can see the Header and the Content sections.
Copy the code from below and paste it in your web form then run it to view the basic Accordion Structure.
|<%# DataBinder.Eval(Container.DataItem, "Employeeid") %>|
|<%# DataBinder.Eval(Container.DataItem, "FirstName") %>|
|<%# DataBinder.Eval(Container.DataItem, "LastName") %>|
|<%# DataBinder.Eval(Container.DataItem, "Title") %>|
string SQLStmt = "Select * from Employees ";
protected void Page_Load(object sender, EventArgs e)
strConn = "Server=localhost;uid=sa;password=;database=Repeaters;";
myconnection = new SqlConnection(strConn);
myda = new SqlDataAdapter(SQLStmt, myconnection);
ds = new DataSet();
Accordion1.DataSource = ds.Tables.DefaultView;
For the Accordion Control to Bind the DataSource in the form of DefaultView only.