AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1435&pId=-1
Working with Accordion AJAX Control
page
by Nidal Arabi
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 43898/ 52

Introduction

There are series of controls (Extenders or simply first class control) in the AJAX control Toolkit. One of them is of particular interest in this article, the Accordion control. This control would enrich your website and gives it a professional look. In addition, the Accordion control of presenting large amount of information in a relatively small space.

Accordion and Accordion Pane(s)

It is time to enrich your web page. The accordion control is composed of parent control and multiple child controls called accordion panes. This accordion control is fully customizable in the sense of the design as well as the contents.

Requirements

In order to be able to work with AJAX ASP.NET Control Toolkit, the following should be available:

·         Microsoft Visual Studio 2005 or you can also use the Visual Web Developer Express 2005 (offered for free from Microsoft on http://msdn.microsoft.com/express)

·         Download AJAX extensions from http://ajax.asp.net and install them on your computer after installing Visual studio.

·         Download AJAX control toolkit from http://ajax.asp.net link to code project or directly from code project (it is a zip file).

·         After download, open Visual Studio or Visual Web Developer and add a tab in the Toolbox named AJAX Toolkit.

·         Right Click in this tab and choose add items. Browse to the sample directory of where you did extract the toolkit and then to bin directory and choose the DLL.

·         This is all. You have AJAX control Toolkit installed and you can start building your controls.

Well, you should be ready by now to begin AJAX Toolkit implementation.

Creating Your Accordion Solution

Follow the easy steps below to create your solution.

1.    Start your Visual Studio 2005 IDE

2.    Choose Create Web Site from the menu

3.    In this sample application we will use the Visual Basic language for the sample application

4.    Name the solution AccordionSample

5.    Choose ASP.NET AJAX Control Toolkit Web Site

6.    Choose File System in the location box

7.    Click OK to create the project

8.    Visual Studio 2005 will create your project with a Default.aspx page and most probably a readme.txt. Go ahead, get rid of the latter file.

9.    Open Default.aspx page in design view.

10. You noticed that there is a control on the page already called Script Manager. (Well, AJAX is really a script based implementation of the language JavaScript). In Short, Script Manager control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

11. Now drag a Accordion Control from the Toolkit and drop it on the form in design mode.

12. It is preferable if you create a style sheet as included in Listing 1. (If you do not create this style sheet, you will end up with an accordion with no color unless you go and specify every style item by yourself).

Listing 1 - StyleSheet.css content

/* Accordion */
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
 
#master_content .accordionHeader a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
#master_content .accordionHeader a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
 
#master_content .accordionHeaderSelected a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
#master_content .accordionHeaderSelected a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

13. Now go back to default.aspx and open it in source view (nice HTML Tags)…

14. If you have added the style sheet…Go to the head section and after the title section, add the listing 2 in order to include the style sheet to the page.

Listing 2 - Style Sheet Link Reference

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

15. In the Accordion Tag line make them as in listing 3. Notice the use of some additional tags for the accordion. The FadeTransitions is used to create the effect of smooth sliding. Selected Indexed is used to open a pane by default in our case it is the first pane. Transition duration is giving in milliseconds to specify how much to take to perform the total opening. And last, the two style association from the style sheet to give the accordion some color as specified in the style sheet.

Listing 3 - Accordion Specs in Source Mode

<ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="True" 
SelectedIndex="0" TransitionDuration="300"  HeaderCssClass="accordionHeader" 
ContentCssClass="accordionContent">

16. Now we have our accordion, we have to add panes to it. However, before adding panes we have to add the panes section inside the accordion.

17. After adding the pane section, you can create as many panes as you like. But please note that every pane should have a header and a content tags.

18. In order how I did construct my panes, take a look at listing 4.

Listing 4 - The complete pane section in HTML

<Panes>
<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header> AJAX PANE</Header>
<Content>
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane2" runat="server">
<Header>MY TEST PANE
</Header>
<Content>
THIS IS JUST A TEST OF PANE CONTENT<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane3" runat="server">
<Header>THIS IS LAST PANE
</Header>
<Content>
HOPE YOU LIKE WHAT YOU SEE<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
HOPE YOU LIKE WHAT YOU SEE<br />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>

19. Please note that coding was necessary here. Also note that the panes can contain any HTML tags you like.

The final output will look like the figures shown below

Figure 1 - The Default Output

Figure 2 - Output when the second pane is clicked

Downloads
Summary

I hope you enjoyed what was presented here. Happy AJAXfying and see you in the next article.



©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 11:17:56 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search