Solved

How can I use slidecontrol extender with sql image data

Posted on 2012-04-04
18
585 Views
Last Modified: 2012-04-24
I have retreived a few images from a sql table.  I want to be able to add each image in the dataset to a image control, with slideshow extender.  So I want to fill the extender with images from the sql table and show them.  Of course I can retrieve the images from sql, but how do I take those binary files and convert them and add them as images to the image control.

thanks
0
Comment
Question by:mgmhicks
  • 9
  • 9
18 Comments
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
Have you started to work with the SlideShowExtender yet?  Have you configured a web service to get the slides?

SlideShow Demonstration
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/SlideShow/SlideShow.aspx

[System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public AjaxControlToolkit.Slide[] GetSlides() { ... }

Open in new window

0
 

Author Comment

by:mgmhicks
Comment Utility
yes, I have.  So inside the webservice I need to get the data?  What about attaching multiple images to the image control from sql table?
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
This is a great question, because I have only ever used static images for the slide show, as shown in this example:

http://www.asp.net/ajaxlibrary/HOW%20TO%20Use%20the%20SlideShow%20Control.ashx

[System.Web.Services.WebMethod]  
    [System.Web.Script.Services.ScriptMethod]  
    public static AjaxControlToolkit.Slide[] GetImages()  
    {  
        return new AjaxControlToolkit.Slide[] {   
        new AjaxControlToolkit.Slide("images/Blue hills.jpg", "Blue Hills", "Go Blue"),  
        new AjaxControlToolkit.Slide("images/Sunset.jpg", "Sunset", "Setting sun"),  
        new AjaxControlToolkit.Slide("images/Winter.jpg", "Winter", "Wintery..."),  
        new AjaxControlToolkit.Slide("images/Water lilies.jpg", "Water lillies", "Lillies in the water"),  
        new AjaxControlToolkit.Slide("images/VerticalPicture.jpg", "Sedona", "Portrait style picture")};  
    }  

Open in new window

0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
Here is a thought--use an HttpHandler, and modify the Slide constructor to take the .ashx handler as an argument.

Ajax Slide Show - Get Images from Database
http://stackoverflow.com/questions/2506536/ajax-slide-show-get-images-from-database
0
 

Author Comment

by:mgmhicks
Comment Utility
Yea, thats easier, but my images are all in sql table.  Saw something about creating my own hhtp handler.  Also saw this http://aspsnippets.com/Articles/Save-and-Retrieve-Files-from-SQL-Server-Database-using-ASP.Net.aspx

but not sure how to implement to image controls and using slider extender.
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
The SlideShowExtender generates <img> elements in the page, so I am trying to figure out why you would need an Image control?
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
D'oh, that is control for the TargetControlID...
0
 

Author Comment

by:mgmhicks
Comment Utility
ok, here is what I have so far, create the handler and retrieve the files.  Could be up to 3 images returned.

Now upon retrievel how am I assign to slideshow control?


Imports System.Web
Imports System.Web.Services
Imports System.IO
Imports System.Data
Imports System.Data.SqlClient


Public Class GetImages
    Implements System.Web.IHttpHandler
    Private Const myConnStr As String = "SERVER=10.10.10.44,8433;Database=AptGallery;uid=sa;pwd=sh4207"
    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim mID As Integer = 0

        Try

            If IsDBNull(context.Request.QueryString("ID")) Then
                Throw New ArgumentException("No parameter specified")
            Else
                mID = CInt(context.Request.QueryString("ID"))
                Dim ds As New DataSet
                Dim da As New SqlDataAdapter
                Dim myCMD As New SqlCommand
                Dim myCon As New SqlConnection(myConnStr)
                With myCMD
                    .Connection = myCon
                    .CommandType = CommandType.Text
                    .CommandText = "Select * from ReviewPictures where reViewID = " & mID
                End With
                da.SelectCommand = myCMD
                myCon.Open()
                da.Fill(ds)
                myCon.Close()


            End If


        Catch ex As Exception


        End Try


    End Sub

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 500 total points
Comment Utility
You need to generate a URL for the image control that is processed by the HttpHandler, as shown in this example:

http://forums.asp.net/t/1555470.aspx

~/Handlers/ImageHandler.ashx?Mod1119="+Username, "Blue Hills", "Go Blue")

[System.Web.Services.WebMethod] 
    [System.Web.Script.Services.ScriptMethod] 
    

    public static AjaxControlToolkit.Slide[] GetSlides() 
    { 
        string Username = (HttpContext.Current.Request.QueryString["Username"]); 
        return new AjaxControlToolkit.Slide[] 
        { 
        new AjaxControlToolkit.Slide("~/Handlers/ImageHandler.ashx?Mod1119="+Username, "Blue Hills", "Go Blue"),

        new AjaxControlToolkit.Slide("Ximage/2.jpg", "Sunset", "Setting sun"), 
        new AjaxControlToolkit.Slide("XImage/3.jpg", "Winter", "Wintery...") 
        };             
    }

Open in new window


The query string parameters in the URL should match up to the code in the HttpHandler where you use Request.QueryString values.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:mgmhicks
Comment Utility
how do I call the handler from the page i will be getting the id from.  So I have it where on a page a client clicks the picture link, that I have in a grid box, which I then get the ID of the pictures I am looking for.  So now how do I call handler and  do I have to convert  the image data from sql to another format?
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
You need to return an image in the response from the HttpHandler, and then use the URL in the Web Method call to build the Slide array.

The constructor for the Slide object takes arguments as in this example:

AjaxControlToolkit.Slide("images/Blue hills.jpg", "Blue Hills", "Go Blue")

Open in new window


Change the URL to be one that references the HttpHandler, with an .ashx extension. and the query string arguments to get the correct image.
0
 

Author Comment

by:mgmhicks
Comment Utility
ok, but if the ID I'm using returns 3 pictures.   Will the handler return them 1 at a time or all 3 at once.  Do I have to iriderate through them?
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
If you have 3 images with 1 ID, you need 3 Slide objects.  The HttpHandler can only return 1 image at a time.  The key, that I see, would be returning 1 image per each HttpHandler request.  You bind each of the responses, written to the output stream, to a URL.
0
 

Author Comment

by:mgmhicks
Comment Utility
ok, I think we almost have it.  Here is my aspx file, amsx file and the ashx.  It gets to asmx file but doesnt seem to be hitting the ashx file, I have put a break point on it but it doesnt hit it, yet the amsx doesnt error out.  Any Ideas.  Thanks


ASPX file code behind:
Imports System.Data
Imports System.Data.SqlClient
Imports System.IO
Partial Public Class ViewPictures
    Inherits System.Web.UI.Page
    Dim myID As String
    Dim mVendorID As String
    Dim mVendorName As String
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        On Error GoTo Problem

        myID = Request.QueryString("ID")
        mVendorID = Request.QueryString("VendorID")
        mVendorName = Request.QueryString("VendorName")
        Image1_SlideShowExtender.ContextKey = myID

        Exit Sub
Problem:
        Dim test As String = Err.Description


    End Sub
   
End Class

ASPX html

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Companion.master" CodeBehind="ViewPictures.aspx.vb" Inherits="CrystalReportsTest.ViewPictures" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div>
   </div>
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
   <div>
   <p>
       <asp:Image ID="Image1" runat="server" />
       <asp:SlideShowExtender ID="Image1_SlideShowExtender" runat="server"
           Enabled="True" NextButtonID="btnNext" PlayButtonID="btnPlay"
           PlayButtonText="Play" PreviousButtonID="btnPrevious" SlideShowServicePath="SlideShow.asmx"
           StopButtonText="Stop" TargetControlID="Image1"
           SlideShowServiceMethod="GetPhotos">
       </asp:SlideShowExtender>
   </p>
   </div>
   <div>
       <asp:Button ID="btnPlay" runat="server" Text="Play" />
       <asp:Button ID="btnPrevious" runat="server" Text="Previous" />
       <asp:Button ID="btnStop" runat="server" Text="Stop" />
   </div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>


ASMX file

Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports System.Web
Imports System.Data.SqlClient
Imports System.Data.Sql
Imports System.Data
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class SlideShow1
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function GetPhotos(ByVal contextKey As String) As AjaxControlToolkit.Slide()
        Dim photoReader As SqlDataReader
        Dim conn As SqlConnection = New SqlConnection
        Dim cmd As SqlCommand = New SqlCommand

        Try
            conn.ConnectionString = ConfigurationManager.ConnectionStrings("AptGallery").ConnectionString
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Connection = conn
            cmd.CommandText = "MGM_GetPictureIDs"
            cmd.Parameters.Add("@ReviewID", SqlDbType.Int)
            cmd.Parameters("@ReviewID").Value = contextKey
            conn.Open()
            photoReader = cmd.ExecuteReader()

            Dim slides(24) As AjaxControlToolkit.Slide
            Dim i As Integer = 0
            While photoReader.Read
                slides(i) = New AjaxControlToolkit.Slide("SlideShowHandler.ashx?TypeID=1&PhotoID=" & photoReader("ID"), "test", "test")
                i += 1
            End While
            photoReader.Close()
            conn.Close()

            i -= 1
            ReDim Preserve slides(i)

            Return slides
        Catch ex As Exception
            Dim test As String = ex.Message

        End Try

    End Function


End Class

ASHX File

Imports System.Web
Imports System.Web.Services
Imports System.IO
Imports System.Data
Imports System.Data.SqlClient


Public Class GetImages
    Implements System.Web.IHttpHandler
    Private Const myConnStr As String = "SERVER=xx.xx.xx.xx,8433;Database=AptGallery;uid=sa;pwd=xxxxx"
    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim sdsPhoto As SqlDataSource = New SqlDataSource
        sdsPhoto.ConnectionString = ConfigurationManager.ConnectionStrings("AptGallery").ConnectionString
        sdsPhoto.SelectCommand = "MGM_GetPhotos"
        sdsPhoto.SelectCommandType = SqlDataSourceCommandType.StoredProcedure
        sdsPhoto.SelectParameters.Add("@ID", context.Request.QueryString("PhotoID"))
        Dim dv As DataView = sdsPhoto.Select(DataSourceSelectArguments.Empty)
        Dim dr As DataRow
        Try
            dr = dv.Table.Rows(0)
        Catch
            context.Response.Write("No Image Found")
            Exit Sub
        End Try
        Dim arrImage() As Byte = CType(dr("Image1"), Byte())
        context.Response.BinaryWrite(arrImage)

    End Sub

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
Did you register the HttpHandler in the web.config?  

How to: Register HTTP Handlers
http://msdn.microsoft.com/en-us/library/46c5ddfy.aspx
0
 

Author Comment

by:mgmhicks
Comment Utility
this is the line I entered, and I am getting errors.  Probably not using correct syntax.  Can you help?

<add verb="*" path="SlideShowHandler.ashx" type="SlideShowHandler, SlideShowHandlerAssembly"/>

so close!!
0
 

Author Comment

by:mgmhicks
Comment Utility
Keep getting could load type SlideShowHandler
0
 

Author Comment

by:mgmhicks
Comment Utility
this is what I changed it to, and I still get can not load type SlideShowHandler.

<add verb="*" path ="/maintenance/ViewPictures.aspx" type="SlideShowHandler"/>
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now