SLIDESHOW USING DATALIST IN ASP.NET

Unknown
In this section, we are discussing how to do Slideshow in ASP.NET using DataList Control in Disconnected Feature. For this you have to follow below steps:

Step-1:

Now create the one sample application "slideshow" as:

  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
  2. "File" - "New Project" - "C#" - "Empty Web Application" (to avoid adding a master page).
  3. Provide the web site a name such as  "slideshow" or another as you wish and specify the location.
  4. Then right-click on Solution Explorer - "Add New Item" - "WebForm1.aspx page".
  5. Drag and drop one datalist on the <form> section of the WebForm1.aspx page.

Step-2:

Then add SQL Server Database. Then this database will save in "App_Data". And this database name is "Database1.mdf".

asp.net, datalist, slide show, slide show in asp.net, slideshow using datalist,image gallery, image slideshow, slideshow using backend data, slideshow using sql server database table, datalist in asp.net, multiple image slideshow,asp net, image slideshow in asp.net, image slideshow using datalist in asp.net, how to do slideshow in asp.net, image slideshow using datalist in asp.net, how to do slideshow in c#, c#

Step-3:

Now Open Server Explorer and create new table  "dbo.Table_img"  in your database. E.G.:

CREATE TABLE [dbo].[Table_img]
(
 [Id] INT NOT NULL PRIMARY KEY IDENTITY,
    [image] VARCHAR(MAX) NULL
)

Step-4:

Write Below Code in "WebForm1.aspx" Design Page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style>
.homeimg
{
     padding-right: 0;
     padding-left: 0;
}
.img
{
    Width: 100%;
    Height: 300px;
    border-radius:14px;
    border-radius:13px;
}
.btnprev
{
   width: 4%;
   height: 70px;
   border-radius:50%;
   background-color: rgba(17, 9, 9, 0.54);
   font-family: Arial;
   font-size: 30px;
   font-weight: bolder;
   color: white;
   position:absolute;
   visibility:hidden;
   float:left;
   margin-top:-240px;
   left:0px;
   overflow: visible;

}
.btn, .btn:visited
{
    color:blueviolet;
    text-align: center;
    background-color:wheat;
    height:30px;
    width:20%;
    border:solid;
    border-width:medium;
    border-color:black;
}
    .btn:hover
    {
        color: darkmagenta;
        background-color: lightgray;
    }
.slide
{
    width: 100%;
}
.slide:hover .btnprev
{
    visibility: visible;
}
.slide:hover .btnnext
{
    visibility: visible;
}
.btnnext
{
    visibility:hidden;
    width: 4%;
    height:70px;
    border-radius:50%;
    background-color: rgba(17, 9, 9, 0.54);
    font-family: Arial;
    font-size: 30px;
    font-weight: bolder;
    color:white;
    right:0px;
    float:right;
    position:absolute;
    margin-top:-240px;
    overflow: visible;
}

</style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="homeimg">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
          <asp:Timer runat="server" Interval="10000" ID="SlideShowTimer" OnTick="SlideShowTimer_Tick" />
           <br />
       <asp:Panel ID="Panel2" runat="server" Height="300px" CssClass="slide">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DataList ID="DataList1" runat="server" RepeatColumns="1" CssClass="datal" Width="100%">
                      <ItemTemplate>
                          <asp:ImageButton  ID="Image1" runat="server" Height="300px" Width="100%" ImageUrl='<%# Bind("image") %>' />
                            </ItemTemplate>
                     </asp:DataList>
            </ContentTemplate>
            <Triggers>
                   <asp:AsyncPostBackTrigger ControlID="SlideShowTimer" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
           <asp:Button ID="previous" OnClick="previous_Click" runat="server" CssClass="btnprev" Text="<" />
                <asp:Button ID="next" OnClick="next_Click" runat="server" CssClass="btnnext" Text=">" />
       </asp:Panel>
       <ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanel1_AnimationExtender" runat="server" BehaviorID="animation" Enabled="True" TargetControlID="UpdatePanel1">
       <Animations>
           <OnUpdating>
           <%-- It should take 1/2 of a second to fade out --%>
           <FadeOut Duration=".5" Fps="20" minimumOpacity=".1" />
       </OnUpdating>
       <OnUpdated>
           <%-- It should take 1 and 1/2 of a second to fade back in --%>
           <FadeIn Duration="1.5" Fps="20" minimumOpacity=".1" />
       </OnUpdated>
       </Animations>
       </ajaxToolkit:UpdatePanelAnimationExtender>
    </div>
    </form>
</body>
</html>

Step-5:

Write Below Code in "WebForm1.aspx.cs" Page:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Configuration;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace slideshow
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        SqlConnection cn = new SqlConnection(WebConfigurationManager.ConnectionStrings["CONN"].ToString());
        SqlDataAdapter da;
        PagedDataSource adsource;
        int pos, pos1;
        DataTable dt = new DataTable();
        protected void Page_Load(object sender, EventArgs e)
        {
                if (!IsPostBack)
                {
                  
                    this.ViewState["vs1"] = 0;
                    this.ViewState["vs"] = 0;

                    pos = (int)this.ViewState["vs"];
                    pos1 = pos = (int)this.ViewState["vs1"];
                    databind();
                }
          
        }
        protected void SlideShowTimer_Tick(object sender, EventArgs e)
        {
            DateTime later = DateTime.Now.AddSeconds(1);
            while (DateTime.Now < later)
            {

            }
            pos = (int)this.ViewState["vs"];
            pos += 1;
            if (pos == 5)
            {
                pos = 0;
            }
            this.ViewState["vs"] = pos;

            databind();
        }
        protected void previous_Click(object sender, EventArgs e)
        {
        
            pos = (int)this.ViewState["vs"];
            pos -= 1;

            this.ViewState["vs"] = pos;
            databind();
          
        }

        protected void next_Click(object sender, EventArgs e)
        {
        
            pos = (int)this.ViewState["vs"];
            pos += 1;
            this.ViewState["vs"] = pos;
            databind();
        }
        public void databind()
        {
            da = new SqlDataAdapter("select * from Table_img", cn);
            dt = new DataTable();
            da.Fill(dt);
            adsource = new PagedDataSource();
            adsource.DataSource = dt.DefaultView;
            adsource.PageSize = 1;
            adsource.AllowPaging = true;
            adsource.CurrentPageIndex = pos;
            previous.Enabled = !adsource.IsFirstPage;
            next.Enabled = !adsource.IsLastPage;
            DataList1.DataSource = adsource;
            DataList1.DataBind();
        }
    }
}

Output:

asp.net, datalist, slide show, slide show in asp.net, slideshow using datalist,image gallery, image slideshow, slideshow using backend data, slideshow using sql server database table, datalist in asp.net, multiple image slideshow,asp net, image slideshow in asp.net, image slideshow using datalist in asp.net, how to do slideshow in asp.net, image slideshow using datalist in asp.net, how to do slideshow in c#, c#

Tags
Reactions

Post a Comment

1 Comments

  1. Unknown2 February 2017 at 01:49

    Very Good Article.............Keep Going and Posting.

    ReplyDelete