slideshow in asp.net C# stops at first image

I learning asp.net. In this exercise what I'm trying to achieve is compile a 3 image slide show. The page compiles and shows only the first image. The page is suppose to update or refresh to show each image in 2 second intervals. Basing my code on another program that worked which used a conditional statement, the basic difference is that I'm using an array in addition to a conditional if statement. I didn't use the Trigger element because the code I'm basing mine on didn't us it. This is a excerpt from the lecture notes: "The control specifies a control and event that will cause a partial page update for the UpdatePanel that contains this trigger reference. The ControllD attribute sets the name of the control that triggers an asynchronous postback for an UpdatePanel control." For some reason I believe my problem may lies here. But because I'm new I really don't know. That's why I come here for help. please. If someone could just point me in the right directions I think I can get this program to work the way it's suppose to. Here is the code

 <%@ Page Language="C#" %>
 <script runat="server" type="text/vb">
 private void Timer1_Tick(Object sender, EventArgs e)
 {
 string[] circle = new string[3];
 circle[0]="red";
 circle[1]="green";
 circle[2]="blue";
 int i = Convert.ToInt32(circle);
 i = i + 1;
 if (i > 3)
 { 
 i = 1;
 }
 image1.ImageUrl = "red " + i + ".png";
  }
 </script>
 <!Doctype html>
 <html>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager runat="server" id="ScriptManager1">
 </asp:ScriptManager>
 <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Timer runat="server" id="Timer1" Interval="2000" OnTick="Timer1_Tick" />
 <asp:Image id="image1" runat="server" ImageUrl="red.png"  AlternateText="Circles" />
 </ContentTemplate>
  </asp:UpdatePanel>
 </form>
 </body>
 </html>

Solution

Forgive me for the poor commenting but today I'm in hurry. I'm assuming the code is only for educational purposes. Javascript is better tailored for the task you want to accomplish. c# or every server side language is espected to make a round trip (page is reloaded) on the server every refresh

You need to make the slide counter variable persistent across postback. There are many ways to accomplish the task Database, Session Variables, ViewState object (perhaps the last is the best one but and you can work on it).

Here is a little variation of your code. Hope it helps.

<html>
  <body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="ScriptManager1">
        </asp:ScriptManager>
        <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Timer runat="server" ID="Timer1" Interval="2000" OnTick="Timer1_Tick" />
                <asp:Label Text="no images loaded" ID="LabelImageName" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script runat="server" type="text/vb">

string[] _arrImgNames = new string[] { "red", "green", "blue" };


protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        // set counter session variable only the first time the page is loaded (not when script refreshs)
        Session["counter"] = -1;
    }
}


private void Timer1_Tick(Object sender, EventArgs e)
{

    string textToShow = String.Format(
        "Now the program shows image '{0}' "
        , this.GetNextSlideImageName());

    LabelImageName.Text = textToShow;

}


private string GetNextSlideImageName()
{
    // get the counter from session variable 
    int counter = Convert.ToInt32(Session["counter"]);

    // increase the counter 
    counter++;

    if (counter >= this._arrImgNames.Length)
    {
        counter = 0;
    }

    // updating the session variable 
    Session["counter"] = counter;

    // compose the image name 
    string imageName = String.Format("{0}.png", this._arrImgNames[counter]);

    return imageName;
}

</script>