In this article we shall learn How to create a slide show images from the database in 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">
</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!