Click here to Skip to main content
15,559,167 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi guys ,

how to retrieve images from database to Ajax ToolKit slideshow extender
i use the code below to display images in slide show

the code working fine but,
Instead of these static images which exist in webservice method , i need to get my images from data base ..

Note :i using c# with asp.net ,..the images type in database is nvarchar(50)

All the below code in one page [default.aspx]


XML
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
[System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]


    /*the method below which contain the images ...
    .........i need to get them from database instead the below way */


        public static AjaxControlToolkit.Slide[] GetSlides()
        {
            return new AjaxControlToolkit.Slide[] {
            new AjaxControlToolkit.Slide("images/1.gif", "Blue Hills", "Go Blue"),
            new AjaxControlToolkit.Slide("images/2.jpg", "Water lillies", "Lillies in the water"),
            new AjaxControlToolkit.Slide("images/3.jpg", "Sedona", "Portrait style picture")
            };
        }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ajax Control - Slide Show</title>
    <style>
    /* SlideShow styles */

.slideTitle
{
      font-weight:bold;
      font-size:small;
      font-style:italic;
}

.slideDescription
{
      font-size:small;
      font-weight:bold;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1"   runat="server">
        </asp:ToolkitScriptManager>
      <div style="text-align:center"> <b>
            SlideShow Demonstration</b><br /><br /></div>
                  <div style="text-align:center">
            <asp:Label runat="Server" ID="imageTitle" CssClass="slideTitle"/><br />
            <asp:Image ID="Image1" runat="server"
                Height="300"
                Style="border: 1px solid black;width:auto"
                ImageUrl="images/3.jpg"
                AlternateText="Blue Hills image" />
            <asp:Label runat="server" ID="imageDescription" CssClass="slideDescription"></asp:Label><br /><br />
            <asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" />
            <asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" />
            <asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" />
            <asp:SlideShowExtender ID="slideshowextend1" runat="server"
                TargetControlID="Image1"
                SlideShowServiceMethod="GetSlides"
                AutoPlay="true"
                ImageTitleLabelID="imageTitle"
                ImageDescriptionLabelID="imageDescription"
                NextButtonID="nextButton"
                PlayButtonText="Play"
                StopButtonText="Stop"
                PreviousButtonID="prevButton"
                PlayButtonID="playButton"
                Loop="true" />
        </div>

    </form>
</body>
</html>
Posted
Comments
Hercal 8-Mar-12 11:28am    
i need help pleaseeeeeeeee

Hi,

here's a great link with exactly does what you're trying to achieve.
It's in VB, but translation to c# isn't so much work.

http://www.dotnetcode.in/2011/07/how-to-slideshow-images-from-database.html[^]

Regards
 
Share this answer
 
Http Handler:

C#
<%@ WebHandler Language="C#" Class="ShowImage" %>

using System;
using System.Web;

public class ShowImage : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {

        Int32 theID;
        if (context.Request.QueryString["id"] != null)
            theID = Convert.ToInt32(context.Request.QueryString["id"]);
        else
            throw new ArgumentException("No parameter specified");
            //theID = 2;

        context.Response.ContentType = "image/jpeg";
        System.IO.Stream strm = DisplayImage(theID);
        byte[] buffer = new byte[2048];
        int byteSeq = strm.Read(buffer, 0, 2048);

        while (byteSeq > 0)
        {
            context.Response.OutputStream.Write(buffer, 0, byteSeq);
            byteSeq = strm.Read(buffer, 0, 2048);
        }
    }


    public System.IO.Stream DisplayImage(int theID)
    {
        string cs = System.Configuration.ConfigurationManager.ConnectionStrings["TempConnectionString"].ConnectionString;
        using (System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(cs))
        {
            string sql = "SELECT g_images FROM tblImage WHERE id = @ID";
            using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(sql, connection))
            {
                cmd.CommandType = System.Data.CommandType.Text;
                cmd.Parameters.AddWithValue("@ID", theID);
                connection.Open();
                object theImg = cmd.ExecuteScalar();
                try
                {
                    return new System.IO.MemoryStream((byte[])theImg);
                }
                catch
                {
                    return null;
                }
                finally
                {
                    cmd.Dispose();
                    connection.Close();
                    connection.Dispose();

                }
            }
        }

    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}


Slide Show Page(Code Behind):

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using COSTACCLib;
using System.Data;

public partial class Gallery : CustomBasePage
{
    public static string comCode;
    public static string proCode;
    CAProcessAccess ImageProc = new CAProcessAccess("master");

    protected void Page_Load(object sender, EventArgs e)
    {
        comCode = txtComCode.Text;
        proCode = txtProCode.Text;
    }


    protected void btnShowGallery_Click(object sender, EventArgs e)
    {
        Image1.Visible = true;
        prevButton.Visible = true;
        playButton.Visible = true;
        nextButton.Visible = true;
    }


    [System.Web.Services.WebMethodAttribute()]
    [System.Web.Script.Services.ScriptMethodAttribute()]

    public static AjaxControlToolkit.Slide[] GetSlides()
    {
        CAProcessAccess ImageProc = new CAProcessAccess("master");
        DataSet ds = ImageProc.GetRecords("", "SP_Gallery_Image", "GETID", comCode, proCode, "", "");
        DataTable dt = ds.Tables[0];

        AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[dt.Rows.Count];

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            int imgID = Convert.ToInt32(dt.Rows[i]["ID"]);
            slides[i] = new AjaxControlToolkit.Slide("ShowImage.ashx?ID=" + imgID, "test", "test");
        }

        return slides;
    }
}


Slide Show Page:

ASP.NET
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Gallery.aspx.cs" Inherits="Gallery" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1"  runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    
    <script type="text/javascript">
        
        function pageLoad() {
            var slide = $find('SSBehaviorID');
            if (slide != null) {
                slide.add_slideChanging(animateSlides);
                var ae = $find("ae");
                var be = ae.get_OnLoadBehavior();
                var an = be.get_animation();
                fadein = an.get_animations()[1];
                fadeout = an.get_animations()[0];

                fadein.set_duration(1.0);
                fadeout.set_duration(1.0);
            }
        }

        function animateSlides() {
            fadein.play();
            window.setTimeout("fadeout.play()", 2000);
        } 
    </script>


    <div style="text-align:center;">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <ContentTemplate>
    
    <asp:Label ID="lblComCode" runat="server" Font-Bold="True" Text="Company Code:"></asp:Label>

 <asp:TextBox ID="txtComCode" runat="server"></asp:TextBox>
     

    <asp:Label ID="lblProCode" runat="server" Font-Bold="True" 
        Text="Project Code: "></asp:Label>

    <asp:TextBox ID="txtProCode" runat="server"></asp:TextBox>
    <asp:Button ID="btnShowGallery" runat="server" onclick="btnShowGallery_Click" 
        Text="Show" />

    <br />
    <br />
            <asp:Label runat="Server" ID="imageTitle" CssClass="slideTitle"/><br />
            <asp:Image ID="Image1" runat="server" 
                Height="400px" Width="600px" Visible="false"
                Style="border: 1px solid black;" 
                
                AlternateText="There is no image for this project..."
                 />
            <br />
            <asp:Label runat="server" ID="imageDescription" CssClass="slideDescription"></asp:Label>
            <br />
            <br />
            <asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" Visible="false" />
            <asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" Visible="false" />
            <asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" Visible="false" />
            
            <ajaxToolkit:SlideShowExtender ID="slideshowextend1"  runat="server" 
                TargetControlID="Image1"
                SlideShowServiceMethod="GetSlides"
                BehaviorID="SSBehaviorID"
                AutoPlay="true" 
                ImageTitleLabelID="imageTitle"
                ImageDescriptionLabelID="imageDescription"
                NextButtonID="nextButton" 
                PlayButtonText="Play" 
                StopButtonText="Stop"
                PreviousButtonID="prevButton" 
                PlayButtonID="playButton" 
                Loop="true"
                SlideShowAnimationType="Rotate" />

            <ajaxToolkit:AnimationExtender ID="animationextend1"  runat="server" BehaviorID="ae" TargetControlID="Image1">
            
            <Animations>
            <OnLoad>
            <Sequence>
              <FadeOut Duration="0" Fps="20" />
              <FadeIn Duration="0" Fps="20" />
            </Sequence>
            </OnLoad>
          </Animations>
            
            </ajaxToolkit:AnimationExtender>

    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnShowGallery" EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>
       </div>
</asp:Content>


I give you the raw code of mine and I think you can get the idea from that...
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900