Implement Carousel in ASP.Net DataList with Database using C# and VB.Net

Hi PayalShah,

After investigation I found that it will not work with DataList as this plugin only works with Unorderedlist <ul> and DataList cannot render it properly. So you will have to use Repeater.

Please refer below sample.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript" src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script type="text/javascript">
        $(function () {
            $('#myCarousel').carousel();
        });
    </script>
    <style type="text/css">
        .carousel-indicators li {
            text-indent: 0 !important;
            height: 25px !important;
            width: 25px !important;
            line-height: 25px !important;
            border-radius: 25px !important;
            background-color: #d1d1d1;
            color: #444;
            text-align: center;
        }

            .carousel-indicators li.active {
                background-color: #fff;
            }
    </style>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <asp:Repeater ID="rptMain" runat="server" OnItemDataBound="OnItemDataBound">
            <ItemTemplate>
                <ol class="carousel-indicators">
                    <asp:Repeater ID="rptIndicators" runat="server">
                        <ItemTemplate>
                            <li data-target="#myCarousel" data-slide-to='<%# Container.ItemIndex%>' class='<%# Container.ItemIndex == 0 ? "active" : "" %>'>
                                <%#Eval("Name")%>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ol>
                <div class="carousel-inner text-center" role="listbox">
                    <asp:Repeater ID="rptSlides" runat="server">
                        <ItemTemplate>
                            <div class='<%# Container.ItemIndex == 0 ? "item active" : "item" %>'>
                                <asp:Label Text='<%# Eval("Name") %>' runat="server" Font-Bold="true" Font-Size="Large" />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </ItemTemplate>
        </asp:Repeater>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span> </a><a class="right carousel-control" href="#myCarousel" role="button"
                data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span> </a>
    </div>
</div>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add();
        dummy.Rows.Add();
        rptMain.DataSource = dummy;
        rptMain.DataBind();
    }
}

protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        Repeater rptIndicators = e.Item.FindControl("rptIndicators") as Repeater;
        Repeater rptSlides = e.Item.FindControl("rptSlides") as Repeater;
        rptIndicators.DataSource = GetData();
        rptIndicators.DataBind();
        rptSlides.DataSource = GetData();
        rptSlides.DataBind();
    }
}

private DataTable GetData()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Name FROM Customers", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable() ;
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dummy As DataTable = New DataTable()
        dummy.Columns.Add()
        dummy.Rows.Add()
        rptMain.DataSource = dummy
        rptMain.DataBind()
    End If
End Sub

Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim rptIndicators As Repeater = TryCast(e.Item.FindControl("rptIndicators"), Repeater)
        Dim rptSlides As Repeater = TryCast(e.Item.FindControl("rptSlides"), Repeater)
        rptIndicators.DataSource = GetData()
        rptIndicators.DataBind()
        rptSlides.DataSource = GetData()
        rptSlides.DataBind()
    End If
End Sub

Private Function GetData() As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT Name FROM Customers", con)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim dt As DataTable = New DataTable()
                If True Then
                    sda.Fill(dt)
                    Return dt
                End If
            End Using
        End Using
    End Using
End Function

Screenshot