JQuery - UI Accordion With ASP.NET Web Form

Manoj Kalla
9y
28k
0
2

100

Article

JqueryUIAccordion.zip

You can learn from my previous JQuery articles:

Step by step implementation of JQuery UI Accordion.

Create a new ASP.NET Web Site Project.

Click File, then New Web Site.

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

Add, Add New Item, then name WebForm as Default.aspx:
You can download from JQueryUI website, Downloaded Jquery-ui-1.11.4custom.zip file; download zip in your drive.
Add the above mentioned three files into your project after zip is extracted.

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, then select the 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 the following link.
Default.aspx page drag & 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.
1. GO
2. /****** Object: Table [dbo].[tblMembers] Script Date: 01/29/2016 22:50:34 ******/
3. SET ANSI_NULLS ON
4. GO
5. SET QUOTED_IDENTIFIER ON
6. GO
7. CREATE TABLE [dbo].[tblMembers](
8. [MemberID] [int] IDENTITY(1,1) NOT NULL,
9. [Name] [nvarchar](50) NULL,
10. [address] [nvarchar](500) NULL,
11. [place] [nvarchar](50) NULL,
12. [joindate] [datetime] NULL,
13. CONSTRAINT [PK_tblMembers] PRIMARY KEY CLUSTERED
14. (
15. [MemberID] ASC
16. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
17. ) ON [PRIMARY]
Sample data of Table

Above data we are going to display in ACCORDION.
Default.aspx page code.
1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2. <!DOCTYPE html>
3. <html xmlns="http://www.w3.org/1999/xhtml">
5. <head runat="server">
6. <link href="styles/jquery-ui.css" rel="stylesheet" />
7. <script src="scripts/jquery-1.11.3.min.js"></script>
8. <script src="scripts/jquery-ui.js"></script>
9. <script type="text/javascript">
10. $(function ()
11. {
12. $("#MyAccordion").accordion();
13. });
14. </script>
15. <title>JqueryUI Accordion</title>
16. </head>
18. <body>
19. <form id="form1" runat="server">
20. <div id="MyAccordion" style="width:50%">
21. <asp:Repeater ID="rptMembers" runat="server">
22. <ItemTemplate>
23. <h3>
24. <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label></h3>
25. <div>
26. <p>
27. <table>
28. <tr>
29. <td> <b>Member ID :</b>
30. <asp:Label ID="lblMemberID" runat="server" Text='<%# Eval("MemberID")%>'></asp:Label> <br /> <b>Friend Name :</b>
31. <asp:Label ID="lblMemberName" runat="server" Text='<%# Eval("Name") %>'></asp:Label> <br /> <b>Address :</b>
32. <asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label> <br /> <b>Place :</b>
33. <asp:Label ID="lblPlace" runat="server" Text='<%# Eval("Place") %>'></asp:Label> <br /> <b>Join Date :</b>
34. <asp:Label ID="lblJoinDate" runat="server" Text='<%# Eval("Joindate","{0:dd/MM/yyyy}") %>'></asp:Label> <br /> </td>
35. </tr>
36. </table>
37. </p>
38. </div>
39. </ItemTemplate>
40. </asp:Repeater>
41. </div>
42. </form>
43. </body>
45. </html>
Default.aspx.cs code:

ADO.NET code to fetch data from Microsoft SQL Server database.
1. using System;
2. using System.Collections.Generic;
3. using System.Configuration;
4. using System.Data;
5. using System.Data.SqlClient;
6. using System.Linq;
7. using System.Web;
8. using System.Web.UI;
9. using System.Web.UI.WebControls;
10. public partial class _Default: System.Web.UI.Page
11. {
12. string ConStr = ConfigurationManager.ConnectionStrings["MemberCDACConnectionString"].ConnectionString;
13. protected void Page_Load(object sender, EventArgs e)
14. {
15. SqlConnection con = new SqlConnection(ConStr);
16. SqlDataAdapter da = new SqlDataAdapter("Select * From tblMembers", ConStr);
17. DataSet ds = new DataSet();
18. da.Fill(ds, "FriendTable");
19. rptMembers.DataSource = ds;
20. rptMembers.DataBind();
21. }
22. }
Result: