从中继器访问选定的项目答案

【问题标题】：Accessing selected item from Repeater从中继器访问选定的项目
【发布时间】：2014-02-22 19:41:18
【问题描述】：

我正在开发一个图片库，它允许上传图片，该图片生成并存储为缩略图以及原始图片。

缩略图文件夹中的图像已列出，如果用户单击其中一个缩略图，则该图像应以全尺寸显示，并且单击的缩略图应带有边框，显示用户单击了哪个缩略图。

为此，我使用了Repeater 控件以及图像和超链接控件。下面你可以看到我的代码隐藏文件（文件的实际存储发生在一个单独的类中）。

它可以选择文件并上传：文件生成为缩略图，上传的图像以全尺寸显示。但是，有些事情我需要帮助：

如果单击其中一个缩略图，则应将 Css 类添加到该缩略图（添加边框），这是我尝试使用 ItemRepeater_ItemCommand 完成的事情。这里的问题是所有缩略图都得到了这个类。我怎么能只选择点击的缩略图？
如何在超链接标记中编写代码，以便单击的缩略图显示在 ID="fullSizeImage" 的图像控件中，而不是显示在新页面上？

来自后面的代码：

    protected void Page_Load(object sender, EventArgs e) {

        var directory = new DirectoryInfo(Gallery.PhysicalApplicationPath + "/Images");    
        var theFiles = directory.GetFiles();

        ImageRepeater.DataSource = theFiles;
        ImageRepeater.DataBind();
    }

    protected void ImageRepeater_ItemCommand(object source, RepeaterCommandEventArgs e) {

       if (e.Item.ItemType == ListItemType.Item) {
            var fi = e.Item.DataItem as FileInfo;
            if (fi != null) {
                var hyperLink = e.Item.FindControl("ImageHyperLink") as HyperLink;
                if (hyperLink != null) {
                    hyperLink.CssClass = "border";
                }
            }
        }
    }

    protected void UploadButton_Click1(object sender, EventArgs e) {
        if (ImageUpload.HasFile) {
            var content = ImageUpload.FileContent;
            var name = ImageUpload.FileName;
            var image = Gallery.SaveImage(content, name);

            fullSizeImage.ImageUrl = "Images/" + image;
        }
    }

来自default.aspx：

<asp:Image ID="fullSizeImage" runat="server" />

    <asp:Repeater ID="ImageRepeater" runat="server" DataSourceID="" 
        onitemcommand="ImageRepeater_ItemCommand">
        <ItemTemplate>
            <asp:HyperLink ID="ImageHyperLink" runat="server" NavigateUrl='<%# Eval("Name", "~/Images/{0}") %>' >
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Name", "~/Images/Thumbnails/{0}") %>' CssClass="thumbnail" />
            </asp:HyperLink>
        </ItemTemplate>
    </asp:Repeater>

提前致谢！

【问题讨论】：

标签： c# asp.net image repeater

【解决方案1】：

对于您的缩略图要求，您可以对已选择的图像使用 jQuery 单击处理程序，以将适当的 CSS 类切换到图像；看： http://api.jquery.com/click/ 参见 toggleClass

为了显示完整尺寸的图像，我建议在超链接控件上使用一个虚拟的 href 值（“#”），并使用一个返回 false 的 javascript 例程；这是希望停止事件冒泡过程，这通常会导致浏览器跟随链接。要显示更大尺寸的图像，您可以使用 HTML/CSS 例程，如下所示：http://www.wickham43.net/hoverpopups.php

【讨论】：

【解决方案2】：

您可以使用ImageButton，然后使用CommandArgument 和CommandName 属性。

<asp:ImageButton id="imagebutton1" runat="server" ImageUrl="images/pict.jpg" CommandName="Show" CommandArgument='<%# Eval("Name", "~/Images/Thumbnails/{0}") %>/>

在 Repetar_ItemCommand 事件中，像这样尝试

void ImageRepeater_ItemCommand(object sender, CommandEventArgs e) 
      {
         if (e.CommandName == "Show")
         { 
            //do some thing

         }
     }

【讨论】：