Change the source of image by clicking thumbnail using updatePanel

Question

For example, i have this ImageViewer.ascx UserControl:

<div class="ImageTumbnails">
  <asp:ListView ID="ImageList" runat="server" ItemPlaceholderID="ItemContainer">
    <LayoutTemplate>
      <asp:PlaceHolder ID="ItemContainer" runat="server" />
    </LayoutTemplate>
    <ItemTemplate>
      <asp:HyperLink runat="server" 
      NavigateUrl='<%# Link.ToProductImage(Eval("ImageFile").ToString())%>'>
        <asp:Image runat="server" ImageUrl='<%# Link.ToThumbnail(Eval("ImageFile").ToString()) %>' />
      </asp:HyperLink>
    </ItemTemplate>
  </asp:ListView>
</div>
<div class="ImageBig">
  <asp:Image ID="ProductImageBig" runat="server" ImageUrl="" />
</div>

When the thumbnail is clicked it will change the source of ProductImageBig with its hyperlink target.

How can i achieve this using UpdatePanel ? ( Or will i be able to )

Answer 1

You are currently using a HyperLink control which will direct the user to the value of the NavigateUrl property. If it goes to a separate page, how will it modify the URL of the ProductImageBig control?

One option is to change the HyperLink control to a ImageButton and then specify a method in your codebehind for the "OnCommand" property.

In the code behind, you can cast the sender object to a the ImageButton, retrieve its ImageURL, and then set the URL of your ProductImageBig

public void DisplayPhoto(object sender, CommandEventArgs args)
{
     ProductImageBig.NavigateUrl = ((ImageButton)sender).ImageUrl;
     updatePanel.Update();
}

If you have the entire markup surrounded in an UpdatePanel named "updatePanel" and you have the properties set correctly, you can then update it after setting the Url.