In this article we will see how to create dynamic Jquery repeater using database in Asp .net. Jquery accordion is very helpful when you want to show information in collapsible content panels. When you click any header of the accordion it will expand and display related content.
Let's Begin:
Step1: First of all we need to reference Jquery scripts and Jquery CSS into our project. For this we will use Jquery CDN (Content delivery network) this will increase performance.
Paste these between your <head></head> section or you can also place before </body> section of your page.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<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>
<script type="text/javascript">
$(function () {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons
});
$("#toggle").button().click(function () {
if ($("#accordion").accordion("option", "icons")) {
$("#accordion").accordion("option", "icons", null);
} else {
$("#accordion").accordion("option", "icons", icons);
}
});
});
</script>
Step2: Lets create some data to bind into our Jquery Accordion. For this example I am using DataTable but you can also use database. If you want to try with DataTable add NameSpace "using System.Data".
//using System.Data;
public DataTable createDataTable()
{
DataTable dt = new DataTable();
DataColumn dc = new DataColumn();
dc.ColumnName = "Name";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "Description";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "Email";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "Phone";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dt.Rows.Add(new object[] { "Max", "Hello my name is Max and I am software engineer.", "[email protected]", "My Phone is 123456789" });
dt.Rows.Add(new object[] { "Albert", "Hello my name is Albert and I am software engineer.", "[email protected]", "My Phone is 123456789" });
dt.Rows.Add(new object[] { "Destin", "Hello my name is Destin and I am software engineer.", "[email protected]", "My Phone is 123456789" });
dt.Rows.Add(new object[] { "Jessie", "Hello my name is Jessie and I am software engineer.", "[email protected]", "My Phone is 123456789" });
dt.Rows.Add(new object[] { "Joe", "Hello my name is Joe and I am software engineer.", "[email protected]", "My Phone is 123456789" });
return dt;
}
Step3: Now we will create JQuery Accordion using repeater control. First of all lets understand HTML used to create accordion.
From above image we can understand that to create dynamic accordion using repeater we need
1) DIV with id="accordion"
2) h3 Tags for accordion Header.
3) Another DIV inside accordion DIV for content.
<div id="accordion" style="width: 500px;">
<asp:Repeater ID="repAccordian" runat="server">
<ItemTemplate>
<h3>
<%#Eval("Name") %></br></h3>
<div>
<table>
<tr>
<td>
<b>Description</b>
</td>
<td>
<%#Eval("Description") %>
</td>
</tr>
<tr>
<td>
<b>Email</b>
</td>
<td>
<%#Eval("Email") %>
</td>
</tr>
<tr>
<td>
<b>Phone</b>
</td>
<td>
<%#Eval("Phone") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Step 4: Create method to retrieve data from DataTable and bind into repeater.
public void createAccordianUsingRepeater()
{
repAccordian.DataSource = createDataTable();
repAccordian.DataBind();
}
Step5: Finally bind repeater on Page_Load()
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
createAccordianUsingRepeater();
}
}
Final Output:
