How to slideshow images from database using ASP.Net

Here I used ajax slide show, This control you can get from the ajax control dll file. Ajax control toolkit separated file download, you can install the dll file in vb controls.

Here I explain the simple method to show slide show with your images on your Database. Drag and Drop the slideshow extender form AJAX toolkit and create image directory in your project and add one upload control, Button for upload the image to database.

Then the client side coding should be like below…

<form id="form1"
runat="server">
    <div>
    <table cellpadding ="0" cellspacing
="0" width="500" align="center" >
    <tr>
    <td height="100" width="25%"></td>
    
    </tr>
    <tr>
    <td width="25%" align="right" >
    Name:
    </td>
    <td width="50%">
        <asp:TextBox ID="TextBox1" runat="server" style="margin-left: 0px"></asp:TextBox>
    </td>
    
    </tr>
    <tr>
    <td align="right">
    Image:
    </td>
    <td>
    <asp:FileUpload ID="FileUpload1" runat="server" />
    </td>
    
    
    </tr>
    <tr>
    <td height="30">
    
    </td>
    
    </tr>
    <tr>
    <td  align="right"   >
            <asp:Button ID="Button1" runat="server" Text="ADD" />
    </td>
    <td>
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </td>
    </tr>
    <tr>
    <td colspan ="2">
        &nbsp;</td>
        
    </tr>
    <tr>
    <td colspan ="2">
          
    
    </td>
    
    </tr>
     <tr>
    <td>
    <table>
    <tr>
    <td>
     <div>
        <div>
             <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
             </asp:ToolkitScriptManager>
             <asp:Image ID="img1" runat="server"
             Height="400px" Width="400px"
             ImageUrl="~/Image/2Desert.jpg" />
        </div>       
        <asp:SlideShowExtender ID="SlideShowExtender1" runat="server"
BehaviorID="SSBehaviorID"
            TargetControlID="img1"
            SlideShowServiceMethod="GetSlides"
            AutoPlay="true"
            ImageDescriptionLabelID="lblDesc"
            NextButtonID="btnNext"
            PreviousButtonID="btnPrev"
            PlayButtonID="btnPlay"
            PlayButtonText="Play"
            StopButtonText="Stop"
            Loop="true" >
        </asp:SlideShowExtender>
       
    </div>
    
    
    </td>
    </tr>
    
    </table>
    
       
    </td>
    </tr>
    <tr>
    <td align="center" >
     <div>
            <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br />
            <asp:Button ID="btnPrev" runat="server" Text="Previous" />
            <asp:Button ID="btnPlay" runat="server" Text="" />
            <asp:Button ID="btnNext" runat="server" Text="Next" />
        </div>
    </td>
    </tr>
    </table>
    </div>
    
       
    </form>

ADD button click event add the below code for upload the selected image.

When click ADD button the selected image is moved to image folder then the image path saved into Database. Then by using the path image is view through slide.

Protected Sub Button1_Click(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles Button1.Click
        Dim
imgext As String
        Dim
imgpath As String
        Dim
fname As String
        con.ConnectionString =
ConfigurationManager.ConnectionStrings("con").ConnectionString
 
        If
FileUpload1.HasFile Then
            imgext =
FileUpload1.FileName.Substring(FileUpload1.FileName.LastIndexOf(".") + 1).ToLower
 
            'Get the
max Sno from the table
            maxid()
            fname = TextBox1.Text
            filename = id +
(FileUpload1.FileName)
            If
(imgext = "jpg" Or imgext = "gif"
Or imgext = "bmp")
Then
                imgpath = "~/image/" + filename
               
FileUpload1.SaveAs(Server.MapPath("~/image/")
+ filename)
                'Label1.Text =
Server.MapPath("~/image/") + filename
            Else
                Label1.Text = "update only jpg,gif and bmp file"
            End
If
            'Insert
image Path into Database
            fselect = "insert
into imgurl values('" & id & "','"
& fname & "','" &
imgpath & "')"
            sqlcmd = New
SqlCommand(fselect, con)
            con.Open()
            sqlcmd.ExecuteNonQuery()
            con.Close()
            Label1.Text = "image Upload Succesfully"
            loadslide()
        End If
    End Sub
    Sub maxid()
        con.ConnectionString =
ConfigurationManager.ConnectionStrings("con").ConnectionString
 
        fselect = "select
isnull(max(Sno)+1,1) as id from imgurl"
        sqlcmd = New
SqlCommand(fselect, con)
        con.Open()
        sqladp = New
SqlDataAdapter(sqlcmd)
        ds = New
DataSet
        sqladp.Fill(ds)
        dt = ds.Tables(0)
        If
dt.Rows.Count > 0 Then
            id = dt.Rows(0).Item("id")
        End If
        con.Close()
    End Sub

When page load its call image form the database and its show images slideshow for the below code

Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles Me.Load
        loadslide()
    End Sub
    Sub
loadslide()
        con.ConnectionString =
ConfigurationManager.ConnectionStrings("con").ConnectionString
        fselect = "select
* from imgurl"
        sqlcmd = New
SqlCommand(fselect, con)
        con.Open()
        sqladp = New
SqlDataAdapter(sqlcmd)
        con.Close()
        dt1.Clear()
        sqladp.Fill(dt1)
    End Sub

Here I added the images url form the database by using datatable.

Slide show require images it has supply from GetSlide method. Add the below pagemethod in your serverside coding.

<System.Web.Services.WebMethod(),
System.Web.Script.Services.ScriptMethod()> _
       Public Shared Function
GetSlides() As AjaxControlToolkit.Slide()
        Dim
imgSlide As AjaxControlToolkit.Slide() = New AjaxControlToolkit.Slide(dt1.Rows.Count - 1) {}
 
        For i As Integer = 0 To dt1.Rows.Count - 1
            Dim
dr As DataRow = dt1.Rows(i)
            imgSlide(i) = New AjaxControlToolkit.Slide(Replace(dr("ImageURL").ToString(), "~/", ""),
"", "")
        Next
        Return
(imgSlide)
    End Function