JQuery UI Tab با Web Form
سه شنبه 27 بهمن 1394در این مقاله قصد داریم با JQuery UI Tab ،سه تب ایجاد کنیم ،که تب اول مشخصات کاربران را در GridView ، تب دوم وظایف اعضا و تب سوم مشخصات کاربران را در Accordion ، نمایش میدهد.
شما می توانید از مقالات زیر نیز استفاده کنید:
چگونه از جی کوئری در 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
- ASP.net
- 2k بازدید
- 2 تشکر