Random image in UpdateProgress

Question

I have a wizard control inside an updatepanel. Some of the wizard steps take a few seconds to display, so I want to show an updateprogress control while they're loading. This is working, but I'd like to show a different image (random image selected from a folder) in the progresstemplate between each wizardstep.

I am able to access the image control and change the ImageUrl, but the progresstemplate never updates. It retains the first random image chosen from the very first time it loads.

I've tried updating the imageUrl on PageLoad and also by overriding the Render() method, but neither works.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="500" >
    <ProgressTemplate>
        <div class="modalWrapper">
            <div class="updateProgress">
                <asp:Image ID="imgLoading" runat="server" AlternateText="Loading..." />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

In codebehind:

protected void Page_Load(object sender, EventArgs e)
{
 System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)UpdateProgress1.FindControl("imgLoading");

    if (img != null)
        img.ImageUrl = PickImageFromDirectory("~/images/loaders/"); //returns "~/images/loaders/randomimage.gif"  
}

ALSO TRIED:

protected override void Render(HtmlTextWriter writer)
    {          
        System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)UpdateProgress1.FindControl("imgLoading");

        if (img != null)                       
            img.ImageUrl = PickImageFromDirectory("~/images/loaders/"); //returns "~/images/loaders/randomimage.gif"

        base.Render(writer);
    }

Answer 1

You can specify an url than goes to an aspx page :

<asp:Image runat="server" ImageUrl="GenerateImage.aspx"/>

In GenerateImage.aspx :

protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        Response.ContentType = "image/jpeg";
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Write(GetRandomImageData());
        Response.End();
    }

Answer 2

Your image is more than likely not being reloaded because the UpdateProgress sits outside your UpdatePanel. The nature of the UpdatePanel is that only the controls within it are updated on an asynchronous request. =)

Here's what you can do:

Change PickImageFromDirectory to be a static method and mark it as a WebMethod in the code-behind:

[WebMethod]
public static string PickRandomImage()
{
   // Logic to return the full path to a random image
}

Then, on the client-side place the following script at the bottom:

<script type="text/javascript">
function requestEnded()
{
   PageMethods.PickRandomImage(imageSuccess, imageFailed);
}

function imageSuccess(result,ctx,methodName)
{
  document.getElementById('<%= imgLoading.ClientID %>').src = result;
}

function imageFailed(err,ctx,methodName)
{
  alert(err);
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(requestEnded);
</script>

After every asynchronous postback this will call your server-side web method and set the image src to a random url. =)