Home > AJAX, ASP.Net > AJAX Slider Show with Dynamic Image URL

AJAX Slider Show with Dynamic Image URL


Hi

try this example to use AJAX Slider Show to display Dynamic Image URL from database

where i save image name in my database and upload image in folder in my website root (Album folder)

Setp 1: Create database has Album table has the following fields:

Id -> PK , Idntity

Picture -> nvarchar(50)

Step2 : Create Webservice

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Collections.Generic;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "<a href="http://tempuri.org/">http://tempuri.org/</a>")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public WebService ()
    {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }
    //--- for slide show
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public  AjaxControlToolkit.Slide[] GetSlides()
    {

        string strSQL = "SELECT * FROM Album";
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["School_SystemConnectionString"].ConnectionString);
        conn.Open();

        SqlCommand comm = new SqlCommand(strSQL, conn);
        SqlDataAdapter da = new SqlDataAdapter(comm);
        DataTable tblData = new DataTable();
        da.Fill(tblData);
        //conn.Close();

        AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[tblData.Rows.Count];
        int i = 0;
        foreach (DataRow row in tblData.Rows)
        {
            slides[i] = new AjaxControlToolkit.Slide("Album/" + row["Picture"].ToString(), row["Description"].ToString(), "");
            i++;
        }
        return slides;

    }    
}

step3 : Create Web Form

Default.aspx

 <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
      
       <asp:Image ID="imgShowImage" runat="server"
                Height="300"
                Style="border: 1px solid black;width:auto"
                AlternateText="" />
        <br />

        <asp:Label runat="Server" ID="imageLabel1"/><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" />
           
            <cc1:SlideShowExtender ID="slideshowextend1" runat="server"
                TargetControlID="imgShowImage"
                SlideShowServiceMethod="GetSlides"
                AutoPlay="true"
                ImageDescriptionLabelID="imageLabel1"
                NextButtonID="nextButton"
                PlayButtonText="Play"
                StopButtonText="Stop"
                PreviousButtonID="prevButton"
                PlayButtonID="playButton"
                Loop="true" PlayInterval="1000" SlideShowServicePath="WebService.asmx" />

in code behind :-

protected void Page_Load(object sender, EventArgs e)
    {

        string strSQL = "SELECT [Picture], [Id] FROM [Album]";
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["School_SystemConnectionString"].ConnectionString);
        conn.Open();

        SqlCommand comm = new SqlCommand(strSQL, conn);
        SqlDataAdapter da = new SqlDataAdapter(comm);
        DataTable tblData = new DataTable();
        da.Fill(tblData);
        conn.Close();

        // set the initial image
        if (tblData.Rows.Count > 0)
        {
            imgShowImage.ImageUrl = "Album/" + tblData.Rows[0]["Picture"].ToString();
            //imageLabel1.Text = tblData.Rows[0]["Description"].ToString();
        }  
    }

Hope it helps…

Good Luck

Advertisements
  1. April 11, 2009 at 2:24 am

    Hi,

    Thanks for the artical !

    AFCC Inc.

  2. April 11, 2009 at 2:25 am

    Forgot

  3. AIMAN
    December 13, 2010 at 9:44 am

    HI YASSER
    good Artical
    thank you
    But I need Example about that
    sent me

    aimanbios@hotmail.com

    1000000 thanks

  4. yasserzaid
    December 14, 2010 at 7:19 am

    @AFCC Inc :- thanks for your comment hope my post helps you

  5. yasserzaid
    December 14, 2010 at 7:20 am

    @AIMAN :- you are welcome and i’ll try to send you this example but first try it you can copy and paste code

  6. Joey
    December 14, 2012 at 5:37 am

    Hi, good article, do you have this one in vb.net? Thanks!

    • yasserzaid
      December 17, 2012 at 11:47 am

      @Joey : Thank you hope my post helps you … you can find a tool to convert from C# to VB

  7. December 19, 2012 at 1:35 pm

    I absolutely love your site.. Pleasant colors & theme.

    Did you develop this site yourself? Please reply back as I’m trying to create my own personal blog and would love to learn where you got this from or just what the theme is called. Many thanks!

    • yasserzaid
      January 3, 2013 at 8:04 am

      @Raquel : no i didn’t develop this Theme but if you need help i can … Thank you

  8. December 26, 2012 at 5:26 pm

    Good way of viewing things – I am a bit more of a monochrome individual, myself

    • yasserzaid
      January 3, 2013 at 8:04 am

      @selling jewelry : thank you .. hope my posts helps you

  9. October 9, 2014 at 1:14 pm

    Hi colleagues, its great post about educationand entirely explained, keep it up all the
    time.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: