ajax accordion pane example in asp.net or how to use ajax accordion pane in asp.net

ajax accordion pane example in asp.net or how to use ajax accordion pane in asp.net

Introduction:

Introduction: In this example I'm going to explain how to use Ajax accordion panel in asp.net.

If you want to check all the example in my site please check this link Ajax all extenders examples and also you check my previous example Ajax tab container.

Demo:
accordion panel extender example




What is Accordion Panel?:

Accordion is a web control. It will  provide multiple panes and display them one at a time. It is having several CollapsiblePanels where only one can be expanded at a time.Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.

When Ever You Want to Use Ajax Controls in your website First you need Add AjaxControlToolkit reference to your application

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

 You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp" and also
And also you have to add Tool kit Scriptmanager Control under <Form> tag:

<ajax:ToolkitScriptManager ID="toolkit1" runat="server"></ajax:ToolkitScriptManager>.

HeaderTemplate- The Header template contains the markup that should be used for an pane's header when databinding
ContentTemplate- The Content template contains the markup that should be used for a pane's content when databinding
Panes- Collection of AccordionPane controls.

Aspx Page coding :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .accordionContent
        {
            background-color#D3DEEF;
            border-color-moz-use-text-color #2F4F4F #2F4F4F;
            border-right1px dashed #2F4F4F;
            border-stylenone dashed dashed;
            border-widthmedium 1px 1px;
            padding10px 5px 5px;
            width20%;
        }
        .accordionHeaderSelected
        {
            background-color#5078B3;
            border1px solid #2F4F4F;
            colorwhite;
            cursorpointer;
            font-familyArial,Sans-Serif;
            font-size12px;
            font-weightbold;
            margin-top5px;
            padding5px;
            width20%;
        }
        .accordionHeader
        {
            background-colorRed;
            border1px solid #2F4F4F;
            colorwhite;
            cursorpointer;
            font-familyArial,Sans-Serif;
            font-size12px;
            font-weightbold;
            margin-top5px;
            padding5px;
            width20%;
        }
        .href
        {
            colorWhite;
            font-weightbold;
            text-decorationnone;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
 <asp:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" 
            HeaderSelectedCssClass="accordionHeaderSelected"
            ContentCssClass="accordionContent" runat="server" 
            SelectedIndex="0" FadeTransitions="true"
            SuppressHeaderPostbacks="true" TransitionDuration="250"  
            FramesPerSecond="40"
            RequireOpenedPane="false" AutoSize="None">
            <Panes>
    <asp:AccordionPane ID="AccPane1" runat="server">
        <Header>
            Registration</Header>
        <Content>
            <table>
                <tr>
                    <b>Registration Form</b>
                </tr>
                <tr>
                    <td>
                        UserName:
                    </td>
                    <td>
                        <asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Password:
                    </td>
                    <td>
                    <asp:TextBox ID="txtpwd"runat="server" TextMode="Password"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        FirstName:
                    </td>
                    <td>
                        <asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        LastName:
                    </td>
                    <td>
                        <asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <asp:Button ID="btnsubmit" runat="server" Text="Save" />
                    </td>
                </tr>
            </table>
        </Content>
    </asp:AccordionPane>
<asp:AccordionPane ID="AccPane2" runat="server">
        <Header>
            Person Details</Header>
        <Content>
            <table>
                <tr>
                    <b>User Details</b>
                </tr>
                <tr>
                    <td>
                        UserName:
                    </td>
                    <td>
                        <b>Sairam VVS</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        FirstName:
                    </td>
                    <td>
                        <b>sai</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        LastName:
                    </td>
                    <td>
                        <b>Ram</b>
                    </td>
                </tr>
            </table>
        </Content>
    </asp:AccordionPane>
<asp:AccordionPane ID="Accpane3" runat="server">
        <Header>
            Heading OF the Third Panel</Header>
        <Content>
            <table>
                <tr>
                    <b>Job Details</b>
                </tr>
                <tr>
                    <td>
                        Job Type:
                    </td>
                    <td>
                        <b>Software</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        Industry:
                    </td>
                    <td>
                        <b>IT</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        Designation:
                    </td>
                    <td>
                        <b>Software Engineer</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        Company:
                    </td>
                    <td>
                        <b>Sterlings</b>
                    </td>
                </tr>
            </table>
        </Content>
    </asp:AccordionPane>
        </asp:Accordion>
    </div>
    </form>
</body>
</html>

No comments: