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.
Here is a great place to download the AJAX Toolkit Ajax ToolKit
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.
<asp:ScriptManager
ID="smScriptManager"
runat="server">
</asp:ScriptManager> |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
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.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
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:
<ajaxToolkit:Accordion
ID="accordion1"
runat="server"
HeaderCssClass="header"
ContentCssClass="content"
Width="300px"
DataSourceID="SqlDataSource1"
FadeTransitions="true"> |
Within the Accordion control, you can provide templates for various parts of the control, including the header(<HeaderTemplate>) and the content(<ContentTemplate>). Within these elements, using the DataBinder.Eval() method to output the data from the data source.
<HeaderTemplate>ID
<%#DataBinder.Eval(Container.DataItem, "ID")%>
</HeaderTemplate>
<ContentTemplate>
<%#DataBinder.Eval(Container.DataItem, "Name")%>
</ContentTemplate>
</ajaxToolkit:Accordion> |
Now enter this server-side code so that when the page is loaded the data source is bound to the accordion:
protected void Page_Load(object sender, EventArgs e)
{
SqlDataSource1.DataBind();
} |
**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:
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style> |
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
