How to Create Runtime Accordion in ASP.Net

Introduction

It's a control in the Ajax tool kit by which you can add sections with some content separately and expand or collapse each section as needed.

I will explain how to bind the Accordion with database values and add it on the page dynamically. To do it you need to create a table in your database and add some data into it for each section's header and content.

To better understand, use the following procedure to create a sample.

Step 1

Create a table named "BTechStudents" with 2 fields named "BranchName" and "StudentName".


Step 2

Insert some data into the table.

1. Student names of "Computer Science".
   
   
   
   
2. Student names of "Information Technology".
   
   
   
   
3. Student names of "Electronics".
   
   
   
   After insertion of data select the table that will look a-like-
   
   

Step 3

Download the AjaxCOntrolToolKit from the following link to use the Accordion control.

And create a website named "Test_Website".



Right-click on the website and choose "Add reference" to add the reference of AjaxControlToolkit.



A window will be shown to add the reference. Use the following sub-steps to add the AjaxControlToolKit.

1. Click on the Browse pan.
2. Click on the Browse button that will open another window.
3. Select the path of AjaxControlToolKit from your system.
4. Click on the Add button.
5. Finally click on the Ok button.

It will look as in the following bin folder:



Step 4

1. On the top of the default created page named "Default.aspx", add the Register Tag to add the "AjaxControlToolKit" ScriptManager.
   
   1. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
   2. TagPrefix="asp" %>
2. Add the "AjaxControlToolKit" ScriptManager into the body of the page.
   
   1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
   2. </asp:ToolkitScriptManager>
3. Add the Panel into the body tag of page.
   
   1. <asp:Panel ID="MyContent" runat="server">
   2. </asp:Panel>
4. Add the style on the page for Accordion Header, Accordion Content and selected Accordion Header.
   
   1. <style type="text/css">
   2. .accordionContent
   3. {
   4. border-color: -moz-use-text-color #5078B3;
   5. border-right: 1px dashed #2F4F4F;
   6. border-style: none solid solid;
   7. border-width: medium 1px 1px;
   8. padding: 10px 5px 5px;
   9. width: 65%;
   10. text-align: center;
   11. background-color: #c1e2f5;
   12. }
   13. .accordionHeader
   14. {
   15. cursor: pointer;
   16. font-family: Arial,Sans-Serif;
   17. font-weight: bold;
   18. margin-top: 10px;
   19. padding: 5px;
   20. font-size: 14px;
   21. border: 1px solid #2F4F4F;
   22. width: 65%;
   23. background: url(Images/img-collapse.png) no-repeat 750px 7px;
   24. background-color: #425e89;
   25. color: white;
   26. text-align: left;
   27. }
   28. .accordionHeaderSelected
   29. {
   30. color: white;
   31. cursor: pointer;
   32. font-family: Arial,Sans-Serif;
   33. font-weight: bold;
   34. margin-top: 10px;
   35. padding: 5px;
   36. font-size: 14px;
   37. border: 1px solid #2F4F4F;
   38. width: 65%;
   39. background: url(Images/img-expand.png) no-repeat 750px 7px;
   40. background-color: #2fa4e7;
   41. text-align: center;
   42. }
   43. </style>
   
   
   Note: You need to add the 2 images to expand and collapse that are being called in style sheet. Both images are in the attached source file.
   
   

Step 5

Now I will provide some sub-steps for creating the Accordion.

1. Get the data from the database.
2. Create the Accordion.
3. Create the panes and add them into the Accordion.
4. Add the Accordion into the panel of the page.

Write the following code on the Page Load event of the page and add the following namespaces to the page.

1. Get the data from the database table named "BTechStudents".
   
   1. DataTable dt = new DataTable();
   2. try
   3. {
   5. using (SqlConnection connection = new SqlConnection())
   6. {
   7. connection.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ToString();
   8. connection.Open();
   9. SqlCommand cmd = new SqlCommand();
   10. cmd.Connection = connection;
   11. cmd.CommandText = "Select BranchName,StudentName from BTechStudents group by BranchName,StudentName";
   12. cmd.CommandType = CommandType.Text;
   13. SqlDataAdapter da = new SqlDataAdapter(cmd);
   15. da.Fill(dt);
   16. cmd.Dispose();
   17. connection.Close();
   18. }
   19. }
   20. catch (Exception ex) { }
   
   
   
2. Create the Accordion dynamically and set the properties of it with some CSS classes.
   
   1. Accordion acrDynamic = new Accordion();
   2. acrDynamic.ID = "MyAccordion";
   3. acrDynamic.SelectedIndex = -1;//No default selection
   4. acrDynamic.RequireOpenedPane = false;//no open pane
   5. acrDynamic.HeaderCssClass = "accordionHeader";//Header class
   6. acrDynamic.HeaderSelectedCssClass = "accordionHeaderSelected";//Selected herder class
   7. acrDynamic.ContentCssClass = "accordionContent";//Content class
   
   
   
3. Create the panes on the basis of the database table field (BrachName) and add the content into them (Studentsname), Then bind the panes into the Accordion.
   
   1. Label lbTitle;
   2. Label lbContent;
   3. AccordionPane pane;
   4. string Content = "";
   6. for (int i = 0; i < dt.Rows.Count; i++)
   7. {
   8. string BranchName = dt.Rows[i]["BranchName"].ToString();
   9. string Next_Branch = "";
   11. if (i != dt.Rows.Count - 1)
   12. Next_Branch = dt.Rows[i + 1]["BranchName"].ToString();
   14. Content += dt.Rows[i]["StudentName"].ToString() + "<br/>";
   16. if (BranchName != Next_Branch) //if last row of branch
   17. {
   18. pane = new AccordionPane();
   19. lbTitle = new Label();
   20. lbContent = new Label();
   21. pane.ID = "Pane_" + BranchName.ToString();
   22. lbTitle.Text = BranchName;
   23. pane.HeaderContainer.Controls.Add(lbTitle);
   24. lbContent.Text = Content;
   25. pane.ContentContainer.Controls.Add(lbContent);
   26. acrDynamic.Panes.Add(pane);
   27. Content = "";
   28. }
   29. }
   
   
   
4. Add the Accordion to the panel of the page.
   
   this.MyContent.Controls.Add(acrDynamic);
   
   

So now we have written 4 sections of code on the Page Load event.



Step 6: Now to run the page.



After "Computer Science" Selection.



After "Electronics" Selection.



After "Information Technology" Selection.



Conclusion

I hope now you are able to add an Accordion dynamically to your pages.