We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

AJAX Toolkit SlideShowExtender Question

rkulp
rkulp asked
on
Medium Priority
1,377 Views
Last Modified: 2012-05-07
It seems that slides for the slideshowextender are downloaded again if the user navigates to another page and then returns to the slideshow page. Is there a way to download them only once in a session and keep them available should the user return to the slideshow again?
Comment
Watch Question

Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Hi,

Just let me know if you require some example code on how to set up a slideshow without using the extender and loading images into a session object as bytestreams and then reading them back.

/Carl.

Author

Commented:
Thanks for the explanation. I may come back and ask for some AJAX code but want to try on my own first.
Hi,

Since you awarded the points I feel I should provide a more careful / thought out explanation. Please review the attached code snippet as a possible solution. I'll walk you through the critical parts:

1. Two pages make out the solution: SlideShow.aspx and DisplayImage.aspx
2. It facilitates loading images into a session object of Byte() which allows you to read back the Byte() streams and display the image.
3. You need to create a folder called "slideshow" in the root of your application to hold the images.
4. Some key points:

If Session("SlideImages") Is Nothing Then

Determines if the imageas have been loaded into a session object as Byte(). Only needs to be done once, you can then consume this object throughout your web site.

For each image file in the folder we create a Byte() stream and load it into the session object:

For Each fi As FileInfo In di.GetFiles()
    Dim objImg As Byte() = ImageToByteStream(fi)
    slideImages.Add(objImg)
    numImages += 1
Next
Session("SlideImages") = slideImages 'Load the list of byte into Session
Session("numImages") = numImages
Session("CurrentSlideIndex") = 0

We retrieve the bytestreams from session and convert it back to image using:

img.ImageUrl = "~/DisplayImage.aspx?CurrentSlideIndex=" & currentSlideIndex
img.Height = New Unit(350)
phSlideImage.Controls.Add(img)

The code is far from perfect but I put together just to explain the concept. Let me know if you need any further explanations.

/Carl.
SlideShow.aspx:
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="SlideShow.aspx.vb" Inherits="SlideShow" %>
 
<%@ Register Assembly="AjaxControlToolkit, Version=3.0.30512.20315, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
    Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX SlideShow Extender</title>
    <style type="text/css">
        .container  
        {
            border:solid 1px Silver;
            padding: 10px;
            margin-top: 25px;
            font-family: Trebuchet MS;
            font-size: 10pt;
        }
        .header
        {
            font-size: 14pt;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server">
    </asp:ScriptManager>
    <div class="container">
        <div>
            <asp:Label id="lblHeader" runat="server" Text="Slideshow" CssClass="header" /><br />
            <asp:UpdatePanel ID="upImage" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:placeholder ID="phSlideImage" runat="server" >
                    </asp:placeholder>              
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnPrevious" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="btnNext" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
            </asp:UpdatePanel>
            <cc1:UpdatePanelAnimationExtender id="upae1" runat="server" TargetControlID="upImage">
                <Animations>
                    <OnUpdating>
                        <FadeOut Duration="1" Fps="25" />
                    </OnUpdating>
                    <OnUpdated>
                        <FadeIn Duration="1" Fps="25" />
                    </OnUpdated>
                </Animations>
            </cc1:UpdatePanelAnimationExtender>
            <asp:Timer ID="Timer1" runat="server" Interval="5000" enabled="false"/>
        </div>
        <div style="padding-top:5px;padding-bottom:5px;">
            <asp:Button ID="btnPrevious" runat="server" Text="Previous" />
            &nbsp;<asp:Button ID="btnPlay" runat="server" Text="Play" />
            &nbsp;<asp:Button ID="btnStop" runat="server" Text="Stop" />
            &nbsp;<asp:Button ID="btnNext" runat="server" Text="Next" />
        </div>
    </div>
    </form>
</body>
</html>
 
SlideShow.aspx.vb:
 
Imports System.IO
Imports System.Drawing
 
Partial Class SlideShow
    Inherits System.Web.UI.Page
 
    Private slideImages As New List(Of Byte())
    Private numImages As Integer
    Private currentSlideIndex As Integer
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Session("SlideImages") Is Nothing Then 'First visit to the page - images have not been loaded into session
            Dim di As New DirectoryInfo(Server.MapPath("~/slideshow"))
            For Each fi As FileInfo In di.GetFiles()
                Dim objImg As Byte() = ImageToByteStream(fi)
                slideImages.Add(objImg)
                numImages += 1
            Next
            Session("SlideImages") = slideImages 'Load the list of byte into Session
            Session("numImages") = numImages
            Session("CurrentSlideIndex") = 0
        End If
        Dim img As New System.Web.UI.WebControls.Image()
        If Not Page.IsPostBack Then
            currentSlideIndex = 0
            img.ImageUrl = "~/DisplayImage.aspx?CurrentSlideIndex=" & currentSlideIndex
            img.Height = New Unit(350)
            phSlideImage.Controls.Add(img)
        Else
            currentSlideIndex = CType(Session("CurrentSlideIndex"), Integer)
            img.ImageUrl = "~/DisplayImage.aspx?CurrentSlideIndex=" & currentSlideIndex
            img.Height = New Unit(350)
            phSlideImage.Controls.Add(img)
        End If
    End Sub
 
    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        If CInt(Session("CurrentSlideIndex")) < (CInt(Session("numImages")) - 1) Then
            Session("CurrentSlideIndex") = CInt(Session("CurrentSlideIndex")) + 1
        Else
            Session("CurrentSlideIndex") = 0
        End If
    End Sub
 
    Protected Sub btnPlay_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnPlay.Click
        Timer1.Enabled = True
    End Sub
 
    Protected Sub btnStop_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnStop.Click
        Timer1.Enabled = False
    End Sub
 
    Protected Sub btnPrevious_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnPrevious.Click
        If CInt(Session("CurrentSlideIndex")) > 0 Then
            Session("CurrentSlideIndex") = CInt(Session("CurrentSlideIndex")) - 1
        ElseIf CInt(Session("CurrentSlideIndex")) = 0 Then
            Session("CurrentSlideIndex") = (CInt(Session("numImages")) - 1)
        Else
            Session("CurrentSlideIndex") = 0
        End If
    End Sub
 
    Protected Sub btnNext_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnNext.Click
        If CInt(Session("CurrentSlideIndex")) < (CInt(Session("numImages")) - 1) Then
            Session("CurrentSlideIndex") = CInt(Session("CurrentSlideIndex")) + 1
        ElseIf CInt(Session("CurrentSlideIndex")) = 0 Then
            Session("CurrentSlideIndex") = 0
        End If
    End Sub
 
    Private Function ImageToByteStream(ByVal fi As FileInfo) As Byte()
        Dim objImg As Byte()
        Dim fs As New FileStream(fi.FullName, FileMode.Open, FileAccess.Read)
        Dim reader As BinaryReader = New BinaryReader(fs)
        objImg = reader.ReadBytes(CInt(fs.Length))
        fs.Close()
        fs.Dispose()
        Return objImg
    End Function
End Class
 
DisplayImage.aspx:
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DisplayImage.aspx.vb" Inherits="DisplayImage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
 
DisplayImage.aspx.vb:
 
Partial Class DisplayImage
    Inherits System.Web.UI.Page
    Private currentSlideIndex As Integer
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Session("SlideImages") Is Nothing Then
            currentSlideIndex = Request("CurrentSlideIndex")
            Response.ContentType = "image/bmp"
            Response.BinaryWrite(CType(Session("SlideImages")(currentSlideIndex), Byte()))
        End If
    End Sub
 
 
End Class

Open in new window

Author

Commented:
Thank you very much.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.