Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Redownload image on partial postback

Status
Not open for further replies.

hondaman2003

Programmer
Mar 3, 2008
202
US
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:

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" />
 

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:

Code:
<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:


Code:
// 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
 
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.
 

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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top