Hi..In this article we shall learn How to show the slide show images from the database.
Here I used ajax slide show, This control you can get from the ajax control dll file. Ajax control toolkit separate file to download, you can install the dll file in vb controls.
You can get the file in this links http://ajaxcontroltoolkit.codeplex.com/
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)
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
I hope this one hepfull to all
0 comments:
Post a Comment