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

By Unknown - Friday, August 28, 2015 - No Comments

(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:ContentPlaceHolder ID="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

<%@ Page Title="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>

<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

<%@ Page Title="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>

<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 int ItemActive = 1;

private int ItemPerSlide = 4;

private int Slide = 1;

#endregion

#region "Bind Data"

private void BindData()

{

DataTable objBind = new DataTable();

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 void rptObject_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)

{

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 void Page_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 As Integer = 1

Private ItemPerSlide As Integer = 4

Private Slide As Integer = 1

#End Region

#Region "Bind Data"

Private Sub BindData()

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 Sub rptObject_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptObject.ItemDataBound

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

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

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

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

Dim sCarousel As String = ""

Dim ltCarousel As Literal = 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 Sub Page_Load(ByVal sender As Object, 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

News Ticker