Post
Ask Question

JQuery UI Tab With ASP.NET Web Form

We will create three tabs:

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

Step by Step implementation of JQuery UI Accordion.

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

    empty

    Created a ASP.NET web site project named JqueryTab.

  2. Right click on project

    Add, Add New Item, then name Web Form as Default.aspx

    webform

  3. You can download from JQuery UI website, Downloaded Jquery-ui-1.11.4custom.zip file and download zip in your drive.

    drive

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

    solution

  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 this link.

  7. Default.aspx page drag and 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.   
    3.     <!DOCTYPE html>  
    4.   
    5.     <html xmlns="http://www.w3.org/1999/xhtml">  
    6.   
    7.     <head runat="server">  
    8.         <link href="styles/jquery-ui.css" rel="stylesheet" />  
    9.         <script src="scripts/jquery-1.11.3.min.js"></script>  
    10.         <script src="scripts/jquery-ui.js"></script>  
    11.   
    12.         <script type="text/javascript">  
    13.             $(function() {  
    14.                 $("#tabs").tabs();  
    15.                 $("#MyAccordion").accordion();  
    16.             });  
    17.         </script>  
    18.         <style type="text/css">  
    19.             #ParentDIV {  
    20.                 width: 50%;  
    21.                 height: 100%;  
    22.                 font-size: 12px;  
    23.                 font-family: Calibri;  
    24.             }  
    25.         </style>  
    26.         <title>JqueryUI Accordion</title>  
    27.     </head>  
    28.   
    29.     <body>  
    30.         <form id="form1" runat="server">  
    31.             <div id="tabs" style="height:100%">  
    32.                 <ul>  
    33.                     <li><a href="#tabs-1">Members in GridView</a></li>  
    34.                     <li><a href="#tabs-2">Member Duties Description</a></li>  
    35.                     <li><a href="#tabs-3">Members in Accordion</a></li>  
    36.                 </ul>  
    37.                 <div id="tabs-1">  
    38.                     <asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">  
    39.                         <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />  
    40.                         <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />  
    41.                         <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />  
    42.                         <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />  
    43.                         <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />  
    44.                         <SortedAscendingCellStyle BackColor="#FFF1D4" />  
    45.                         <SortedAscendingHeaderStyle BackColor="#B95C30" />  
    46.                         <SortedDescendingCellStyle BackColor="#F1E5CE" />  
    47.                         <SortedDescendingHeaderStyle BackColor="#93451F" />  
    48.                     </asp:GridView>  
    49.                 </div>  
    50.                 <div id="tabs-2">  
    51.                     <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>  
    52.                 </div>  
    53.   
    54.                 <div id="tabs-3">  
    55.   
    56.                     <div id="MyAccordion" style="width: 50%;margin-bottom:200px;height:500px;">  
    57.                         <asp:Repeater ID="rptMembers" runat="server">  
    58.                             <ItemTemplate>  
    59.                                 <h3>  
    60. <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label></h3>  
    61.   
    62.                                 <table>  
    63.                                     <tr>  
    64.                                         <td>  
    65.                                             <b>Member ID :</b>  
    66.                                             <asp:Label ID="lblMemberID" runat="server" Text='<%# Eval("MemberID")%>'></asp:Label>  
    67.                                             <br />  
    68.                                             <b>Friend Name :</b>  
    69.                                             <asp:Label ID="lblMemberName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>  
    70.                                             <br />  
    71.                                             <b>Address :</b>  
    72.                                             <asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>  
    73.                                             <br />  
    74.                                             <b>Place :</b>  
    75.                                             <asp:Label ID="lblPlace" runat="server" Text='<%# Eval("Place") %>'></asp:Label>  
    76.                                             <br />  
    77.                                             <b>Join Date :</b>  
    78.                                             <asp:Label ID="lblJoinDate" runat="server" Text='<%# Eval("Joindate","{0:dd/MM/yyyy}") %>'></asp:Label>  
    79.                                             <br />  
    80.                                         </td>  
    81.                                     </tr>  
    82.                                 </table>  
    83.                             </ItemTemplate>  
    84.                         </asp:Repeater>  
    85.                     </div>  
    86.                 </div>  
    87.         </form>  
    88.     </body>  
    89.   
    90.     </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.   
    11. public partial class _Default: System.Web.UI.Page  
    12. {  
    13.   
    14.     string ConStr = ConfigurationManager.ConnectionStrings["MemberCDACConnectionString"].ConnectionString;  
    15.   
    16.     protected void Page_Load(object sender, EventArgs e)  
    17.     {  
    18.         SqlConnection con = new SqlConnection(ConStr);  
    19.         SqlDataAdapter da = new SqlDataAdapter("Select * From tblMembers", ConStr);  
    20.         DataSet ds = new DataSet();  
    21.         da.Fill(ds, "FriendTable");  
    22.         rptMembers.DataSource = ds;  
    23.         rptMembers.DataBind();  
    24.   
    25.         GridView1.DataSource = ds;  
    26.         GridView1.DataBind();  
    27.     }  
    28. }  

  13. Result

    Total Three Tabs created:

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

    First Tab: Members in GridView

    First Tab
    Second Tab: Members in Duties Description

    Second Tab

    Third Tab: Members in Accordion

    Third Tab


Similar Articles