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".

Create a table
Step 2

Insert some data into the table.

  1. Student names of "Computer Science".

    Computer

  2. Student names of "Information Technology".

    Information

  3. Student names of "Electronics".

    Electronics table

    After insertion of data select the table that will look a-like-

    After insertion of data select the table

Step 3

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

And create a website named "Test_Website".

Test Website

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

Addreference

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.

AjaxControlToolKit

It will look as in the following bin folder:

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-right1px dashed #2F4F4F;  
    6.         border-stylenone solid solid;  
    7.         border-widthmedium 1px 1px;  
    8.         padding10px 5px 5px;  
    9.         width65%;  
    10.         text-aligncenter;  
    11.         background-color#c1e2f5;  
    12.     }  
    13.     .accordionHeader  
    14.     {  
    15.         cursorpointer;  
    16.         font-familyArial,Sans-Serif;  
    17.         font-weightbold;  
    18.         margin-top10px;  
    19.         padding5px;  
    20.         font-size14px;  
    21.         border1px solid #2F4F4F;  
    22.         width65%;  
    23.         backgroundurl(Images/img-collapse.png) no-repeat 750px 7px;  
    24.         background-color#425e89;  
    25.         colorwhite;  
    26.         text-alignleft;  
    27.     }  
    28.     .accordionHeaderSelected  
    29.     {  
    30.         colorwhite;  
    31.         cursorpointer;  
    32.         font-familyArial,Sans-Serif;  
    33.         font-weightbold;  
    34.         margin-top10px;  
    35.         padding5px;  
    36.         font-size14px;  
    37.         border1px solid #2F4F4F;  
    38.         width65%;  
    39.         backgroundurl(Images/img-expand.png) no-repeat 750px 7px;  
    40.         background-color#2fa4e7;  
    41.         text-aligncenter;  
    42.     }  
    43. </style>  
    style on the page

    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.

    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. using System.Data;  
  2. using System.Configuration;  
  3. using AjaxControlToolkit;  
  4. using System.Data.SqlClient;   
  1. Get the data from the database table named "BTechStudents".
    1.  DataTable dt = new DataTable();  
    2.  try  
    3.  {  
    4.   
    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);  
    14.   
    15.          da.Fill(dt);  
    16.          cmd.Dispose();  
    17.          connection.Close();  
    18.      }  
    19.  }  
    20.  catch (Exception ex) { }  
    BTechStudents

  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  
    css classes

  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 = "";  
    5.   
    6. for (int i = 0; i < dt.Rows.Count; i++)  
    7. {  
    8.     string BranchName = dt.Rows[i]["BranchName"].ToString();  
    9.     string Next_Branch = "";  
    10.   
    11.     if (i != dt.Rows.Count - 1)  
    12.         Next_Branch = dt.Rows[i + 1]["BranchName"].ToString();  
    13.   
    14.     Content += dt.Rows[i]["StudentName"].ToString() + "<br/>";  
    15.   
    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. }  
    basis of database table

  4. Add the Accordion to the panel of the page.

    this.MyContent.Controls.Add(acrDynamic);

    Add the Accordion to the panel of page
So now we have written 4 sections of code on the Page Load event.

code on page load

Step 6: Now to run the page.

Now time to run the page

After "Computer Science" Selection.

Computer Science

After "Electronics" Selection.

Electronics

After "Information Technology" Selection.

Information Technology

Conclusion

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

Next Recommended Readings