Responsive Multi Item Slider with jQuery in Asp.net

By Unknown - Tuesday, September 15, 2015 - No Comments

(Responsive Multi Item Slider with CSS Animations and jQuery in Asp.net) –Bài viết dưới đây sẽ hướng dẫn các bạn cách tạo Slider dạng nhóm.

- B1: Tạo CSDL Customers trong SQL Server

- B2: Tạo các bảng dữ liệu: Categories, Products và có cấu trúc sau

- B3: Nhập dữ liệu cho bảng Categories và Products

- B4: Tạo Project trong Microsoft Visual Studio 2010

- B5: Download thư viện tại đây

- B6: Giải nén, copy file jquery.catslider.js và modernizr.custom.63321.js vào thư mục Js

- B7: Copy file demo.css và style.css vào thư mục Styles

- B8: Download Script SQL tại đây.

- B9: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head

<title>Responsive Multi Item Slider in Asp.net</title>

<asp:ContentPlaceHolder ID="HeadContent" runat="server">

</asp:ContentPlaceHolder>

</head>

- B10: Mở file Default.aspx dưới dạng HTML và nhập mã HTML

C# Code

<%@ Page Title="Responsive Multi Item Slider in Asp.net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ResponsiveMultiItemSlider._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h3>Responsive Multi Item Slider in Asp.net</h3>

</div>

<asp:Repeater ID="rptSlider" OnItemDataBound="rptSlider_ItemDataBound" runat="server">

<ul>

<asp:Repeater ID="rptSubSlider" runat="server">

<asp:Literal ID="ltItem" runat="server"></asp:Literal>

</ItemTemplate>

</asp:Repeater>

</ul>

</ItemTemplate>

</asp:Repeater>

<nav>

<asp:Repeater ID="rptNav" OnItemDataBound="rptNav_ItemDataBound" runat="server">

<asp:Literal ID="ltItem" runat="server"></asp:Literal>

</ItemTemplate>

</asp:Repeater>

</nav>

</div>

$(function () {

$('#mi-slider').catslider();

});

</script>

</asp:Content>

VB.NET Code

<%@ Page Title="Responsive Multi Item Slider in Asp.net" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="ResponsiveMultiItemSlider._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h3>Responsive Multi Item Slider in Asp.net</h3>

</div>

<asp:Repeater ID="rptSlider" runat="server">

<ul>

<asp:Repeater ID="rptSubSlider" runat="server">

<asp:Literal ID="ltItem" runat="server"></asp:Literal>

</ItemTemplate>

</asp:Repeater>

</ul>

</ItemTemplate>

</asp:Repeater>

<nav>

<asp:Repeater ID="rptNav" runat="server">

<asp:Literal ID="ltItem" runat="server"></asp:Literal>

</ItemTemplate>

</asp:Repeater>

</nav>

</div>

$(function () {

$('#mi-slider').catslider();

});

</script>

</asp:Content>

- B11: Viết Code cho file Default.aspx

C# Code

//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

using System;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace ResponsiveMultiItemSlider

{

public partial class _Default : System.Web.UI.Page

{

#region "Bind Data"

private DataTable BindSlider(int CategoryID)

{

SqlDataProvider objSQL = new SqlDataProvider();

DataTable objBind = default(DataTable);

objBind = objSQL.FillTable("Select * from Products Where CategoryID=" + CategoryID);

return objBind;

}

private void BindDataNav()

{

SqlDataProvider objSQL = new SqlDataProvider();

DataTable objBind = default(DataTable);

objBind = objSQL.FillTable("Select * from Categories");

rptNav.DataSource = objBind;

rptNav.DataBind();

rptSlider.DataSource = objBind;

rptSlider.DataBind();

}

#endregion

#region "Repeater Methods"

protected void rptNav_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)

{

if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)

{

string ItemName = DataBinder.Eval(e.Item.DataItem, "CategoryName").ToString();

Literal ltItem = (Literal)e.Item.FindControl("ltItem");

ltItem.Text = "<a href=\"#\">" + ItemName + "</a>";

}

protected void rptSlider_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)

{

if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)

{

int CategoryID =Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "CategoryID"));

DataTable objBind = new DataTable();

objBind = BindSlider(CategoryID);

Repeater rptSlider = (Repeater)e.Item.FindControl("rptSubSlider");

if (rptSlider != null)

{

rptSlider.DataSource = objBind;

rptSlider.DataBind();

}

#endregion

#region "Event Handles"

protected void Page_Load(object sender, System.EventArgs e)

{

try

{

if (!IsPostBack)

{

BindDataNav();

}

catch

{

}

#endregion

}

VB.NET Code

'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

Imports System.IO

Namespace ResponsiveMultiItemSlider

Public Class _Default

Inherits System.Web.UI.Page

#Region "Bind Data"

Private Function BindSlider(ByVal CategoryID As Integer) As DataTable

Dim objSQL As New SqlDataProvider

Dim objBind As DataTable

objBind = objSQL.FillTable("Select * from Products Where CategoryID=" & CategoryID)

Return objBind

End Function

Private Sub BindDataNav()

Dim objSQL As New SqlDataProvider

Dim objBind As DataTable

objBind = objSQL.FillTable("Select * from Categories")

rptNav.DataSource = objBind

rptNav.DataBind()

rptSlider.DataSource = objBind

rptSlider.DataBind()

End Sub

#End Region

#Region "Repeater Methods"

Private Sub rptNav_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptNav.ItemDataBound

If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then

Dim ItemName As String = DataBinder.Eval(e.Item.DataItem, "CategoryName")

Dim ltItem As Literal = DirectCast(e.Item.FindControl("ltItem"), Literal)

ltItem.Text = "<a href=""#"">" & ItemName & "</a>"

End If

End Sub

Private Sub rptSlider_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptSlider.ItemDataBound

If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then

Dim CategoryID As Integer = DataBinder.Eval(e.Item.DataItem, "CategoryID")

Dim objBind As New DataTable

objBind = BindSlider(CategoryID)

Dim rptSlider As Repeater = DirectCast(e.Item.FindControl("rptSubSlider"), Repeater)

If Not rptSlider Is Nothing Then

rptSlider.DataSource = objBind

rptSlider.DataBind()

End If

End Sub

#End Region

#Region "Event Handles"

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Try

If Page.IsPostBack = False Then

BindDataNav()

End If

Catch ex As Exception

End Try

End Sub

#End Region

End Class

End Namespace

Chúc các bạn thành công!

Quang Bình

News Ticker