Category >
ASP.NET
|| Published on :
Friday, July 3, 2015 || Views:
7577
||
Binding jQuery Accordion to DataTable in ASP.Net using C# with example Binding jQuery Accordion Binding jQuery Accordion to DataTable jQuery Accordion with asp.net
In this article, we are going to learn how to Binding jQuery Accordion to DataTable in ASP.Net using C# with example. jQuery Accordion control is basically used to display collapsible content panels for presenting information in a limited amount of space.
so lets start the coding for Binding jQuery Accordion to DataTable in ASP.Net using C# with example
Step 1: Create a new website in Visual Studio 2010
Step 2: Add a new asp.net webpage(fileName: Default2.aspx) with the following codes.In below codes we have added some control to achieve the target i.e. Binding jQuery Accordion to DataTable in ASP.Net using C#
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Binding jQuery Accordion to DataTable - ASP .Net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(function () {
var img = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
img: img
});
$("#toggle").button().click(function () {
if ($("#accordion").accordion("option", "img")) {
$("#accordion").accordion("option", "img", null);
} else {
$("#accordion").accordion("option", "img", img);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="accordion" style="width: 500px; font-family: Arial; font-size: 15px;">
<asp:Repeater ID="repAccordian" runat="server">
<ItemTemplate>
<h3>
<%#Eval("Name")%></br></h3>
<div>
<table>
<tr>
<td>
<b>Description: </b>
</td>
<td>
<%#Eval("Address") %>
</td>
</tr>
<tr>
<td>
<b>Email: </b>
</td>
<td>
<%#Eval("Email") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Step 3: Write the following codes in the code behind of the default2.aspx page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindAccordionUsingRepeater();
}
}
public DataTable BindEmployeeDetails()
{
try
{
DataTable dt = new DataTable();
DataColumn dc = new DataColumn();
dc.ColumnName = "Name";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "Address";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "Email";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dt.Rows.Add(new object[] { "Shahrukh Khan", "Actor", "shahrukh@shahrukh.com" });
dt.Rows.Add(new object[] { "Sanjay Leela Bhansali", "Director", "Sanjay101@gmail.com" });
dt.Rows.Add(new object[] { " Deepika Padukone", "Actress", "dp@gmail.com" });
return dt;
}
catch (Exception ex)
{
throw ex;
}
}
public void BindAccordionUsingRepeater()
{
repAccordian.DataSource = BindEmployeeDetails();
repAccordian.DataBind();
}
}
so, In this tutorial we have learned how to Binding jQuery Accordion to DataTable in ASP.Net using C# with example. Happy coding!!!