ساخت اسلایدر از بانک (ASP.NET)
جمعه 28 اسفند 1394ساخت اسلایدر با JQuery در ASP.NET و خواندن اطلاعات از بانک
سلام در این مقاله قصد ساختن اسلایدر از بانک اطلاعاتی رو داریم
ابتدا بانک اطلاعاتی و جدول اسلایدر رو میسازیم:
میتونید برای ساخت جدول، بانک با نام slider ایجاد کنید و اسکریپت زیر رو در اون اجرا کنید:
USE [slider] GO /****** Object: Table [dbo].[Slider] Script Date: 18/03/2016 03:30:10 ق.ظ ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Slider]( [ID] [int] IDENTITY(1,1) NOT NULL, [Name] [nvarchar](50) NULL, [Description] [nvarchar](300) NULL, [Image] [nvarchar](200) NOT NULL, CONSTRAINT [PK_Slider] PRIMARY KEY CLUSTERED ( [ID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO
کد زیر محتوای صفحه Default.aspx می باشد:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>مرجع تخصصی برنامه نویسان</title> <script src="JQuery/Jquery%202-1.js"></script> <script src="JQuery/Slider.js"></script> <link href="Style/StyleSheet.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <h1>مرجع تخصصی برنامه نویسان - اسلایدر واکنش گرا از بانک</h1> <div class="Slider"> <ul> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <li> <img alt="<%# Eval("Name") %>" src="<%# Eval("Image") %>" title="<%# Eval("Name") %>" /> <h3><%# Eval("Name") %></h3> <p><%# Eval("Description") %></p> </li> </ItemTemplate> </asp:Repeater> </ul> </div> <div class="Slider1"> <div class="Next">بعدی</div> <div class="Prev">قبلی</div> </div> </form> </body> </html>
برای اینکه عکس ها به صورت اتوماتیک هر چند ثانیه یکبار تغییر کنند کد جی کوئری زیر رو به پروژه اضافه میکنیم:
var index = 0; function AutoSlide() { if (index >= ($('.Slider li').length - 1)) index = 0; else index = index + 1; $('.Slider li').hide(); $('.Slider li:eq(' + index + ')').show(); } $(document).ready(function () { var Auto = setInterval(function () { AutoSlide(); }, 5000); });
حالا برای دکمه های بعدی و قبلی نیز کد جی کوئری زیر را استفاده می کنیم:
$('.Prev').click(function () { if (index >= ($('.Slider li').length - 1)) index = 0; else index = index + 1; $('.Slider li').hide(); $('.Slider li:eq(' + index + ')').fadeIn(1000); clearInterval(Auto); Auto = setInterval(function () { AutoSlide(); }, 5000); }); $('.Next').click(function () { if (index > 0) { index = index - 1; } else { index = $('.Slider li').length - 1; } $('.Slider li').hide(); $('.Slider li:eq(' + index + ')').fadeIn(1000); clearInterval(Auto); Auto = setInterval(function () { AutoSlide(); }, 5000); });
کد زیر هم css قالب هست:
@font-face { font-family: "Yekan"; src: url("../Fonts/Yekan.eot") format("eot"), url("../Fonts/Yekan.woff") format("woff"), url("../Fonts/Yekan.ttf") format("truetype"); } * { font-family: "Yekan"; margin: 0px; padding: 0px; border: none; direction: rtl; text-decoration: none; transition: 300ms; } body { background-color: #c6c6c6; } h1 { text-align:center; font-size:26px; margin-bottom:30px; } .Slider { width:100%; height:410px; } .Slider ul { list-style:none; } .Slider ul li { float:right; display:none; width:100%; height:400px; } .Slider ul li:first-child { display:block; } .Slider ul li img { width:100%; height:400px; position:absolute; } .Slider ul li h3 { font-size:24px; background-color:rgba(31, 148, 112, 0.80); z-index:4444; position:absolute; padding:0px 9px 2px 9px; margin:70px 207px 0px 0px; } .Slider ul li p { font-size:16px; background-color:rgba(100, 31, 148, 0.80); width:70%; text-align:center; padding:2px 8px; display:block; margin:135px 15% 0px 15%; position:absolute; color:#ffffff; } .Slider1 { width:160px; height:35px; margin:0px auto; } .Slider1 .Next { width:70px; height:35px; margin:0px 5px; float:right; background-color:rgba(148, 31, 92, 0.80); border-radius:5px; text-align:center; font-size:16px; color:#000000; cursor:pointer; transition:469ms; } .Slider1 .Next:hover { background-color:rgba(62, 4, 34, 0.80); color:#ffffff; } .Slider1 .Prev { width:70px; height:35px; margin:0px 5px; float:right; background-color:rgba(148, 31, 92, 0.80); border-radius:5px; text-align:center; font-size:16px; color:#000000; cursor:pointer; transition:469ms; } .Slider1 .Prev:hover { background-color:rgba(62, 4, 34, 0.80); color:#ffffff; }
حالا کد زیر را در صفحه Default.aspx.cs قرار می دهیم:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Slidebind(); } public void Slidebind() { DAL run = new DAL(); string sqltext = "Select * from slider order by ID Desc"; Repeater1.DataSource = run.ExecuteQuery(sqltext); Repeater1.DataBind(); } }
کلاس DAL هم شامل کانکشن استرینگ می باشد:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; using System.Net.Mail; /// <summary> /// Summary description for DAL /// </summary> public class DAL { public DAL() { // // TODO: Add constructor logic here // } public DataTable ExecuteQuery(string sqltext) { SqlConnection k = new SqlConnection(); k.ConnectionString = "Data Source=ASPSAZ;Initial Catalog=slider;Integrated Security=True"; DataTable dt = new DataTable(); SqlDataAdapter da = new SqlDataAdapter(); da.SelectCommand = new SqlCommand(); da.SelectCommand.Connection = k; da.SelectCommand.CommandText = sqltext; da.Fill(dt); return dt; } }
فایل هم به همراه جنریت اسکریپت دیتابیس ضمیمه شده
امیدوارم مقاله مفید واقع شده باشه
با تشکر از سایت برنامه نویسان
- ASP.net
- 2k بازدید
- 8 تشکر