To start this off, go into visual studio and create a new web application name however you would like. Rename the Default.aspx page to Products.aspx. That's right we're going old school in this tutorial. While you're in the solution explorer, add a folder called Css and add a .css file called Css.css. We'll develop the css ass we go through the app.
Now that we have our first form and a .css file to use, we need to add the AjaxControlToolkit.dll to the project. You can download the toolkit here. Add the .dll to your projects bin folder. Now go into the solution explorer and right click on references. Select add reference and click on the browse tab. Select the AjaxControlToolkit.dll to add the reference to the project. To register this, open the .aspx page and add this line : <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Now in the header link to the css by adding the following line: <link href="Css/Css.css" rel="stylesheet" type="text/css" />
Title the page however you want. Now just inside the form tag, add a script manager with an id and the runat="server" attribute. This script manager is required to use controls from the ajax toolkit. Next we'll add a table, align = canter and class = oBorder. The css class you choose can be whatever you want, mine was done as follows:
border-left:1px solid #4a3c8c;
border-right:1px solid #4a3c8c;
border-top:1px solid #4a3c8c;
border-bottom:1px solid #4a3c8c;
You can simply add this to your css or you can create your own custom css. I also used a thead in both my css and ny table, but that is completely optional. Now inside a td tag add an Ajax accordian extender by creating a tag cc1:Accordian. This needs the runat="server" id="accProducts" attributes set and has properties to set: SelectedIndex="0" AutoSize="None" FadeTransition="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" SuppressHeaderPostbacks="true" HeaderCssClass="accordianHeader" HeaderSelectedCssClass="accordianHeaderSelected" ContentCssClass="AccordianContent" width="100%".
These tags are mostly self-explanatory, but try changing the various values to see the effect it has on the output. Since there is already a css example, I'll leave off the css I used in the accordian unless anyone wants to see it. Now inside the accordian add the opening Panes tag. Add a cc1:AccordianPane tag and give the pane a header, I called mine Products 1. Add a content tag, but don't bother putting anything more that a placeholder paragraph in at this point. Simply copy and paste this pane the desired number of times, remembering to change the header of each pane.
We have now created an application with a single page, a css file, and an Ajax control. I know this tutorial is more than a little basic, but I wanted to start off from the beginning. If there is interest, I will show you how to add an Ajax always visible control, and a custom header control next week.