Net-informations.com
SiteMap  | About    

Ajax Accordion from database

ASP.NET AJAX Control Toolkit is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls. An Accordion Control contains several Accordion Panes and displays a single AccordionPane at a time.

accordion-database

The following program shows how to fill the Accordion Panes dynamically from database values.

vb.net
  Dim pane1 As New AjaxControlToolkit.AccordionPane()
  pane1.ID = "pane" & i
  pane1.HeaderContainer.Controls.Add(New LiteralControl(ds.Tables(0).Rows(i).ItemArray(0).ToString()))
  pane1.ContentContainer.Controls.Add(New LiteralControl(ds.Tables(0).Rows(i).ItemArray(1).ToString()))

Accordion1.Panes.Add(pane1)

C#
  AjaxControlToolkit.AccordionPane pane1 = new AjaxControlToolkit.AccordionPane();
  pane1.ID = "pane" + i;
  pane1.HeaderContainer.Controls.Add(new LiteralControl(ds.Tables[0].Rows[i].ItemArray[0].ToString()));
  pane1.ContentContainer.Controls.Add(new LiteralControl(ds.Tables[0].Rows[i].ItemArray[1].ToString()));

Accordion1.Panes.Add(pane1);

The following Asp.Net Ajax program connect to the pubs database and displays title and notes fields from title table to Ajax Accordion Panes. To use the Ajax Control Toolkit in your Visual Studio project, you should add reference to the AjaxControlToolkit.dll in your project.

Default.aspx

  

<%@ 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>


Click the following links to see full source code

C# Source Code
VB.NET Source Code
Default.aspx.cs
Default.aspx.vb





net-informations.com (C) 2016    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.