How to slideshow images from database using ASP.Net

Vforvijay
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 40065 red flag
Rating: 3 out of 5  
 1 vote(s)

In this article we shall learn How to create a slide show images from the database in ASP.NET.


 Download source code for 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

Hope you liked this article. Let me know your feedback by responding to this article.

Thanks for reading!

Page copy protected against web site content infringement by Copyscape

About the Author

Vforvijay
Full Name: vijay ganesan
Member Level:
Member Status: Member
Member Since: 1/25/2011 8:42:29 AM
Country: India



Login to vote for this post.

Comments or Responses

Posted by: Jonsey80 on: 12/5/2012 | Points: 25
Hi, I like this article, but it does not work for me, I have a doubt, how the webservice method know from where it have to takes the images or db?

I have a db called cupon, with a table called cupones, and the columns are ImageID, rubro, sub, clave, img (the img column is where the image is storage).

If you can help me to do it work, by the way, is the first time Im using this AJAX tool, so for me is virgin field.

Thanks and have a nice day!
Posted by: Hornstalk on: 5/5/2014 | Points: 25

Login to post response

Comment using Facebook(Author doesn't get notification)