使用 updatePanel 单击缩略图来更改图像来源

发布于 2024-08-26 22:57:08 字数 871 浏览 2 评论 0原文

例如，我有这个 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>

当单击缩略图时，它将更改 ProductImageBig 的源及其超链接目标。

我如何使用 UpdatePanel 实现此目的？（或者我能够）

原文

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 )

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感性 2024-09-02 22:57:08

您当前正在使用 HyperLink 控件，它将引导用户访问 NavigateUrl 属性的值。如果它转到单独的页面，它将如何修改 ProductImageBig 控件的 URL？

一种选择是将 HyperLink 控件更改为 ImageButton，然后在代码隐藏中为“OnCommand”属性指定一个方法。

在后面的代码中，您可以将发送者对象转换为 ImageButton，检索其 ImageURL，然后设置 ProductImageBig 的 URL

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

如果您将整个标记包含在名为“updatePanel”的 UpdatePanel 中，并且正确设置了属性，设置 Url 后即可更新它。

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.

回复收藏 0 原文

~没有更多了~