Wednesday, September 23, 2015

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.
Add images to slideshow using xml file

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


If you are searching life partner. your searching end with kpmarriage.com. now kpmarriage.com offer free matrimonial website which offer free message, free chat, free view contact information. so register here : kpmarriage.com- Free matrimonial website