Changer la source de l'image en cliquant sur la vignette en utilisant UpdatePanel

Question

Par exemple, j'ai ce 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> 

Lorsque la vignette est cliquée il va changer la source de ProductImageBig avec sa cible de lien hypertexte.

Comment puis-je y parvenir en utilisant UpdatePanel? (Ou vais-je pouvoir)

Answer 1

Vous utilisez actuellement un contrôle HyperLink qui dirigera l'utilisateur vers la valeur de la propriété NavigateUrl. Si elle va à une page séparée, comment va-t-il modifier l'URL du contrôle ProductImageBig?

Une option consiste à remplacer le contrôle HyperLink par un contrôle ImageButton, puis à spécifier une méthode dans votre codebehind pour la propriété "OnCommand".

Dans le code derrière, vous pouvez lancer l'objet émetteur à un la ImageButton, récupérer son ImageURL, puis définissez l'URL de votre ProductImageBig

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

Si vous avez l'ensemble de balisage entouré dans un UpdatePanel nommé "updatePanel" et vous avez les propriétés définies correctement, vous pouvez ensuite le mettre à jour après avoir défini l'URL.