Image has to change on browser continuously and automatically when image is changed on web server (ASP.NET)

Question

I have created a desktop application which continuously changes the image on a fixed path and fixed filename 00.jpg. The image is in the path of my web site folder. The image is viewed on browser by . But the image is not changing continuously on the browser.

I tried using both client (javascript) and server (asp.net) timers but It does not result. Here is my ASP.net AJAX Timer code and markup:

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="up1" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <asp:Image ImageUrl="00.jpg" ID="img1" runat="server" />
            <asp:Timer ID="Timer1" runat="server" Interval="100" ontick="Timer1_Tick"></asp:Timer>
        </ContentTemplate>
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
        </asp:UpdatePanel>            
    </div>
</form>

protected void Timer1_Tick(object sender, EventArgs e)
{
    string xx = Request.Url.AbsoluteUri;
    xx = xx.Replace ("Default.aspx","00.jpg");
    img1.ImageUrl = xx; up1.Update();
}

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

I'm suspecting a cache issue on the image. Maybe try to either disable the cache on this image, or build unique url with :

protected void Timer1_Tick(object sender, EventArgs e)
{
    img1.ImageUrl = Page.ResolveUrl("~/00.jpg?x=" + DateTime.Now.Ticks.ToString()); 
    up1.Update();
}

But actually, you should consider using a pure javascript (with jQuery or similar if you want) solution. This will avoid a server round trip.

This post explain exactly your need with a solution.

edited May 23 '17 at 12:12

Community

1
1

answered Jun 15 '12 at 08:12

Steve B

36,818
21
101
174

Thank you very much @Steve B, I have got desired result with building unique url as you guide. – Munawar Ali Jun 15 '12 at 09:36

score 0 · Answer 2 · answered Jun 15 '12 at 08:18

UpdatePanel uses lots of overhead when communicating with the server; so if possible, get rid of the ScriptManager and UpdatePanel and use JQuery instead. You can have a simple <img> tag and let JQuery update the image.

If you somehow are able to change the filename of the image (eg. add a date + time to the end of the filename), then you won't have to do anything special to overcome cache issues, you can simply update the src of the image.

eg. http://www.phpfreaks.com/forums/index.php?topic=253852.0 or https://www.google.com/search?btnG=1&pws=0&q=jquery+img

Thank you @KBoek for guiding to control the server overhead. — Munawar Ali, Jun 15 '12 at 09:30

Image has to change on browser continuously and automatically when image is changed on web server (ASP.NET)

2 Answers2