(Dynamic Bootstrap Responsive Carousel with Multi items in ASP.Net) – Bài viết dưới đây sẽ hướng dẫn các bạn cách để tạo Carousel ảnh sử dụng thư viện Bootstrap.

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 file bootstrap-combined.min.css và Copy vào thư mục Styles

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

<title>Responsive Bootstrap Carousel with Multi items in ASP.Net</title>

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

</asp:ContentPlaceHolder>

</head>

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

C# Code

<%@ PageTitle="Responsive Bootstrap Carousel with Multi items in ASP.Net" Language="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="BootstrapCarouselMultiItems._Default"%>

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

</asp:Content>

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

<asp:ScriptManager ID="ScriptManager1"runat="server">

</asp:ScriptManager>

<h3>Responsive Bootstrap Carousel with Multi items in ASP.Net</h3>

</div>

<divid="myCarousel2"class="carousel slide">

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

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

</ItemTemplate>

</asp:Repeater>

</div>

</div>

</asp:Content>

VB.NET Code

<%@ PageTitle="Responsive Bootstrap Carousel with Multi items in ASP.Net" Language="vb"MasterPageFile="~/Site.Master"AutoEventWireup="false"CodeBehind="Default.aspx.vb"Inherits="BootstrapCarouselMultiItems._Default"%>

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

</asp:Content>

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

<asp:ScriptManager ID="ScriptManager1"runat="server">

</asp:ScriptManager>

<h3>Responsive Bootstrap Carousel with Multi items in ASP.Net</h3>

</div>

<divid="myCarousel2"class="carousel slide">

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

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

</ItemTemplate>

</asp:Repeater>

</div>

</div>

</asp:Content>

- B5: 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.Diagnostics;

using System.IO;

using System.Web.UI.WebControls;

using System.Web.UI;

namespace BootstrapCarouselMultiItems

{

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

{

#region"Private Members"

private intItemActive = 1;

private intItemPerSlide = 4;

private int Slide = 1;

private intTotalSlide = 0;

#endregion

#region"Bind Data"

private voidBindData()

{

DataTable objBind = newDataTable();

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

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

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

objBind.Rows.Add("Product name 1", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 2", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 3", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 4", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 5", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 6", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 7", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 8", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 9", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

objBind.Rows.Add("Product name 10", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "");

TotalSlide = objBind.Rows.Count;

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 ImageName = DataBinder.Eval(e.Item.DataItem, "ImageName").ToString();

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

string sCarousel = "";

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

if(ItemActive <= ItemPerSlide)

{

if (ItemActive == 1)

{

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

sCarousel += "<div class=\"row text-center\">";

}

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

sCarousel += "<div class=\"thumbnail product-item\">";

sCarousel += "<a href=\"#\"><img width=\"130px\" src=\""+ Page.ResolveUrl(ImageName) + "\" alt=\"\" /></a>";

sCarousel += "</div>";

sCarousel += "<h4>" + CarouselName + "</h4>";

sCarousel += "<p><a class=\"btn btn-large btn-block\" href=\"" + URL + "\">View details »</a></p>\t";

sCarousel += "</div>";

if (ItemActive == ItemPerSlide)

{

sCarousel += "</div>";

sCarousel += "</div> ";

}

else

{

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

{

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

sCarousel += "<div class=\"row text-center\">";

Slide += 1;

}

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

sCarousel += "<div class=\"thumbnail product-item\">";

sCarousel += "<a href=\"#\"><img width=\"130px\" src=\""+ Page.ResolveUrl(ImageName) + "\" alt=\"\" /></a>";

sCarousel += "</div>";

sCarousel += "<h4>" + CarouselName + "</h4>";

sCarousel += "<p><a class=\"btn btn-large btn-block\" href=\"" + URL + "\">View details »</a></p>\t";

sCarousel += "</div>";

if ((ItemActive == (ItemPerSlide * Slide)) | TotalSlide == ItemActive)

{

sCarousel += "</div>";

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 BootstrapCarouselMultiItems

Public Class _Default

Inherits System.Web.UI.Page

#Region "Private Members"

Private ItemActive AsInteger = 1

Private ItemPerSlide AsInteger = 4

Private Slide As Integer = 1

Private TotalSlide AsInteger = 0

#End Region

#Region "Bind Data"

Private SubBindData()

Dim objBind As New DataTable

With objBind.Columns

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

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

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

End With

objBind.Rows.Add("Product name 1", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 2", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 3", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 4", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 5", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 6", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 7", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 8", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 9", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

objBind.Rows.Add("Product name 10", "http://www.sitediscount.ru/flatscroller/images/flatphone.png", "")

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

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

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

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

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"">" & vbCrLf

sCarousel &= "<div class=""row text-center"">" & vbCrLf

End If

sCarousel &= "<div class=""span3"">" & vbCrLf

sCarousel &= "<div class=""thumbnail product-item"">" & vbCrLf

sCarousel &= "<a href=""#""><img width=""130px"" src=""" & Page.ResolveUrl(ImageName) & """ alt="""" /></a>" & vbCrLf

sCarousel &= "</div>"& vbCrLf

sCarousel &= "<h4>"& CarouselName & "</h4>"& vbCrLf

sCarousel &= "<p><a class=""btn btn-large btn-block"" href="""& URL & """>View details »</a></p> " & vbCrLf

sCarousel &= "</div>"& vbCrLf

If ItemActive = ItemPerSlide Then

sCarousel &= "</div>" & vbCrLf

sCarousel &= "</div> "& vbCrLf

End If

Else

If ItemActive = (ItemPerSlide * Slide) + 1 Then

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

sCarousel &= "<div class=""row text-center"">" & vbCrLf

Slide += 1

End If

sCarousel &= "<div class=""span3"">" & vbCrLf

sCarousel &= "<div class=""thumbnail product-item"">" & vbCrLf

sCarousel &= "<a href=""#""><img width=""130px"" src=""" & Page.ResolveUrl(ImageName) & """ alt="""" /></a>" & vbCrLf

sCarousel &= "</div>"& vbCrLf

sCarousel &= "<h4>"& CarouselName & "</h4>"& vbCrLf

sCarousel &= "<p><a class=""btn btn-large btn-block"" href="""& URL & """>View details »</a></p> " & vbCrLf

sCarousel &= "</div>"& vbCrLf

If (ItemActive = (ItemPerSlide * Slide)) Or TotalSlide = ItemActive Then

sCarousel &= "</div>" & vbCrLf

sCarousel &= "</div> "& vbCrLf

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

Bootstrap Responsive Carousel with Multi items in ASP.Net

0 comments Blogger 0 Facebook

Post a Comment

Popular Posts

Bootstrap Responsive Carousel with Multi items in ASP.Net

Next

Newer Post

Previous

Older Post

0 comments Blogger 0 Facebook

Post a Comment