ساخت اسلایدر از بانک (ASP.NET)

ساخت اسلایدر با 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;

    }
}

 

فایل هم به همراه جنریت اسکریپت دیتابیس ضمیمه شده

امیدوارم مقاله مفید واقع شده باشه

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

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