ARTICLE

Accordion Control With AJAX Using ASP.NET

Posted by Davin Martyn Articles | AJAX February 01, 2012
In this tutorial I will show how we can implement an Accordion control in ASP.NET websites.
Reader Level:

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With AJAX help we can develop a web application and retrieve small amounts of data from the web server. AJAX consists of a different type of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

Accordion Control

An Accordion control is used to create expandable & collapsible navigation bars or to display page contents which the user can expand and collapse to view one pane at a time. The Accordion control contains multiple panes and display them one at a time. It is the same as the Collapsible panel control where only one can be expanded at a time. The Accordion control contains multiple Accoridionpane controls. Each AccordionPane control has a template for its header and its content. The selected pane is automatically persisted across postbacks.

Property

  • HeaderCSSClass
  • ContentCssClass
  • HeaderSelectedCssClass
  • FadeTransiation

Step 1 : Open Visual Studio 2010

  • Go to File->New->WebSite
  • Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open

Step 3 :  Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.

  • Drag ScriptManager control, RadioButtonList

Step 4 : Now go to Toolbox option and drag AccordionPane Control from AJAXToolkit.

acc5.gif

Step 5 :
Go to Default.aspx [Source] option and define several List Item inside the RadioButton Control with AccordianPane control.

Code

<asp:AccordionPane ID="AccordionPane1" runat="server">
        <Header>Name</Header>
        <Content>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
               <asp:ListItem>raj</asp:ListItem>
               <asp:ListItem>amit</asp:ListItem>
               <asp:ListItem>bhavana</asp:ListItem>
                 <asp:ListItem>manish</asp:ListItem>
            </asp:RadioButtonList>
        </Content>
        </asp:AccordionPane
>

Step 6 : We will define CSS for the Password Strength.

Code

<style type="text/css">
    .Header
    {
        background-color: White;
        color: Teal;
        padding: 4px;
        font-weight: bold;
        }
        .SelectedHeader
        {
             background-color: Black;
             color: Gray;
             padding: 4px;
             font-weight: bold;
             }
             .Contents
             {
                background-color: Gray;
                padding: 5px;
               }
  </style
>

Step 7 :
Go to Toolbox option and drag Accordion control.

acco4.gif

Step 8 : Go to Default.aspx[Source] page option and define all Accordion property.

Code

<asp:Accordion ID="Accordion1" runat="server" HeaderCssClass="Header" ContentCssClass="Contents" HeaderSelectedCssClass="SelectedHeader" Font-Names="Verdana" Font-Size="10" BorderColor="#000000" BorderStyle="Solid" BorderWidth="1" FramesPerSecond="100"
FadeTransitions="true" TransitionDuration
="500">

Step 9 : Go to Default.aspx. page and write a code.

Code

<head runat="server">
    <title></title>
    <style type="text/css">
    .Header
    {
        background-color: White;
        color: Teal;
        padding: 4px;
        font-weight: bold;
        }
        .SelectedHeader
        {
             background-color: Black;
             color: Gray;
             padding: 4px;
             font-weight: bold;
             }
             .Contents
             {
                background-color: Gray;
                padding: 5px;
               }
  </style
>
</head>              
<body>
    <form id="form1" runat="server" style="background-color: #D6F5D7">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Accordion ID="Accordion2" runat="server" HeaderCssClass="Header" ContentCssClass="Contents" HeaderSelectedCssClass="SelectedHeader" Font-Names="Verdana" Font-Size="10" BorderColor="#000000" BorderStyle="Solid" BorderWidth="1" FramesPerSecond="100"
FadeTransitions="true" TransitionDuration="500">
       <Panes>
        <asp:AccordionPane ID="AccordionPane1" runat="server">
        <Header>Name</Header>
        <Content>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
               <asp:ListItem>raj</asp:ListItem>
               <asp:ListItem>amit</asp:ListItem>
               <asp:ListItem>bhavana</asp:ListItem>
                 <asp:ListItem>manish</asp:ListItem>
            </asp:RadioButtonList>
        </Content>
        </asp:AccordionPane>
          <asp:AccordionPane ID="AccordionPane2" runat="server">
        <Header>Class</Header>
        <Content>
        <asp:RadioButtonList ID="RadioButtonList2" runat="server">
               <asp:ListItem>mca</asp:ListItem>
               <asp:ListItem>mca</asp:ListItem>
               <asp:ListItem>mca</asp:ListItem>
                 <asp:ListItem>mca</asp:ListItem>
            </asp:RadioButtonList>
        </Content>
        </asp:AccordionPane>
          <asp:AccordionPane ID="AccordionPane3" runat="server">
        <Header>subject</Header>
        <Content>
        <asp:RadioButtonList ID="RadioButtonList3" runat="server">
               <asp:ListItem>c</asp:ListItem>
               <asp:ListItem>c++</asp:ListItem>
               <asp:ListItem>java</asp:ListItem>
                 <asp:ListItem>asp.net</asp:ListItem>
            </asp:RadioButtonList>
        </Content>
        </asp:AccordionPane>
        </Panes>
        </asp:Accordion>
    </div>
    </form
>
</body>
</
html>

Step 10 : Now run the application by Pressing F5 and select any name from Name list.

acco1.gif

Step 11 : When we click on class option then all related class list item will be open.

acco2.gif

acco3.gif
Resource

COMMENT USING