How to Apply Bootstrap Carousel which populates data from database using Bootstrap Carousel plugin in ASP.Net

Last Reply on Feb 07, 2017 10:04 AM By AnandM

Posted on Feb 07, 2017 03:12 AM

in this below code i can bind to text to database 

message fatch on database and show the message

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .carousel-inner
        {
            width: auto;
            height: 200px;
            max-height: 200px !important;
        }
        .carousel-content
        {
            color: black;
            display: flex;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.carousel').carousel({
                interval: 1000
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000"
            data-pause="hover">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <div class="carousel-content">
                        <div style="margin: 0 auto">
                            <h3>
                                #1</h3>
                            <p>
                                The first Message.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div style="margin: 0 auto">
                            <h3>
                                #2</h3>
                            <p>
                                The 2nd Message.</p>
                        </div>
                    </div>
                </div>
            </div>           
            <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>
    </form>
</body>
</html>

 

Posted on Feb 07, 2017 10:04 AM

Hi

I have created a sample which full fill your requriement you need to modify it according to you need.

SQL

CREATE TABLE [Locations]
(
	[Name] [varchar](50) NOT NULL,	
	[Description] [varchar](300) NULL
) 
INSERT [Locations] ([Name], [Description]) VALUES (N'Aksa Beach', N'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.')
INSERT [Locations] ([Name], [Description]) VALUES (N'Alibaug',  N'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.')
INSERT [Locations] ([Name], [Description]) VALUES (N'Juhu Beach', N'Juhu Beach is one of favorite tourist attractions situated in Mumbai.')
INSERT [Locations] ([Name], [Description]) VALUES (N'Mumbai',N'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.')
INSERT [Locations] ([Name], [Description]) VALUES (N'Pune',N'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.')

HTML

<div>
    <div id="myCarousel" align="center" class="carousel slide" data-ride="carousel" data-pause="hover">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <!-- Indicators -->
            <asp:Repeater ID="rptCarousel" runat="server">
                <ItemTemplate>
                    <!-- Wrapper for slides -->
                    <div class="item">
                        <div class="carousel-content">
                            <div style="margin: 0 auto">
                                <h3>
                                    <asp:Label Text='<%# Eval("Name") %>' runat="server" />
                                </h3>
                                <p>
                                    <asp:Label ID="Label1" Text='<%# Eval("Description") %>' runat="server" /></p>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <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>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .carousel
            {
                width: 450px;
                height: 200px;
                max-height: 200px !important;
            }
            .carousel-content
            {
                color: black;
                display: flex;
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.carousel').carousel({
                    interval: 1000
                });

                $('.item')[0].className = "item active";
            });
        </script>
    </div>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindRepeater();
    }
}

private void BindRepeater()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT [Name] ,[Description] FROM [Locations]";
            cmd.Connection = con;
            con.Open();
            rptCarousel.DataSource = cmd.ExecuteReader();
            rptCarousel.DataBind();
            con.Close();
        }
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs)
	If Not IsPostBack Then
		BindRepeater()
	End If
End Sub

Private Sub BindRepeater()
	Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
	Using con As New SqlConnection(constr)
		Using cmd As New SqlCommand()
			cmd.CommandText = "SELECT [Name] ,[Description] FROM [Locations]"
			cmd.Connection = con
			con.Open()
			rptCarousel.DataSource = cmd.ExecuteReader()
			rptCarousel.DataBind()
			con.Close()
		End Using
	End Using
End Sub

ScreenShot