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:
 |
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-right: 1px dashed #2F4F4F; border-style: none dashed dashed; border-width: medium 1px 1px; padding: 10px 5px 5px; width: 20%; } .accordionHeaderSelected { background-color: #5078B3; border: 1px solid #2F4F4F; color: white; cursor: pointer; font-family: Arial,Sans-Serif; font-size: 12px; font-weight: bold; margin-top: 5px; padding: 5px; width: 20%; } .accordionHeader { background-color: Red; border: 1px solid #2F4F4F; color: white; cursor: pointer; font-family: Arial,Sans-Serif; font-size: 12px; font-weight: bold; margin-top: 5px; padding: 5px; width: 20%; } .href { color: White; font-weight: bold; text-decoration: none; } </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:
Post a Comment