In this article I will explain how to bind jQuery Accordion from SQL Server Database in ASP.Net using C# and VB.Net with the help of ASP.Net Repeater control. This question was asked to me by a member on forums, Populate jQuery Accordion from Database in ASP.Net
Populate jQuery Accordion with data from Database in ASP.Net using C# and VB.Net
 
Concept
jQuery Accordion plugin needs a Container i.e. HTML DIV, to this container the plugin is applied. Within the container there are different sets of Title and Content controls which together act as an Accordion Pane. Thus using ASP.Net Repeater I am populating the Accordion Panes from Database
 
Database
I am making use of the following database with the design as follows
Populate jQuery Accordion with data from Database in ASP.Net using C# and VB.Net
The above database table has two columns Title and Content, which will be the Title and Content of the jQuery Accordion Pane respectively
 
HTML Markup
The HTML Markup is simple and consists of an ASP.Net Repeater control enclosed within an HTML DIV to which the jQuery Accordion plugin is applied.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("#dvAccordian").accordion();
    });
</script>
<div id="dvAccordian" style = "width:400px">
    <asp:Repeater ID="rptAccordian" runat="server">
        <ItemTemplate>
            <h3>
                <%# Eval("Title") %></h3>
            <div>
                <p>
                    <%# Eval("Content") %>
                </p>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>
 
Note: Here I am making use of ASP.Net Repeater to repeat the Accordion Panes as per records in the database table
 
Namespaces
You will need to import the following namespaces
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
 
 
Populating the ASP.Net Repeater Control with records from the Database Table
Below is the code to bind the ASP.Net Repeater control with records from the Database Table. The Repeater is populated in the Page Load event of the page.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindRepeater();
    }
}
 
private void BindRepeater()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "select Title, Content from AccordianContent";
            cmd.Connection = con;
            con.Open();
            rptAccordian.DataSource = cmd.ExecuteReader();
            rptAccordian.DataBind();
            con.Close();
        }
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindRepeater()
    End If
End Sub
 
Private Sub BindRepeater()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand()
            cmd.CommandText = "select Title, Content from AccordianContent"
            cmd.Connection = con
            con.Open()
            rptAccordian.DataSource = cmd.ExecuteReader()
            rptAccordian.DataBind()
            con.Close()
        End Using
    End Using
End Sub
 
 
Demo
View Demo
 
Downloads