Adding images to slideshow using XML file

Up to now we have created an image slideshow with 8 images which are named in a specific way such as 1.jpg, 2.jpg…8.jpg. You can see implementation details of that one in the previous post. But there are two problems we have to face.

  • We have to rename the original image in a specific way. (ex. 1.jpg)
  • If we want to add another image to the slideshow, we need to change the application code therefore it is required to rebuild and redeploy the application.

We can solve this problem using a XML file. XML file is a configuration file. Therefore we can update it without rebuilding the application. The reason is that it is a configuration file.

Steps in the AjaxWebApplication

  1. First we need to add another folder named OriginalImages to the root of the project.
  2. Paste images to that folder with their original names.
  3. Then we need to add another folder called Data to the root of the project.
  4. Add a XML file named ImageData.xml into that Data folder
  5. Add root element named images and within that, add child elements named image with attribute name and order in ImageData.xml file as below.
  6. Add another WebForm called XmlImageSlideShow.

Sample code in XmlImageSlideShow.aspx

<?xml version="1.0" encoding="utf-8" ?>
<images>
<image name="Chrysanthemum.jpg" order="1"/>
<image name="Desert.jpg" order="2"/>
<image name="Hydrangeas.jpg" order="3"/>
<image name="Jellyfish.jpg" order="4"/>
<image name="Koala.jpg" order="5"/>
<image name="Lighthouse.jpg" order="6"/>
<image name="Penguins.jpg" order="7"/>
<image name="Tulips.jpg" order="8"/>
</images>

Steps in XmlImageSlideShow.aspx

  1. Add ScriptManager control into the div tag of the form. Remember to add this inside the form tag always.
  2. Add UpdatePanel control under ScriptManager control inside the div
  3. Add ContentTemplate tag inside the UpdatePanel.
  4. Add a Timer control within that ContentTemplate tag and set the interval as 1000ms.
  5. Add Image control under Timer control inside the ContentTemplate tag and set attribute Height and Width as 200.
  6. Add text Image Displaying: followed by Label control named lblImageName under Image control inside the ContentTemplate
  7. Add text Image Order: followed by Label control named lblImageOrder under lblImageName Label control inside the ContentTemplate
  8. Add a Button control to control the image sequence.

Sample code in XmlImageSlideShow.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XmlImageSlideShow.aspx.cs" Inherits="AjaxWebApplication.XmlImageSlideShow" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<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" runat="server" Height="200" Width="200" />

Image Displaying: <asp:Label ID="lblImageName" runat="server" Text="Label"></asp:Label>

Image Order: <asp:Label ID="lblImageOrder" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Stop slideshow" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel></div>
</form>
</body>
</html>

Steps in XmlImageSlideShow.aspx.cs

  1. Create a private method named SetImageUrl.
  2. Within that method, create a DataSet You need to add System.Data namespace at the top of the file.
  3. Read XML file and store the result in the created DataSet
  4. Store that DataSet object in a ViewState[“ImageData”].
  5. Create another ViewState variable as ViewState[“ImageOrder”] and set 1 as the order.
  6. Get image data which has the 1 as the order into a DataRow.
  7. Using that result set ImageUrl property of Image1 control and Text property of lblImageName and lblImageOrder
  8. Call SetImageUrl method from Page_Load event if it is not a postback.
  9. Add the Tick event handler.
  10. Within that Tick event, get ViewState[“ImageOrder”] and increment it by 1, then update ViewState[“ImageOrder”] with new value.
  11. Get image data using updated order value and store it in a DataRow
  12. If that DataRoW object is not null, set ImageUrl property of Image1 control and Text property of lblImageName and lblImageOrder
  13. Else, call SetImageUrl
  14. Add Click event handler for the Button control and if the Timer control is always enabled, disable it and set the Text property of that Button control as “Start slideshow”. If the Timer is disabled, enable it and set the Text property of that Button control as “Stop slideshow”.

Sample code in XmlImageSlideShow.aspx.cs

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 AjaxWebApplication
{
public partial class XmlImageSlideShow : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SetImageUrl();
}
}

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

DataRow dr = ((DataSet)ViewState["ImageData"]).Tables["image"].Select().FirstOrDefault(x => x["order"].ToString() == i.ToString());

if (dr != null)
{
Image1.ImageUrl = "~/OriginalImages/" + dr["name"].ToString();
lblImageName.Text = dr["name"].ToString();
lblImageOrder.Text = dr["order"].ToString();
}
else
{
SetImageUrl();
}
}

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";
}
}

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

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

After running the project you can see the browser window as following.

8th image

 

If you want add another image you have to add it to the OriginalImages folder and then you need to update the ImageData.xml file as below.

<?xml version="1.0" encoding="utf-8" ?>
<images>
<image name="Chrysanthemum.jpg" order="1"/>
<image name="Desert.jpg" order="2"/>
<image name="Hydrangeas.jpg" order="3"/>
<image name="Jellyfish.jpg" order="4"/>
<image name="Koala.jpg" order="5"/>
<image name="Lighthouse.jpg" order="6"/>
<image name="Penguins.jpg" order="7"/>
<image name="Tulips.jpg" order="8"/>
<image name="Welcome.jpg" order="9"/>
</images>

You do not need to rebuild and redeploy the project. You can see the slideshow with 9th image as below.

9th image

 

You have the ability to control the sequence of the slideshow using the button control. You can download the source code from GitHub using https://github.com/hasiabewardana/ExperimentalAjaxWebApplication link. You will see more posts on exciting topics soon. Until then stay tuned with us.

Advertisements

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