Redownload image on partial postback

[hondaman2003]

I have a page that allows the user to select an image then click upload and it will save the file on the server, resize it, then display the image immediately.

I have also added two buttons, each for rotating 90 degrees in each direction. I would like the rotating to happen on the server then the image refresh without a full postback. I have the code correct but the image is not refreshing after rotating. I confirmed the rotating is happening on the server correctly.

Here is my code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Image ID="Image1" runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnRotateClockwise90" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="btnRotateCounterClockwiseRight" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnRotateClockwise90" runat="server" Text="Clockwise 90" onclick="btnRotateClockwise90_Click" UseSubmitBehavior="False" />
<asp:Button ID="btnRotateCounterClockwiseRight" runat="server" Text="Counter clockwise 90" onclick="btnRotateCounterClockwiseRight_Click" />

 

[MarkSweetland]

Your browser is displaying the cached version of the image and it's not being updated even though the content has changed. The easiest method I've found to trick the browser was to tack on a changing suffix to the end of the Image URL to make the browser believe the image has changed:

In your .aspx content (Note the UpdateMode="Conditional" so we can use the UpdatePanel1.Update() method in the code-behind:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate> 
        <asp:Image ID="Image1" runat="server"  AlternateText="Original"  ImageUrl="~/images/SomeImage.png?<%= DateTime.Now.Ticks %>"  />
    </ContentTemplate>
    <Triggers >
        <asp:AsyncPostBackTrigger ControlID="btnRotateClockwise90" EventName="Click"  />
        <asp:AsyncPostBackTrigger ControlID="btnRotateCounterClockwiseRight" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnRotateClockwise90" runat="server" Text="Clockwise 90" onclick="btnRotateClockwise90_Click" UseSubmitBehavior="False" />
<asp:Button ID="btnRotateCounterClockwiseRight" runat="server" Text="Counter clockwise 90" onclick="btnRotateCounterClockwiseRight_Click" />

And in your btn..._Click events:

// strip off extra characters from image.url
string url = Image1.ImageUrl.Substring(0, Image1.ImageUrl.LastIndexOf("?"));
// map to server folder
string path = Server.MapPath(url);
            
//do your rotate stuff here...

// change ImageURL via querystring
Image1.ImageUrl = p += "?" + DateTime.Now.Ticks.ToString();
// Force Update of UpdatePanel
UpdatePanel1.Update();

Mark

"You guys pair up in groups of three, then line up in a circle."
- Bill Peterson, a Florida State football coach

 

[hondaman2003]

I have applied the code above and now when I click either button for rotating the image it will rotate the actual file and then the image control itself is acting like it cannot display the image. It's showing a generic icon but it's not the generic icon with the red x, it's the same icon as if the image was blocked somehow.

 

[MarkSweetland]

Found a mistake in the code.

Image1.ImageUrl = [red]p[/red] += "?" + DateTime.Now.Ticks.ToString();

should be

Image1.ImageUrl = [red]url[/red] += "?" + DateTime.Now.Ticks.ToString();




Mark

"You guys pair up in groups of three, then line up in a circle."
- Bill Peterson, a Florida State football coach