JQuery UI Tab With ASP.NET Web Form

Manoj Kalla
8y
18.7k
0
3

100

Article

JqueryTabs.zip

We will create three tabs:

First Tab: Members In GridView :: id="tabs-1
Second Tab: Member Duties Description :: id="tabs-2
Third Tab: Members in Accoridion :: id="tabs-3

Step by Step implementation of JQuery UI Accordion.

Create a new ASP.NET Web Site Project.
File, New, then Web Site

Created a ASP.NET web site project named JqueryTab.
Right click on project

Add, Add New Item, then name Web Form as Default.aspx
You can download from JQuery UI website, Downloaded Jquery-ui-1.11.4custom.zip file and download zip in your drive.
After extracted, now add the above mentioned three files into your project.
I had created two folder:

1. Styles: In style folder we will keep all CSS files.
2. Scripts: In scripts folder we will keep all JS files.

Right click on Project (Solution Explorer) - Add - Existing Item - Select following files from your extracted folder.
Jquery-ui.css - Add this file inside Styles folder.
Jquery-1.11.3.min.js - Add this file inside Scripts folder.
Jquery-ui.js - Add this file inside Scripts folder.
Given reference in Default.aspx file.
1. <link href="styles/jquery-ui.css" rel="stylesheet" />
2. <script src="scripts/jquery-1.11.3.min.js"></script>
3. <script src="scripts/jquery-ui.js"></script>
How to bind repeater control.

Please, refer this link.
Default.aspx page drag and drop Repeater control on it.
Set Connection string in web.config file.
1. <connectionStrings>
2. <add name="MemberCDACConnectionString" connectionString="Data Source=SAIBABA-PC\SAIBABA;Initial Catalog=MemberCDAC;Integrated Security=True" providerName="System.Data.SqlClient" />
3. </connectionStrings>
Table structure of tblMembers table.

GO
/****** Object: Table [dbo].[tblMembers] Script Date: 01/29/2016 22:50:34 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tblMembers](
[MemberID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[address] [nvarchar](500) NULL,
[place] [nvarchar](50) NULL,
[joindate] [datetime] NULL,
CONSTRAINT [PK_tblMembers] PRIMARY KEY CLUSTERED
(
[MemberID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

Sample data of table,

Above data we are going to display in ACCORDION.
Default.Aspx page code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="styles/jquery-ui.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$("#MyAccordion").accordion();
});
</script>
<style type="text/css">
#ParentDIV {
width: 50%;
height: 100%;
font-size: 12px;
font-family: Calibri;
}
</style>
<title>JqueryUI Accordion</title>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs" style="height:100%">
<ul>
<li><a href="#tabs-1">Members in GridView</a></li>
<li><a href="#tabs-2">Member Duties Description</a></li>
<li><a href="#tabs-3">Members in Accordion</a></li>
</ul>
<div id="tabs-1">
<asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<div id="MyAccordion" style="width: 50%;margin-bottom:200px;height:500px;">
<asp:Repeater ID="rptMembers" runat="server">
<ItemTemplate>
<h3>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label></h3>
<table>
<tr>
<td>
<b>Member ID :</b>
<asp:Label ID="lblMemberID" runat="server" Text='<%# Eval("MemberID")%>'></asp:Label>
<br />
<b>Friend Name :</b>
<asp:Label ID="lblMemberName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
<br />
<b>Address :</b>
<asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
<br />
<b>Place :</b>
<asp:Label ID="lblPlace" runat="server" Text='<%# Eval("Place") %>'></asp:Label>
<br />
<b>Join Date :</b>
<asp:Label ID="lblJoinDate" runat="server" Text='<%# Eval("Joindate","{0:dd/MM/yyyy}") %>'></asp:Label>
<br />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</form>
</body>
</html>

Default.Aspx.cs code

ADO.NET code to fetch data from Microsoft SQL Server database.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default: System.Web.UI.Page
{
string ConStr = ConfigurationManager.ConnectionStrings["MemberCDACConnectionString"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(ConStr);
SqlDataAdapter da = new SqlDataAdapter("Select * From tblMembers", ConStr);
DataSet ds = new DataSet();
da.Fill(ds, "FriendTable");
rptMembers.DataSource = ds;
rptMembers.DataBind();
GridView1.DataSource = ds;
GridView1.DataBind();
}
}

Result

Total Three Tabs created:

a. Members in GridView
b. Member in Duties Description
c. Members in Accordion

First Tab: Members in GridView

Second Tab: Members in Duties Description

Third Tab: Members in Accordion

Up Next

Ebook Download

View all

Hands on with ASP.Net MVC - Covering MVC 6

Read by 23.2k people

Download Now!

Learn

View all