This will explain you how you can dynamically add ajaxcontroltoolkit
accordion menu accordionpane in asp.net using c#.net.
Some of my previous articles are as follows:
Accordion
Ajax Control Toolkit Example in Asp.net OR How to Use Ajax Accordion Control in
Asp.Net, Ajax
FileUpload Control In Asp.Net or Multiple FileUpload With Progress Example in Asp.Net
Using C#.Net, How
To Use FileUpload Control in Update Panel For Ajax File Upload In Asp.Net Using
C#, Autocomplete
Textbox in Asp.Net With DataBase Using C# AjaxControlToolkit.
So for this article first we will create a new asp.net
application and add a new page in it and in this page we will add ScriptManager
and Accordion.
|
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="DynamicAccrodianlMenu.aspx.cs"
Inherits="ProjectDemo_Asp.et.DynamicAccrodianlMenu"
%>
<%@ 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>How to
Dynamically Add Ajaxcontroltoolkit Accordion Menu AccordionPane in Asp.Net Using C#</title>
<style type="text/css">
.contentclass { margin:
1em; border-collapse:
collapse; }
.headerclass { padding:
.3em; border: 1px #ccc solid; background: #fc9; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<asp:Accordion ID="Accordion1"
runat="server"
HeaderCssClass="headerclass"
ContentCssClass="contentclass"
Width="300px" FadeTransitions="true">
</asp:Accordion>
</div>
</form>
</body>
</html>
|
Now we will write code for adding accordionpane.
|
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
using AjaxControlToolkit;
namespace ProjectDemo_Asp.et
{
public
partial class
DynamicAccrodianlMenu : System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
//if (!Page.IsPostBack)
{
AccordionPane accordionpane1 = new AccordionPane();
accordionpane1.ID = "ap1";
accordionpane1.HeaderContainer.Controls.Add(new LiteralControl("HEADER 1"));
accordionpane1.ContentContainer.Controls.Add(new
LiteralControl("This
is the data of HEADER 1"));
AccordionPane accordionpane2 = new AccordionPane();
accordionpane2.ID = "ap2";
accordionpane2.HeaderContainer.Controls.Add(new
LiteralControl("HEADER
2"));
accordionpane2.ContentContainer.Controls.Add(new
LiteralControl("This
is the data of HEADER 2"));
AccordionPane
accordionpane3 = new AccordionPane();
accordionpane3.ID = "ap3";
accordionpane3.HeaderContainer.Controls.Add(new
LiteralControl("HEADER
3"));
accordionpane3.ContentContainer.Controls.Add(new
LiteralControl("This
is the data of HEADER 3"));
Accordion1.Panes.Add(accordionpane1);
Accordion1.Panes.Add(accordionpane2);
Accordion1.Panes.Add(accordionpane3);
}
}
}
}
|
In above code first we have created instance of the
accrodianpan and after that we have assign id, header text and content. And finally
we have added it to accordion menu. Now we have done run the page and view the
output.
About the Author
0 comments:
Please let me know your view