This tutorial will demonstrate how to DataBind to an Accordion using the ASP.NET 3.5 AJAX control toolkit.

In this tutorial we explore the accordion control in the AJAX Control Toolkit. The AJAX Toolkit provides multiple pane sand allows the user to display one of them at a time. Usually, panels are declared within the page itself, but binding them to a data source offers more flexibility.

To begin, a DataSource is required. For this example, we will use an instance of SQL Server 2008.

To activate the functionality of the ASP.NET AJAX and the Control Toolkit, the Scriptmanager must be placed on the page.

Configuring a DataSource

Next we need to add a data source onto the page. Assuming that you already have created a DataSource locate the Server Explorer. Right-click Data Connections > Add Contection then the dialog box appears.

If the Data source does not display SQL Server(SqlClient) click Change and within Change Data Source dialog box, select SQL Server.

If the Choose Data Source page appears, within the Data source list, select the type of data source that you’ll be using.

If the Server Explorer is not visible, you can locate it in the View Tab of Visual Studio’s Toolbar. The same goes for the Database Explorer.

In the Add Connection box, enter the name of the server name within the Server name box. In the Log on to theserver section, select the option that is appropriate to access the running SQL Server Database and, if required, enter a user naem and password. Select save my password in the check box if you entered a password.

Next under Select or enter database name, enter or select the corresponding database. Test Connection.

Now let’s get started. Select and drag the table you wish to use onto the blank page (design view) under the ScriptManager.

Remember the name (ID) for the data source. It will be used in the DataSourceID property for the Accordion control like this example:

Within the Accordion control, you can provide templates for various parts of the control, including the header() and the content(). Within these elements, using the DataBinder.Eval() method to output the data from the data source.

Now enter this server-side code so that when the page is loaded the data source is bound to the accordion:

**Do not Forget! Inlcude these two CSS classes that are referenced in the Accordion control; in its properties HeaderCssClass and ContentCssClass. Place this markup in the head section of your default.aspx:

Download Source Files