How to implement Accordion Control on ASP.NET Web page

On By
Introduction :- The Accordion control allows you to group multiple collapsible panels in a single control. At the same time, It also manages the Collapsed and expanded state of each panel , therefore ,expanding one panel at a time. It Means,the accordion control does not support expanding two or more panels simultaneously.Instead , the header templates of all the panels are always visible so that you can click it to display the hidden contents.By default ,the Accordion control opens with one panel as expanded. The Accordion control enables you to provide multiple panes simultaneously on the web page among which only one pane can be displayed at a time.It is similar to the collapsiblePanelExtender control.
Before using this control ,you have to install Ajax Toolkit on your visual studio. You can install it from here .

There are some important properties of Accordion control as given below:-
1.) SelectedIndex : - It sets the index of the accordion pane that should remain visible when the page is loaded for the first time.
2.) HeaderCssClass : -It sets the CSS class to apply to the headers of of the Accordion control panes.
3.) HeaderSelecedCssClass : - It sets the CSS class to apply to the selected header of the selected header of the Accordion control panes.
4.) ContentCssClass : - It sets the CSS class to apply to the contents of the Accordion control panes.
5.) AutoSize : -It restricts the growth of the Accordion control.
6.) Panes : - It specifies a collection of panes of the Accordion control.
7.) FramesPerSecond : - It sets the number of frames per second used in the transition animation.
8.) HeaderTemplate : - It contains the markup that is used for pane's header during data binding.
9.) ContentTemplate : - It Contains the markup that should be used for pane's contents when binding.
10.) DataSource: - It specifies the data source to be used for data binding.
11.) DataMember: -It specifies the data members which are bound using a data source.
12) DataSourceID: - It sets the ID of the data source that is used.
13) FadeTransitions: - It determines whether or not the fading transition effect should be used.
14) TransitionDuration: - It sets the time to animate the transitions. 

There are some steps to implement this whole concepts on asp.net web page as given below:-
Step 1 :- First open Your Visual studio--> File --> New --> Website --> Select ASP.NET Empty website --> OK --> Open Solution Explorer --> Add New Items (Default.aspx) --> Drag and drop ToolKitScriptManager as shown below:-

 Step 2 :- Now open Source ---> Drag and Drop  Accordion Control --> Inside this control use markup tag <Panes></Panes>--> Inside this panes, drag and drop AccrodionPane control --> You can see other codes also as given below:-
<%@ 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:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <br />
        <asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" AutoSize="None" 
     FadeTransitions="true" TransitionDuration="300" FramesPerSecond="25" 
     Height="698px" Width="991px">
            <Panes>
                <asp:AccordionPane ID="AccordionPane1" runat="server">
                <Header> <br />
  <div style="background-color:Orange; font-size:xx-large; font-weight:bold">Introduction of MY.NET Tutorials 
      </div>
  </Header>
        <Content>
  <div style="background-color:Silver">
  <p>
  This Website (http://www.msdotnet.co.in ) is developed for those students who are in learning stage or development stage.
        You learn different .NET Technologies from this site.
  </p>
  Some key features of .NET Technology are:-
  <ul>
   <li>C# Language</li>
   <li>ASP.NET</li>
   <li>ADO.NET</li>
   <li>SQL Database</li>
   <li>MVC Technlogy</li>
   <li>WPF Technology</li>
  </ul>
  </div>
  </Content>
        </asp:AccordionPane>
        <asp:AccordionPane ID="AccordionPane2" runat="server">
  <Header><br />
  <div style="background-color:Olive; font-size:xx-large; font-
    weight:bold">Go From Below Links</div>
  </Header>
  <Content>
   <div style="background-color:Silver">
    <ul>
     <a href=""><li>Learn C# Language</li></a>
     <a href=""><li>Learn ASP.NET Concepts</li></a>
     <a href=""><li>Learn SQL Database</li></a>
     <a href=""><li>Learn ADO.NET Concepts</li></a>
     <a href=""><li>Learn MVC Technology</li></a>
                    <a href=""><li>Learn WPF Technology</li></a>
                    <a href=""><li>Learn XML Technology</li></a>
                    <a href=""><li>Learn .NET PROJECTS</li></a>
    </ul>
   </div> 
  </Content>
  </asp:AccordionPane> 
        <asp:AccordionPane ID="AccordionPane3" runat="server">
  <Header><br />
  <div style="background-color:Olive; font-size:xx-large; font-
    weight:bold">Logon Form</div>
  </Header>
  <Content>
   <div style="background-color:Silver">
            &nbsp;User Name&nbsp;
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br/>
                &nbsp;Password&nbsp;
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button1" runat="server" Text="Login" />
   </div> 
  </Content>
  </asp:AccordionPane> 
            </Panes>
        </asp:Accordion> 
    </div>
    </form>
</body>
</html>
Note:- In above code , you will see Accordion control used as a root element and AccordionPane used as a child elements. 
Step 3 : Now Run Your Application (press F5) --> You will see following output as given below:

 Descriptions :-  

  • When you run the application then first heading contents will be shown on the web page.
  • When you click on second Heading (Go From Below Links). then Second heading contents will be shown on the web page
  • When you click third heading (Logon Form) then third heading contents will be shown on the page.
For More...
Download Whole  Attached File
     Download
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.