Post
Ask Question

JQuery - UI Accordion With ASP.NET Web Form

You can learn from my previous JQuery articles:

Step by step implementation of JQuery UI Accordion.

  1. Create a new ASP.NET Web Site Project.

    Click File, then New Web Site.

    Web Site Project

    Created a ASP.NET web site project named JqueryUIAccordion.

  2. Right click on project.

    Add, Add New Item, then name WebForm as Default.aspx:

    WebForm

  3. You can download from JQueryUI website, Downloaded Jquery-ui-1.11.4custom.zip file; download zip in your drive.

    download zip

  4. 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.

    JqueryUI

  5. 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>  
  6. How to bind repeater control?

    Please refer the following link.

  7. Default.aspx page drag & drop Repeater control on it.

  8. 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>  
  9. 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]  
  10. Sample data of Table

    Table

    Above data we are going to display in ACCORDION.
     
  11. 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">  
    4.   
    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>  
    17.   
    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>  
    44.   
    45. </html>  
  12. 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. }   
  13. Result:

    Result

    Run


Similar Articles