News Ticker

Menu
» » Bootstrap Responsive Carousel with Multi items in ASP.Net

Bootstrap Responsive Carousel with Multi items in ASP.Net

By Unknown - Wednesday, September 16, 2015 - No Comments
(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.

Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET



- 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
<head id="Head1" runat="server">
    <title>Responsive Bootstrap Carousel with Multi items in ASP.Net</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="Styles/bootstrap-combined.min.css" rel="stylesheet" />
    <link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" media="all" />
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
    <script data-cfasync="false" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script data-cfasync="false" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script data-cfasync="false" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

- B4: Mở file Default.aspx dưới dạng HTML và  nhập mã HTML
C# Code
<%@ Page Title="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>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>Responsive Bootstrap Carousel with Multi items in ASP.Net</h3>
        </div>
        <div class="panel-body">
            <div class="container">
                <div id="myCarousel2" class="carousel slide">
                      <!-- Carousel items -->
                      <div class="carousel-inner">
                          <asp:Repeater ID="rptObject" OnItemDataBound="rptObject_ItemDataBound" runat="server">
                            <ItemTemplate>
                                <asp:Literal ID="ltCarousel" runat="server"></asp:Literal>
                            </ItemTemplate>
                          </asp:Repeater> 
                    </div><!-- /INNER--> 
                       <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="icon-chevron-left"></i></a>
                    <a class="carousel-control right" href="#myCarousel2" data-slide="next"><i class="icon-chevron-right"></i></a>     
                </div>
            </div>
        </div>
    </div>
</asp:Content>
VB.NET Code
<%@ Page Title="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>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>Responsive Bootstrap Carousel with Multi items in ASP.Net</h3>
        </div>
        <div class="panel-body">
            <div class="container">
                <div id="myCarousel2" class="carousel slide">
                      <!-- Carousel items -->
                      <div class="carousel-inner">
                          <asp:Repeater ID="rptObject" runat="server">
                            <ItemTemplate>
                                <asp:Literal ID="ltCarousel" runat="server"></asp:Literal>
                            </ItemTemplate>
                          </asp:Repeater> 
                    </div><!-- /INNER--> 
                       <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="icon-chevron-left"></i></a>
                    <a class="carousel-control right" href="#myCarousel2" data-slide="next"><i class="icon-chevron-right"></i></a>     
                </div>
            </div>
        </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 int ItemActive = 1;
        private int ItemPerSlide = 4;
        private int Slide = 1;
        private int TotalSlide = 0;

        #endregion

        #region "Bind Data"

        private void BindData()
        {
            DataTable objBind = new DataTable();
            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 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 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><!-- /Slide1 --> ";
                    }
                }
                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><!-- /Slide --> ";
                    }
                }
                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 BootstrapCarouselMultiItems

    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
        Private TotalSlide As Integer = 0

#End Region

#Region "Bind Data"

        Private Sub BindData()
            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 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 ImageName As String = DataBinder.Eval(e.Item.DataItem, "ImageName")
                Dim URL As String = DataBinder.Eval(e.Item.DataItem, "URL")
                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"">" & 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><!-- /Slide1 --> " & 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><!-- /Slide --> " & vbCrLf
                    End If
                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

Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET



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

Quang Bình

Share This:

Post Tags:

Mỗi bài viết đều là công sức và thời gian của tác giả ví vậy tác giả chỉ có một mong muốn duy nhất nếu ai đó có Copy thì xin hãy ghi rõ nguồn và thông tin tác giả ở cuối mỗi bài viết.
Xin cảm ơn!

Posted by Unknown at 12:30 AM
Labels: ,

No Comment to " Bootstrap Responsive Carousel with Multi items in ASP.Net "

Subscribe to: Post Comments ( Atom )
  • To add an Emoticons Show Icons
    •
  • To add code Use [pre]code here[/pre]
  • To add an Image Use [img]IMAGE-URL-HERE[/img]
  • To add Youtube video just paste a video link like http://www.youtube.com/watch?v=0x_gnfpL3RM
Privacy | Contact
Mọi hành động sử dụng nội dung đăng tải tại địa chỉ www.laptrinhdotnet.com phải có sự đồng ý của tác giả.