Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use Accordion Control of AJAX Control Toolkit in ASP.NET

Author: Jeff Nava

In this article, we will explore Accordion control of AJAX Control Toolkit. We will see how we can use Accordion control to display data.

 

AJAX Control Toolkit enables you to create web pages that can be highly interactive. It contains more than 40 controls including Accordion, Calendar, Extender and AutoComplete. AJAX Toolkit has these features to extend AJAX functionality. You can easily drag and drop AJAX Toolkit controls after including it in your Toolbox of Visual Studio. It contains rich features that add value to partial page updates in ASP.NET web pages.
 
Accordion control in AJAX Toolkit provides multiple panes or tabs and displays the content of only one at a time. Content of other panes will not visible unless you click to see one of them. It makes the page very organized and interactive and takes less space on the screen.

You have to download AJAX Control Toolkit and include it in your Visual Studio Toolbox to use Accordion control.

 

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > Add New Item > Web Form
  5. Open Toolbox > Right Click > Add Tab
  6. Name the Tab As “AJAX Control Toolkit”
  7. Click on Tab > Choose Items
  8. Browse the “AjaxControlToolkit.dll” > Click Ok
  9. I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
  10. Open web form and add a ScriptManager control from “AJAX Extensions” tab.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
     
    </asp:ScriptManager>
     
    ScriptManager control is necessary when you are using Ajax functionality in your web site.
     
  11. Add a SqlDataSource and write below code in it

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:NORTHWINDconnection  %>"
        SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Products] WHERE ([UnitPrice] &lt; @UnitPrice)">
        <SelectParameters>
            <asp:Parameter DefaultValue="10" Name="UnitPrice" Type="Decimal" />
        </SelectParameters>
    </asp:SqlDataSource>
     
    You can configure it from Design view of the page. I have used Product table of NORTHWND database. I have selected three columns and I have also mentioned the WHERE clause on UnitPrice less than 10.
     
  12. Now add UpdatePanel control in your web form from “AJAX Extensions” tab.
  13. In UpdatePanel control, add “Accordion” control from “AJAX Control Toolkit” tab.
  14. After adding UpdatePanel and Accordion controls, now bind data items in HeaderTemplate and Content Template of Accordion control. The code will be:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Accordion ID="Accordion1" DataSourceID="SqlDataSource1" runat="server">
                <HeaderTemplate>
                  <%# DataBinder.Eval(Container.DataItem, "ProductName") %>
                </HeaderTemplate>
                <ContentTemplate>
                  <%# DataBinder.Eval(Container.DataItem, "UnitPrice") %>
                </ContentTemplate>
            </asp:Accordion>
         </ContentTemplate>
    </asp:UpdatePanel>
      
    HeaderTemplate value will be visible on the screen and only that ContentTemplate value of HeaderTemplate will visible which you click.
     
  15. The entire source code for the web form will look like as under

     
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <br />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"
     
                ConnectionString="<%$ ConnectionStrings:NORTHWINDconnection %>"
     
                SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Products] WHERE ([UnitPrice] &lt; @UnitPrice)">
                <SelectParameters>
                    <asp:Parameter DefaultValue="10" Name="UnitPrice" Type="Decimal" />
                </SelectParameters>
            </asp:SqlDataSource>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Accordion ID="Accordion1" DataSourceID="SqlDataSource1" runat="server">
                    <HeaderTemplate>
                    <%# DataBinder.Eval(Container.DataItem, "ProductName") %>
                    </HeaderTemplate>
                    <ContentTemplate>
                    <%# DataBinder.Eval(Container.DataItem, "UnitPrice") %>
                    </ContentTemplate>
                    </asp:Accordion>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>
     
    You can see at the top after “Page” directive, there is “Register” directive that has the “assembly” attribute of AjaxControlToolkit. It also has “namespace” and “tagprefix” attributes.
     
  16. Now see the web site in browser.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to use SqlDataSource to bind Stored Procedure to GridView in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net