Add images to slideshow using xml file

Suggested Videos
Part 134 - Add image slideshow to your website using asp.net ajax and c#
Part 135 - Display images in sequence in an image slideshow
Part 136 - Provide capability to start and stop image slideshow

There are 2 problems with the image slideshow, that we have built in Parts 134, 135, & 136.  If we want to add a new image to the slide show, 
1. We will have to modify the application code
2. The new image has to be named in a specific way. Since we already have 8 images, the next image has to be named 9.jpg.



There are two ways to fix the above 2 issues.
1. Using an XML file
2. Using a database table

In this video, we will discuss using an XML file and in our next video, we will discuss using a database table.



Step 1: At the moment the images in "Images" folder have the following names
1.jpg
2.jpg
3.jpg
etc...

Delete all these 8 images. Now copy the images with their original names from "C:\Users\Public\Pictures\Sample Pictures".

Step 2: Right click on the project name in solution explorer, and add "Data" folder. Add "ImageData.xml" file. Copy and paste the following XML
<?xml version="1.0" encoding="utf-8" ?>
<Images>
  <image name="Chrysanthemum.jpg" order="1"></image>
  <image name="Desert.jpg" order="2"></image>
  <image name="Hydrangeas.jpg" order="3"></image>
  <image name="Jellyfish.jpg" order="4"></image>
  <image name="Koala.jpg" order="5"></image>
  <image name="Lighthouse.jpg" order="6"></image>
  <image name="Penguins.jpg" order="7"></image>
  <image name="Tulips.jpg" order="8"></image>
</Images>

At this point your solution explorer, should be as shown below.


Deafult.aspx code:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="ImageSlideShow._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
            </asp:Timer>
            <asp:Image ID="Image1" Height="200px" Width="200px" runat="server" />
            <br />
            <br />
            Name: <asp:Label ID="lblImageName" runat="server"></asp:Label>
            <br />
            Order: <asp:Label ID="lblImageOrder" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Stop Slideshow" 
                onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Default.aspx.cs code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace ImageSlideShow
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                LoadImageData();
            }
        }

        private void LoadImageData()
        {
            DataSet ds = new DataSet();
            ds.ReadXml(Server.MapPath("~/Data/ImageData.xml"));
            ViewState["ImageData"] = ds;

            ViewState["ImageDisplayed"] = 1;
            DataRow imageDataRow = ds.Tables["image"].Select().FirstOrDefault(x => x["order"].ToString() == "1");
            Image1.ImageUrl = "~/Images/" + imageDataRow["name"].ToString();
            lblImageName.Text = imageDataRow["name"].ToString();
            lblImageOrder.Text = imageDataRow["order"].ToString();
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            int i = (int)ViewState["ImageDisplayed"];
            i = i + 1;
            ViewState["ImageDisplayed"] = i;

            DataRow imageDataRow = ((DataSet)ViewState["ImageData"]).Tables["image"].Select().FirstOrDefault(x => x["order"].ToString() == i.ToString());
            if (imageDataRow != null)
            {
                Image1.ImageUrl = "~/Images/" + imageDataRow["name"].ToString();
                lblImageName.Text = imageDataRow["name"].ToString();
                lblImageOrder.Text = imageDataRow["order"].ToString();
            }
            else
            {
                LoadImageData();
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            if (Timer1.Enabled)
            {
                Timer1.Enabled = false;
                Button1.Text = "Start Slideshow";
            }
            else
            {
                Timer1.Enabled = true;
                Button1.Text = "Stop Slideshow";
            }
        }
    }
}

To add a new image to the slideshow, there are 2 simple steps
1. Add your new image to the images folder
2. Update "ImageData.xml" file

No comments