Text version of the video
Slides
All ASP .NET Text Articles
All ASP .NET Slides
ASP.NET Playlist
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
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:UsersPublicPicturesSample Pictures”.
Step 2: Right click on the project name in solution explorer, and add “Data” folder. Add “ImageData.xml” file. Copy and paste the XML from my bog.
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
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
