Sample Code for Accordion Control in AJAX

Here I will explain how to use the Ajax Accordion control in asp.net.

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The 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 postback

Below are the properties for Accordion control

SelectedIndex - This property is used to set initial AccordionPane to be visible.

HeaderCssClass – This CSS class property is used to apply style to Header of all AccordionPanes.

HeaderSelectedCssClass – This CSS class is used to change the color of selected AccordionPane.

ContentCssClass – This CSS class is used to update the AccordionPane.

FadeTransitions – This Property is used to set True to use the fading transition effect, false for standard transitions.

TransitionDuration – This Property is used to set the Number of milliseconds to animate the transitions

FramesPerSecond - This Property is used to set the Number of frames per second used in the transition animations.

RequireOpenedPane – This Property is used to Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.

SuppressHeaderPostbacks – This Property is Prevent the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your headers for accessibility)

AutoSize – This Property is used to set the height of the accordion control. This Property contains 3 types of varieties

1. None- The Accordion grows/shrinks without restriction

2. Auto- the Accordion never grows larger than the value specified by its Height property.

3. Fill- The Accordion always stays the exact same size as its Height property

Panes - Collection of AccordionPane controls

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

Example

Now we can see how to use accordion control in our application for those first add AjaxControlToolkit reference to your application and add

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

And

<asp:ScriptManager ID="ScriptManager1" runat="server" />

HTML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<title>Accordion Page</title>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<ajaxToolkit:Accordion runat="server" ID="theAccordion" SelectedIndex="0" AutoSize="Limit"

BackColor="#E1E1E1" FadeTransitions="true" TransitionDuration="333" FramesPerSecond="30"

Width="200px" Font-Names="Verdana" Font-Size="Smaller">

<Panes>

<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">

Menu 1

</div>

</Header>

<div>

</ul>

</div>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">

Menu 2

</div>

</Header>

<div>

</ul>

</div>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">

Menu 3

</div>

</Header>

<div>

</ul>

</div>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">

Menu 4

</div>

</Header>

<div>

</ul>

</div>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

</div>

</form>

</body>

</html>

For Download source code Click Here

HTTPHandler and HTTPModule in ASP.NET

If you want to implement pre-processing logic before a request hits the IIS resources. For instance you would like to apply security mechanism, URL rewriting, filter something in the request, etc. ASP.NET has provided two types of interception HttpModule and HttpHandler . The web server examines the file name extension of the requested file, and determines which ISAPI extension should handle the request. Then the request is passed to the appropriate ISAPI extension. For Example When an .aspx page is requested it is passed to ASP.Net page handler. Then Application domain is created and after that different ASP.Net objects like Httpcontext, HttpRequest, HttpResponse. HTTPModule: - It's just like a filter. The Modules are called before and after the handler executes . - HTTP Modules are objects which also participate the pipeline but they work before and after the HTTP Handler does its job, and produce additional services within the pipeline -

Help to understand .Net

Search This Blog

Sample Code for Accordion Control in AJAX

Labels

Comments

Post a Comment

Popular posts from this blog

Connected and disconnected architecture in ADO.Net with Example

HTTPHandler and HTTPModule in ASP.NET

ASP.NET Page Life Cycle with example