Description:-
In this Example we explain that how to bind an Accordion Control with a database in DataList Control or any other Data Control in ASP.Net using Ajax.in which we create how to bind Dynamically Load Data into Accordion Control using Code Behind Dataset.
What is Ajax Accordion control:
The Accordion is a web control that allows you to provide multiple panes in which you can Defined the Description of this panes and display only one at a time. Each Accordion Panes control has a template for its Header and its Content. Header is the Heading of the pane and Content is the Description of the panes .
The Accordion is a web control that allows you to provide multiple panes in which you can Defined the Description of this panes and display only one at a time. Each Accordion Panes control has a template for its Header and its Content. Header is the Heading of the pane and Content is the Description of the panes .
For Example:-
Header
is the what is AJAX. Then Content is the AJAX is a Asynchronous javascript and
xml.
Accordion supports three Auto Size modes so Accordion can fit in a variety of layouts.
- None - Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.
- Limit - 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 - 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.
Property of Accordion Control:-
- SelectedIndex - The AccordionPane to be initially visible
- Panes - Collection of Accordion Pane controls
- HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding
- ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding
- DataSource - The data source to use. DataBind() must be called.
- DataSourceID - The ID of the data source to use.
- DataMember - The member to bind to when using a DataSourceID
- HeaderCssClass - CSS class name for the headers. .
- HeaderSelectedCssClass - CSS class name for the selected header.
- FadeTransitions – generally True or false. True means the fading transition effect, false means standard transitions.
- TransitionDuration - Number of milliseconds to animate the transitions
- FramesPerSecond - Number of frames per second used in the transition animations
- AutoSize - Restrict the growth of the Accordion. The values of the AutoSize enumeration are described above.
- RequireOpenedPane - Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
- SuppressHeaderPostbacks - Prevent the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your headers for accessibility)
Example of Ajax password strength Ajax password checker
Read and write File in asp.net Read/write File in Asp.Net
Bind Excelsheet data to Gridview Control CRUD operation in Excel database
to download Complete Example click below download link
datalist.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="datalist.aspx.cs" Inherits="datalist" EnableEventValidation="true" %>
<%@ 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 id="Head1" runat="server">
<title>Simple Accordion</title>
<style type="text/css">
.accordion-header, .accordion-selected {
width: 300px;
background-color: #c0c0c0;
margin-bottom:2px;
padding:2px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.accordion-content {
width:300px;
margin-bottom:2px;
padding:2px;
}
.accordion-selected, .accordion-content {
border:solid 1px #666666;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Accordion ID="Accordion2" runat="server" TransitionDuration="100" SelectedIndex=-1 FramesPerSecond="200" FadeTransitions="true" RequireOpenedPane="false" OnItemDataBound="Accordion1_ItemDataBound"
ContentCssClass="accordion-content" HeaderCssClass="accordion-header" HeaderSelectedCssClass="accordion-selected" >
<HeaderTemplate>
<%#DataBinder.Eval(Container.DataItem, "name")%> </HeaderTemplate>
<ContentTemplate>
<asp:HiddenField ID="txt_categoryID" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"id") %>' />
<asp:FormView ID="FormView1" runat="server">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"moviedesc") %>
</ItemTemplate>
</asp:FormView>
</ContentTemplate>
</asp:Accordion>
</div>
</form>
</body>
</html>
datalist.aspx.cs:-
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data.SqlClient;
using
System.Data;
public partial class datalist :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if (!Page.IsPostBack)
{
getData();
}
}
public void getData()
{
SqlConnection sqlConn = new SqlConnection("Data Source=SQLDB;User
ID=Demoh;Password=Demo1@");
SqlCommand sqlSelect = new SqlCommand("SELECT * from
movie", sqlConn);
sqlSelect.CommandType = System.Data.CommandType.Text;
SqlDataAdapter sqlAdapter = new SqlDataAdapter(sqlSelect);
DataSet myDataset = new DataSet();
sqlAdapter.Fill(myDataset);
Accordion2.DataSource = myDataset.Tables[0].DefaultView;
Accordion2.DataBind();
}
protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
{
if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
{
SqlConnection sqlConn = new SqlConnection("Data Source=SQLDB;User
ID=Demoh;Password=Demo1@");
sqlConn.Open();
SqlCommand sqlSelect = new SqlCommand("SELECT moviedesc from
movie where id = '" + ((HiddenField)e.AccordionItem.FindControl("txt_categoryID")).Value + "'", sqlConn);
sqlSelect.CommandType = System.Data.CommandType.Text;
SqlDataAdapter sqlAdapter = new SqlDataAdapter(sqlSelect);
DataSet myDataset = new DataSet();
sqlAdapter.Fill(myDataset);
sqlConn.Close();
FormView grd = new FormView();
grd = (FormView)e.AccordionItem.FindControl("FormView1");
grd.DataSource = myDataset;
grd.DataBind();
}
}
}
0 comments:
Post a Comment