Update ASP.net UpdatePanel Control with a thread in C#

Question

What I'm trying to do: I'm trying to update an image (in a UpdatePanel control) every .5 seconds using a thread in the code behind the web page (I'm using a ASP.NET Web Forms Site Project)

What I have so far: I have mock images on the screen are the moment. I also have a thread written that gets called with a button click. Here is that code:

protected void Button1_Click(object sender, EventArgs e)
{
    DoThing();

}
public void DoThing()
{
    Thread thread = new Thread(() => {
        while (true)
        {
            UpdatePanel1.Update();

            System.Threading.Thread.Sleep(500);

            if (Image2.ImageUrl == "~/Images/Water3.png")
            {
                Image2.ImageUrl = "~/Images/Water1.png";
                continue;
            }
            if (Image2.ImageUrl == "~/Images/Water1.png")
            {
                Image2.ImageUrl = "~/Images/Water2.png";
                continue;
            }
            if (Image2.ImageUrl == "~/Images/Water2.png")
            {
                Image2.ImageUrl = "~/Images/Water3.png";
                continue;
            }

        }
    });
    thread.Start();
    thread.Join();
}

and here is my HTML:

<%@ Page Title="Home Page" Language="C#" Async="true"     MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Image ID="Image1" runat="server" Height="32px" Width="32px" ImageUrl="~/Images/Fauset.png"/><asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/><br />
        <asp:Image ID="Image2" runat="server" Height="96px" Width="32px" ImageUrl="~/Images/Water1.png" OnLoad="Image2_Load"/><br />
        <asp:Image ID="Image3" runat="server" Height="32px" Width="32px" ImageUrl="~/Images/Bucket.png"/>
    </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
</asp:Content>

Problem: When i click the button the page is currently doing nothing. When i put a break point in the thread the thread is running. The page just isn't updating for some reason.

Notes: Im trying to stay away from JS, Jquery and JSON as much as possible because i barley know them but if i need to use them i need to use them

Answer 1

Once the page has rendered, you can't change it from code still running on the server without making use of some sort of client-side technology (Javascript/jQuery, etc).

In this case in particular, where you're trying to implement what effectively seems like an image slider, you can do it very easily using jQuery and one of the many slider plugins , which would also give you animated transitions.

Answer 2

You can't do the thing you want to do the way you want to do it. Server side code runs on the server, client side code runs on the client. Updating the content of a server control on the server will only reflect on the client if you can make the client reload the page or the control you've modified. There are many ways to reload pages/parts of the page, but in this case you're best off using some client side JavaScript.

It looks like the images are static, so you can probably get away with using a simple jquery image slider . There are many free ones available, find one that will change the image every 5 seconds and use that instead of trying to build a Goldberg machine just because you're more comfortable with doing it in one way.

Answer 3

This functionality is built in. All you have to do is add an Asynchronous Trigger and timer to your update panel.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="upOnLoading" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
    <ControlToUpdate>
        ....
    </ControlToUpdate
    <asp:Timer ID="Timer1" runat="server" Interval="2000" />
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
</asp:UpdatePanel>

and your method...

protected void upOnLoading(object sender, EventArgs e)
{
     ...
}

While your users are navigating your page elsewhere, upOnloading() will be executed every Timer.Interval milliseconds.