Ajax Accordion from XML

The ASP.NET Ajax Control Toolkit contains more than 40 controls, including the Accordion , AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, HTML Editor Extender, and Watermark controls. The Accordion Control manages your content into expandable Panes which can be clicked to make the content of that Pane visible and hiding all the other Panes.


An Accordion Control contains several Accordion Panes and displays a single AccordionPane at a time. Each AccordionPane contains both a header and content tag. The following Asp.Net Ajax program shows how to fill Accordion Panes from an XML file. The sample xml file you can download from here Accordion XML file. Download and Copy the XML file to your c:\ .

To use the Ajax Control Toolkit in your Visual Studio project, you should add reference to the AjaxControlToolkit.dll in your project.


<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .accordion { width: 200px; } .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; } .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; } .accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <asp:Accordion ID="Accordion1" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" runat="server"> </asp:Accordion> </div> </form> </body> </html>
Full Source | C#
using System; using System.Data; using System.Web.UI; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { DataSet ds = new DataSet(); ds.ReadXml("c:\\publishers.xml"); string address; int i; for (i = 0; i <5; i++) { AjaxControlToolkit.AccordionPane pane1 = new AjaxControlToolkit.AccordionPane(); pane1.ID = "pane" + i; pane1.HeaderContainer.Controls.Add(new LiteralControl(ds.Tables[0].Rows[i].ItemArray[0].ToString())); address = "City : " + ds.Tables[0].Rows[i].ItemArray[1].ToString() ; address = address + "State : " + ds.Tables[0].Rows[i].ItemArray[2].ToString() ; address = address + "Country : " + ds.Tables[0].Rows[i].ItemArray[3].ToString(); pane1.ContentContainer.Controls.Add(new LiteralControl(address)); Accordion1.Panes.Add(pane1); } } }
Full Source | VB.NET
Imports System.Data Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim ds As New DataSet() ds.ReadXml("c:\publishers.xml") Dim address As String Dim i As Integer For i = 0 To 4 Dim pane1 As New AjaxControlToolkit.AccordionPane() pane1.ID = "pane" & i pane1.HeaderContainer.Controls.Add(New LiteralControl(ds.Tables(0).Rows(i).ItemArray(0).ToString())) address = "City : " & ds.Tables(0).Rows(i).ItemArray(1).ToString() address = address & "State : " & ds.Tables(0).Rows(i).ItemArray(2).ToString() address = address & "Country : " & ds.Tables(0).Rows(i).ItemArray(3).ToString() pane1.ContentContainer.Controls.Add(New LiteralControl(address)) Accordion1.Panes.Add(pane1) Next End Sub End Class

Click the following links to see full source code

C# Source Code
VB.NET Source Code