(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
<head runat="server">
<title>Responsive Multi Item Slider in Asp.net</title>
<link href="Styles/Site.css"rel="stylesheet"type="text/css"/>
<link rel="stylesheet"type="text/css"href="Styles/style.css"/>
<link rel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'rel='stylesheet'type='text/css'>
<script src="js/modernizr.custom.63321.js"></script>
<asp:ContentPlaceHolderID="HeadContent"runat="server">
</asp:ContentPlaceHolder>
</head>
- B10: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
C# Code
<%@ PageTitle="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">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Responsive Multi Item Slider in Asp.net</h3>
</div>
<div class="panel-body">
<div class="main">
<div id="mi-slider" class="mi-slider">
<asp:Repeater ID="rptSlider"OnItemDataBound="rptSlider_ItemDataBound"runat="server">
<ItemTemplate>
<ul>
<asp:Repeater ID="rptSubSlider"runat="server">
<ItemTemplate>
<li><a href='<%# Eval("URL")%>'><image src='<%# Eval("ImageURL")%>'></image><h4><%# Eval("ProductName")%></h4></a></li>
<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">
<ItemTemplate>
<asp:Literal ID="ltItem" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
</nav>
</div>
</div>
</div>
</div>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"src="js/jquery.catslider.js"></script>
<script type="text/javascript">
$(function() {
$('#mi-slider').catslider();
});
</script>
</asp:Content>VB.NET Code
<%@ PageTitle="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">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Responsive Multi Item Slider in Asp.net</h3>
</div>
<div class="panel-body">
<div class="main">
<div id="mi-slider" class="mi-slider">
<asp:Repeater ID="rptSlider"runat="server">
<ItemTemplate>
<ul>
<asp:Repeater ID="rptSubSlider"runat="server">
<ItemTemplate>
<li><a href='<%# Eval("URL")%>'><image src='<%# Eval("ImageURL")%>'></image><h4><%# Eval("ProductName")%></h4></a></li>
<asp:Literal ID="ltItem" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
</ul>
</ItemTemplate>
</asp:Repeater>
<nav>
<asp:Repeater ID="rptNav" runat="server">
<ItemTemplate>
<asp:Literal ID="ltItem" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
</nav>
</div>
</div>
</div>
</div>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"src="js/jquery.catslider.js"></script>
<script type="text/javascript">
$(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 DataTableBindSlider(int CategoryID)
{
SqlDataProvider objSQL = newSqlDataProvider();
DataTable objBind = default(DataTable);
objBind = objSQL.FillTable("Select * from Products Where CategoryID=" + CategoryID);
return objBind;
}
private voidBindDataNav()
{
SqlDataProvider objSQL = newSqlDataProvider();
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 voidrptNav_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgse)
{
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 voidrptSlider_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgse)
{
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.EventArgse)
{
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 FunctionBindSlider(ByVal CategoryID As Integer) As DataTable
Dim objSQL As New SqlDataProvider
Dim objBind As DataTable
objBind = objSQL.FillTable("Select * from Products Where CategoryID=" & CategoryID)
ReturnobjBind
End Function
Private SubBindDataNav()
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 SubrptNav_ItemDataBound(ByVal sender As Object, ByVal e AsSystem.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptNav.ItemDataBound
If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then
Dim ItemName AsString = DataBinder.Eval(e.Item.DataItem, "CategoryName")
Dim ltItem AsLiteral = DirectCast(e.Item.FindControl("ltItem"), Literal)
ltItem.Text = "<a href=""#"">" & ItemName & "</a>"
End If
End Sub
Private SubrptSlider_ItemDataBound(ByVal sender As Object, ByVal e AsSystem.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptSlider.ItemDataBound
If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then
DimCategoryID As Integer= DataBinder.Eval(e.Item.DataItem, "CategoryID")
Dim objBind AsNew DataTable
objBind = BindSlider(CategoryID)
Dim rptSlider AsRepeater = DirectCast(e.Item.FindControl("rptSubSlider"), Repeater)
If NotrptSlider Is NothingThen
rptSlider.DataSource = objBind
rptSlider.DataBind()
End If
End If
End Sub
#End Region
#Region "Event Handles"
Protected SubPage_Load(ByVal sender AsObject, 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
0 comments Blogger 0 Facebook
Post a Comment