DNN+AJAX - Using Accordion
This is how to use ASP .NET AJAX Control Toolkit Accordion inside DotNetNuke module.
The scenario is like this. Our Accordion control will be put in the UI. Then AccordionPane object will be created dynamically from code. I don't use declarative programming to construct AccordionPane object. Instead, I use my own code. This approach is flexible since you can control your layout or view of your Accordion object. Accordion object also support data binding, so it's easy for you to integrate it in your database based application. Let's begin.
First, open your module (if your module is already open) or create a new one. Add one web user control and name it with AjaxAccordion.ascx (mine using Visual C# as my primary language). Add one Accordion control inside it. This is complete code for AjaxAccordion.ascx (my solution name is DNNAjaxControlToolkitUsageModule, it may differ than yours) :
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AjaxAccordion.ascx.cs" Inherits="DNNAjaxControlToolkitUsageModule.AjaxAccordion" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<style type="text/css">
.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;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
<ajaxToolkit:Accordion ID="MyAccordion"
runat="server"
TransitionDuration="250" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"
FramesPerSecond="40" SelectedIndex="0"></ajaxToolkit:Accordion>
Notes:
There is nothing special about the syntax above. Just add a refference to AjaxControlToolkit assembly, then add one Accordion control. I copied the stylesheet from SampleWebsite inside AjaxControlToolkit-NoSource.zip. You can modify based on your need.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxControlToolkit;
namespace DNNAjaxControlToolkitUsageModule {
public partial class AjaxAccordion : DotNetNuk
e.Entities.Modules.PortalModuleBase {
private string VeryLongContent =
"The Acco
rdion is written using an extender like most of th
e other extenders in the AJAX Control Toolkit.<br
/>" +
"The extender expects its inpu
t in a very specific hierarchy of container elemen
ts (like divs), so <br />" +
"the Accordion and AccordionPa
ne web controls are used to generate the expected
input for the extender.<br />" +
"The extender can also be used
on its own if you provide it appropriate input.";
protected void Page_Load(
object sender, Ev
entArgs e) {
if(!IsPostBack) {
BuildAccordion();
}
}
private void BuildAccordion() {
string header =
string.Empty;
string content =
string.Empty;
for(
int i = 0; i < 10; i++) {
header =
"Header-" + i.ToString();
content =
"Data-" + i.ToString() +
"<br />" + VeryLongContent;
Literal litHeader =
new Literal();
Literal litContent =
new Literal()
;
litHeader.Text = header;
litContent.Text = content;
AccordionPane pane =
new Accordion
Pane();
pane.ID =
"AccordionPane" + i.ToSt
ring();
pane.HeaderContainer.Controls.Add(
litHeader);
pane.ContentContainer.Controls.Add
(litContent);
MyAccordion.Panes.Add(pane);
}
}
}
}
There is no trick to use Accordion Ajax Control Toolkit inside your DotNetNuke module. In my code behind, I only create dummy data and put it inside AccordionPane using Literal control. If you work with database, you can also using binding technique based on collection.
This is my screenshot result :
Hope this help.