(Responsive Bootstrap Carousel in Repeater Asp.net) – Carousel, Slider là một thành phần quan trọng của Website. Nhờ nó mà người phát triển có thể dễ dàng đưa những thông tin mới, những sự kiện quan trọng, những sản phẩm mới đến người xem. Bài viết dưới đây sẽ hướng dẫn các bạn cách sử dụng thư viện Bootstrap kết hợp với Repeater để tạo Carousel.

Nghe những bài hát đỉnh nhất về Thấy cô giáo - Nghe trên Youtube

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

- B2: Download thư viện bootstrap, copy file bootstrap.js vào thư mục Js

- B3: Copy file bootstrap.css vào thư mục Styles

- B4: Download thư viện ảnh tại đây và copy vào thư mục Images

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

<title>Responsive Bootstrap Carousel in Repeater Asp.net</title>

<asp:ContentPlaceHolderID="HeadContent"runat="server">

</asp:ContentPlaceHolder>

</head>

- B6: Mở file Site.css bổ xung đoạn mã phía dưới

.thumbnail {

width: 200px;

height: 200px;

overflow: hidden;

border: 0;

box-shadow: 0 12px 12px -10px #c4c4c4;

-webkit-box-shadow: 0 17px 22px -20px #c4c4c4;

-moz-box-shadow: 0 12px 12px -10px #c4c4c4;

}

.thumbnail img{ width:100%; height:auto; }

.thumbnails p{

text-align: center;

padding: 10px;

}

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

C# Code

<%@ PageTitle="Responsive Bootstrap Carousel in Repeater Asp.net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ResponsiveMovingBoxCarousel._Default" %>

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

</asp:Content>

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

$(document).ready(function () {

$('.carousel').carousel();

});

</script>

<h3>Most Popular Products</h3>

<divclass="carousel-inner">

<asp:Repeater ID="rptObject"runat="server"OnItemDataBound="rptObject_ItemDataBound">

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

</ItemTemplate>

</asp:Repeater>

</div>

</div>

</asp:Content>

VB.NET Code

<%@ PageTitle="Responsive Bootstrap Carousel in Repeater Asp.net" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="ResponsiveMovingBoxCarousel._Default" %>

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

</asp:Content>

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

$(document).ready(function () {

$('.carousel').carousel();

});

</script>

<h3>Most Popular Products</h3>

<divclass="carousel-inner">

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

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

</ItemTemplate>

</asp:Repeater>

</div>

</div>

</asp:Content>

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

C# Code

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

using Microsoft.VisualBasic;

using System;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using System.IO;

using System.Diagnostics;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace ResponsiveMovingBoxCarousel

{

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

{

#region"Private Members"

private intItemActive = 1;

private intItemPerSlide = 4;

private int Slide = 1;

#endregion

#region"Bind Data"

private voidBindData()

{

DataTable objBind = newDataTable();

objBind.Columns.Add("CarouselName", typeof(string));

objBind.Columns.Add("URL", typeof(string));

objBind.Columns.Add("Price", typeof(string));

objBind.Rows.Add("EEC Electric Scooters", "Images/EEC Electric Scooters.jpg", "");

objBind.Rows.Add("3HP Commercial Treadmills", "Images/3HP Commercial Treadmills.jpg", "");

objBind.Rows.Add("Soccer Balls", "Images/Soccer Balls.jpg", "");

objBind.Rows.Add("Mountain Bikes", "Images/Mountain Bikes.jpg", "");

objBind.Rows.Add("Swing Scooters", "Images/Swing Scooters.jpg", "");

objBind.Rows.Add("Plush Promotional Teddy Bears", "Images/Plush Promotional Teddy Bears.jpg", "");

objBind.Rows.Add("New Impetus Mini Cars", "Images/New Impetus Mini Cars.jpg", "");

objBind.Rows.Add("RC Kid Toys", "Images/RC Kid Toys.jpg", "");

rptObject.DataSource = objBind;

rptObject.DataBind();

}

#endregion

#region"Repeater Methods"

protected voidrptObject_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgse)

{

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

{

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

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

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

string sCarousel = "";

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

if (ItemActive <= ItemPerSlide)

{

if (ItemActive == 1)

{

sCarousel += "<div class=\"item active\">";

sCarousel += "<ul class=\"thumbnails\">";

}

sCarousel += "<li class=\"span3\">";

sCarousel += "<div class=\"thumbnail\">";

sCarousel += "<img width=\"200px\" height=\"200px\" src=\"" + Page.ResolveUrl(URL) + "\" alt=\"\" />";

sCarousel += "</div>";

sCarousel += "<p>" + CarouselName + "<br />";

sCarousel += "<small class=\"red\">" + Price + "</small><br /></p>";

sCarousel += "</li>";

if(ItemActive == ItemPerSlide)

{

sCarousel += "</ul>";

sCarousel += "</div>";

}

else

{

if (ItemActive == (ItemPerSlide * Slide) + 1)

{

sCarousel += "<div class=\"item\">";

sCarousel += "<ul class=\"thumbnails\">";

Slide += 1;

}

sCarousel += "<li class=\"span3\">";

sCarousel += "<div class=\"thumbnail\">";

sCarousel += "<img width=\"200px\" height=\"200px\" src=\"" + Page.ResolveUrl(URL) + "\" alt=\"\" />";

sCarousel += "</div>";

sCarousel += "<p>" + CarouselName + "<br />";

sCarousel += "<small class=\"red\">" + Price + "</small><br /></p>";

sCarousel += "</li>";

if (ItemActive == (ItemPerSlide * Slide))

{

sCarousel += "</ul>";

sCarousel += "</div>";

}

ItemActive += 1;

ltCarousel.Text = sCarousel;

}

#endregion

#region"Event Handles"

protected voidPage_Load(object sender, System.EventArgs e)

{

try

{

if (!IsPostBack)

{

BindData();

}

catch

{

}

#endregion

}

VB.NET Code

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

Imports System.IO

Namespace ResponsiveMovingBoxCarousel

Public Class _Default

Inherits System.Web.UI.Page

#Region "Private Members"

Private ItemActive AsInteger = 1

Private ItemPerSlide AsInteger = 4

Private Slide As Integer = 1

#End Region

#Region "Bind Data"

Private SubBindData()

Dim objBind As New DataTable

With objBind.Columns

.Add("CarouselName", GetType(String))

.Add("URL", GetType(String))

.Add("Price", GetType(String))

End With

objBind.Rows.Add("EEC Electric Scooters", "Images/EEC Electric Scooters.jpg", "")

objBind.Rows.Add("3HP Commercial Treadmills", "Images/3HP Commercial Treadmills.jpg", "")

objBind.Rows.Add("Soccer Balls", "Images/Soccer Balls.jpg", "")

objBind.Rows.Add("Mountain Bikes", "Images/Mountain Bikes.jpg", "")

objBind.Rows.Add("Swing Scooters", "Images/Swing Scooters.jpg", "")

objBind.Rows.Add("Plush Promotional Teddy Bears", "Images/Plush Promotional Teddy Bears.jpg", "")

objBind.Rows.Add("New Impetus Mini Cars", "Images/New Impetus Mini Cars.jpg", "")

objBind.Rows.Add("RC Kid Toys", "Images/RC Kid Toys.jpg", "")

TotalSlide = objBind.Rows.Count

rptObject.DataSource = objBind

rptObject.DataBind()

End Sub

#End Region

#Region "Repeater Methods"

Private SubrptObject_ItemDataBound(ByVal sender As Object, ByVal e AsSystem.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptObject.ItemDataBound

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

DimCarouselName As String= DataBinder.Eval(e.Item.DataItem, "CarouselName")

Dim URL AsString = DataBinder.Eval(e.Item.DataItem, "URL")

Dim Price AsString = DataBinder.Eval(e.Item.DataItem, "Price")

Dim sCarousel AsString = ""

Dim ltCarousel AsLiteral = DirectCast(e.Item.FindControl("ltCarousel"), Literal)

If ItemActive <= ItemPerSlide Then

If ItemActive = 1 Then

sCarousel &= "<div class=""item active"">"

sCarousel &= "<ul class=""thumbnails"">"

End If

sCarousel &= "<li class=""span3"">"

sCarousel &= "<div class=""thumbnail"">"

sCarousel &= "<img width=""200px"" height=""200px"" src=""" & Page.ResolveUrl(URL) & """ alt="""" />"

sCarousel &= "</div>"

sCarousel &= "<p>"& CarouselName & "<br />"

sCarousel &= "<small class=""red"">" & Price & "</small><br /></p>"

sCarousel &= "</li>"

If ItemActive = ItemPerSlide Then

sCarousel &= "</ul>"

sCarousel &= "</div>"

End If

Else

If ItemActive = (ItemPerSlide * Slide) + 1 Then

sCarousel &= "<div class=""item"">"

sCarousel &= "<ul class=""thumbnails"">"

Slide += 1

End If

sCarousel &= "<li class=""span3"">"

sCarousel &= "<div class=""thumbnail"">"

sCarousel &= "<img width=""200px"" height=""200px"" src="""& Page.ResolveUrl(URL) & """ alt="""" />"

sCarousel &= "</div>"

sCarousel &= "<p>"& CarouselName & "<br />"

sCarousel &= "<small class=""red"">" & Price & "</small><br /></p>"

sCarousel &= "</li>"

If ItemActive = (ItemPerSlide * Slide) Then

sCarousel &= "</ul>"

sCarousel &= "</div>"

End If

ItemActive += 1

ltCarousel.Text = sCarousel

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

BindData()

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

Sử dụng Repeater để tạo Responsive Bootstrap Carousel trong Asp.net

0 comments Blogger 0 Facebook

Post a Comment

Popular Posts

Sử dụng Repeater để tạo Responsive Bootstrap Carousel trong Asp.net

Next

Newer Post

Previous

Older Post

0 comments Blogger 0 Facebook

Post a Comment