Home > ASP.Net, Jquery > JQuery Accordion with Data from Database

JQuery Accordion with Data from Database


Hi all,

try this Example to use JQuery Accordion with Data from Database :-

In this Example i will use Northwind Database and Categories Table

1) DownLoad the following JS files jquery-ui.js and jquery-1.4.4 from here

2) Open VS2008 and create a new Website project and add new Page “Dafault.aspx”

3) In Default.aspx add Repeater Control so our page will be like

<head runat="server">
    <title>Untitled Page</title>
    <link type="text/css" href="css/jquery-ui.css" rel="Stylesheet" />
    <script type="text/javascript" src="script/jquery-1.4.4.js"></script> 
    <script type="text/javascript" src="script/jquery-ui.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#Categories").accordion();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Categories" style="width:500px;">
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <h3><a href="#"><%# DataBinder.Eval(Container.DataItem, "CategoryName") %></a></h3>
                <div>
                    <p>
                        <%# DataBinder.Eval(Container.DataItem, "Description") %>
                    </p>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>

and In code behind we will bind Repeater control to Data from Categories table in Database


protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Repeater1.DataSource = GetProducts();
            Repeater1.DataBind();
        }
    }

    public DataTable GetProducts()
    {
        string query = "select * from Categories";
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
        SqlCommand cmd = new SqlCommand(query, con);
        DataTable data = new DataTable();
        SqlDataAdapter adapter = new SqlDataAdapter(cmd);
        using (con)
        {
            con.Open();
            adapter.Fill(data);
        }
        return data;
    }

3) In Web.Config file add the Connection String to Database

<connectionStrings>
        <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"
            providerName="System.Data.SqlClient" />
    </connectionStrings>

Now run your website …..Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Jquery
  1. Arif
    January 1, 2012 at 7:37 am

    not working

  2. yasserzaid
    January 5, 2012 at 3:49 pm

    @Arif :- did you get any error? and don’t forget to download the JS files that i used in this example in order to work with you
    and let me know… Good Luck

  3. pp
    June 28, 2012 at 3:04 am

    hi i want to show a grid inside accordion

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: