The Accordion is a web control that allows you to provide
multiple panes and display them one at a time. It is like having several
CollapsiblePanels where only one can be expanded at a time. The Accordion is
implemented as a web control that contains AccordionPane web controls. Each
AccordionPane control has a template for its Header and its Content. We keep
track of the selected pane so it stays visible across postbacks.
It also supports three AutoSize modes so it can fit in a
variety of layouts.
None - The Accordion grows/shrinks without restriction. This
can cause other elements on your page to move up and down with it.
Limit - The Accordion never grows larger than the value
specified by its Height property. This will cause the content to scroll if it
is too large to be displayed.
Fill - The Accordion always stays the exact same size as its
Height property. This will cause the content to be expanded or shrunk if it
isn't the right size.
The Accordion is written using an extender like most of the
other extenders in the AJAX Control Toolkit. The extender expects its input in
a very specific hierarchy of container elements (like divs), so the Accordion
and AccordionPane web controls are used to generate the expected input for the
extender. The extender can also be used on its own if you provide it
appropriate input.
The Accordion can also be databound. Simply specify a data
source through the DataSource or DataSourceID properties and then set your data
items in the HeaderTemplate and ContentTemplate properties.
Now I am going to tell you tha1 how can we design a dynamic
accordia for our website step by step.
Step 1: First of all ,I will be design database
"testdata", table and storeprocedure.
Table :
CREATE TABLE
[dbo].[Accordian](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [nvarchar](50) NULL,
[address] [nvarchar](500) NULL,
[phno] [nvarchar](13) NULL,
[emailid] [nvarchar](50) NULL,
CONSTRAINT
[PK_Centerdetail] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS
= ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON
[PRIMARY]
Now Storprocedure :
create PROCEDURE
usp_Accordian
-- Add the
parameters for the stored procedure here
@Action nvarchar(50)=''
AS
BEGIN
-- SET NOCOUNT
ON added to prevent extra result sets from
-- interfering
with SELECT statements.
SET NOCOUNT ON;
-- Insert
statements for procedure here
if(@Action='getdata')
select * from dbo.Accordian
end
Step 2: Design page accordion.aspx
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="accordian.aspx.cs"
Inherits="accordian"
%>
<%@ 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></title>
</head>
<body>
<form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<style type="text/css">
.accordion
{
width:
100%;
}
.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;
text-align:left;
}
.accordionHeaderSelected
{
border:
1px solid #2F4F4F;
color:
black;
background-color:
#EDEDED;
font-family:
Arial, Sans-Serif;
font-size:
12px;
font-weight:
bold;
padding:
5px;
margin-top:
5px;
cursor:
pointer;
text-align:left;
}
.accordionContent
{
background-color:
#D3DEEF;
border-bottom:
1px dashed #2F4F4F;
border-top:
none;
padding:
5px;
padding-top:
10px;
padding-left:30px;
padding-bottom:10px;
text-align:left;
color:#000;
}
</style><div style=" margin-bottom:20px; float:left;">
<div
class="mapbg">
<div class="coming1">
<asp:Panel ID="Panel1" runat="server" Width="720px">
<asp:Accordion ID="acrDynamic" runat="server"
HeaderSelectedCssClass="accordionHeaderSelected" CssClass="accordion"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"></asp:Accordion>
</asp:Panel>
</div>
</div> </div>
</div>
</form>
</body>
</html>
Step-4:accordion.cs page
using System;
using
System.Collections;
using
System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
using
System.Drawing;
using
System.Data.SqlClient;
public partial class accordian : System.Web.UI.Page
{
string
constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
SqlConnection
con = new SqlConnection();
SqlCommand
cmd = new SqlCommand();
SqlDataAdapter
adpt = new SqlDataAdapter();
Hashtable
hst = new Hashtable();
DataTable
dt = new DataTable();
DataSet
ds = new DataSet();
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
PopulateAcrDynamically();
}
}
private void PopulateAcrDynamically()
{
hst.Clear();
ds.Clear();
hst.Add("Action",
"getdata");
ds = GetDataSet("[usp_Accordian]", hst);
if
(ds.Tables[0].Rows.Count != 0)
{
Label
lbTitle;
Label
lbContent;
Label
lbaddress;
AjaxControlToolkit.AccordionPane pn;
int
i = 0; // This is just to use for assigning pane an id
foreach
(DataRow dr in
ds.Tables[0].Rows)
{
lbTitle = new Label();
lbContent = new Label();
lbaddress = new Label();
string
conpaerson = "";
string
stremail = "";
string
strmob = "";
lbTitle.Text = dr["name"].ToString();
if
(dr["name"].ToString() != "")
{
conpaerson = "Name-" + dr["name"].ToString()
+ "<br/>";
}
if
(dr["emailid"].ToString() != "")
{
stremail = " Email Id- " + dr["emailid"].ToString() + "<br/>";
}
if
( dr["phno"].ToString() != "")
{
strmob = "Contact No-" + dr["phno"].ToString() + " ";
}
lbContent.Text = conpaerson +
strmob + stremail ;
lbaddress.Text = dr["address"].ToString();
pn = new
AjaxControlToolkit.AccordionPane();
pn.ID = "Pane" + i;
pn.HeaderContainer.Controls.Add(lbTitle);
pn.ContentContainer.Controls.Add(lbContent);
acrDynamic.Panes.Add(pn);
++i;
}
}
}
public DataSet GetDataSet(string
spName, Hashtable hst)
{
con = new
SqlConnection();
cmd = new
SqlCommand();
con.ConnectionString = constr;
cmd.Connection = con;
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = spName;
con.Open();
if (hst
!= null)
if
(hst.Count > 0)
AttachParameters(cmd, hst);
DataSet
dataset = new DataSet();
SqlDataAdapter
adapter = new SqlDataAdapter();
adapter.SelectCommand = cmd;
adapter.Fill(dataset);
con.Close();
return
dataset;
}
private void AttachParameters(SqlCommand
command, Hashtable hstParameters)
{
try
{
IEnumerator
parameters = hstParameters.Keys.GetEnumerator();
while
(parameters.MoveNext())
{
SqlParameter
param = new SqlParameter();
param.ParameterName = "@" + parameters.Current;
param.Value =
hstParameters[parameters.Current];
command.Parameters.Add(param);
}
}
catch (Exception exception)
{
HttpContext.Current.Response.Write("Error : " + exception.Message + " </br> Source : " +
exception.Source);
}
}
}
No comments:
Post a Comment