JQuery UI Tab با Web Form

سه شنبه 27 بهمن 1394

در این مقاله قصد داریم با JQuery UI Tab ،سه تب ایجاد کنیم ،که تب اول مشخصات کاربران را در GridView ، تب دوم وظایف اعضا و تب سوم مشخصات کاربران را در Accordion ، نمایش میدهد.

JQuery UI Tab با Web Form

شما می توانید از مقالات زیر نیز استفاده کنید:

چگونه از  جی کوئری در  Asp.Net استفاده کنیم؟

چگونه از JQuery UI Datepicker در ASP.NET استفاده کنیم؟

چگونه از JQuery UI Accordion در ASP.NET استفاده کنیم؟

سه تب ایجاد میکنیم:

تب اول : نمایش  کاربران در GridView

تب دوم: توصیف وظایف اعضا

تب سوم: نمایش  کاربران در Accordion

گام به گام پروژه را پیاده سازی میکنیم
پروژه وب سایت  ASP.NET  جدید  با  نام JqueryTab ایجاد میکنیم.

2.  بروی پروژه راست کلیک کرده  و از مسیر (Add, Add New Item Web Form ) یک صفحه وب فرم جدید با نام  Default.aspx ایجاد میکینم.

 

3. از سایت JQuery UI ، فایل  Jquery-ui-1.11.4custom.zip  را دانلود و فایل های فشرده دانلود شده را  را از حالت فشرده خارج میکنیم.

4. پس از اینکه فایلها را از حالت فشرده خارج کردیم، سه فایل زیر را  به پروژه خود اضافه میکنیم.

 Jquery-ui.css  
Jquery-1.11.3.min.js   
Jquery-ui.js  

در ابتدا دو پوشه زیر را ایجاد میکنیم:

1. CSS: در پوشه CSS ما تمام فایل های CSS را حفظ خواهد کرد.
2. JS: در پوشه JS ما تمام فایل های JS را حفظ خواهد کرد.

روی پروژه راست کلیک کرده و گزینه Add و   Existing Item را انتخاب و از پنجره باز شده فایلهای زیر را انتخاب میکنیم

 Jquery-ui.css   را در پوشه CSSاضافه میکنیم.
Jquery-1.11.3.min.js
   را در پوشه Js اضافه میکنیم.
Jquery-ui.js
   را در پوشه Js اضافه میکنیم.

 

 

5. منابع زیر را به فایل Default.aspx اضافه میکنیم.

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

6. با استفاده از کنترل repeater اتصال را برقرار میکینم

7. کنترل repeater را به صفحه Default.aspx اضافه میکنیم.

8. Connection string را در فایل web.config  ست  میکنیم.

<connectionStrings>
    <add name="JqueryTabConnectionString" connectionString="Data Source=(local);Initial Catalog=JqueryTab;Persist Security Info=True;User ID=sa;Password=123"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

9. ساختار جدول  tblMembers :

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]  

10. نمونه داده های جدول

از داده های بالا برای نمایش در ACCORDION استفاده میشود

11. کدهای صفحه ی Default.Aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryTab.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/jquery-ui.css" rel="stylesheet" />
    <script src="JS/jquery-1.11.3.min.js"></script>
    <script src="JS/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>  
</head>
<body dir="rtl">
     <form id="form2" runat="server">  
            <div id="tabs" style="height:100%">  
                <ul>  
                    <li><a href="#tabs-1">کاربران در GridView  </a></li>  
                    <li><a href="#tabs-2">توصیف وظایف اعضا </a></li>  
                    <li><a href="#tabs-3">   کاربران در Accordion</a></li>  
                </ul>  
                <div id="tabs-1">  
                    <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Vertical">  
                        <AlternatingRowStyle BackColor="#DCDCDC" />
                        <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />  
                        <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />  
                        <PagerStyle ForeColor="Black" HorizontalAlign="Center" BackColor="#999999" />  
                        <RowStyle BackColor="#EEEEEE" ForeColor="Black" />  
                        <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />  
                        <SortedAscendingCellStyle BackColor="#F1F1F1" />  
                        <SortedAscendingHeaderStyle BackColor="#0000A9" />  
                        <SortedDescendingCellStyle BackColor="#CAC9C9" />  
                        <SortedDescendingHeaderStyle BackColor="#000065" />  
                    </asp:GridView>  
                </div>  
                <div id="tabs-2">  
                    <p>براساس لایحه اصلاح قانون تجارت مصوب ۱۳۴۷، شرکت سهامی توسط هیئت‌مدیره منتخب مجمع عمومی اداره می‌شود و هیئت‌مدیره با رعایت قوانین و مقررات جاری کشور، اساسنامه شرکت و مصوبات مجمع عمومی صاحبان سهام، شرکت را اداره می‌کند. طبق مواد ۱۴۲ و ۱۴۳ اصلاحیه مزبور، اعضاء هیئت‌مدیره در برابر هرگونه قصور و سهل‌انگاری خویش و دیگر اعضاء، که منجر به ورود خسارت به شرکت شود، به‌صورت فردی و گروهی در مقابل سهامداران و اشخاص ثالث مسئول هستند در اصلاحات پیشنهادی اخیر، مواد فوق‌الذکر به‌نحو مناسب تبیین نگردیده است برای سنجش مسئولیت مدیران تعیین حدود مسئولیت و مبانی مسئولیت ایشان وضع مقررات کامل و شفاف، امری ضروری است. </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> شناسه اعضا :</b>  
                                            <asp:Label ID="lblMemberID" runat="server" Text='<%# Eval("MemberID")%>'></asp:Label>  
                                            <br />  
                                            <b>نام  :</b>  
                                            <asp:Label ID="lblMemberName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>  
                                            <br />  
                                            <b>آدرس :</b>  
                                            <asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>  
                                            <br />  
                                            <b>زادگاه   :</b>  
                                            <asp:Label ID="lblPlace" runat="server" Text='<%# Eval("Place") %>'></asp:Label>  
                                            <br />  
                                            <b>تاریخ پیوستن  :</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> 
                </div> 
        </form>  
   
</body>
</html>

12. کدهای صفحه ی  Default.Aspx.cs

کدهای ADO.NET برای واکشی داده ها از دیتابیس SQL Server  :

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;

namespace JqueryTab
{
    public partial class Default : System.Web.UI.Page
    {
        string ConStr = ConfigurationManager.ConnectionStrings["JqueryTabConnectionString"].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();  

        }
    }
}

 

13. نتیجه

در کل سه تب ایجاد شده:

الف.نمایش  کاربران در GridView
ب. توصیف وظایف اعضا
ج. نمایش کاربران در Accordion

تب اول : نمایش  کاربران در GridView

تب دوم: توصیف وظایف اعضا

تب سوم: نمایش  کاربران در Accordion

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید