Question

我正在开发一个图片库，可以上传图片，该图片会以缩略图和原始图片的形式生成和存储。

列出缩略图文件夹中的图像，如果用户单击其中一个缩略图，则应以全比例显示图像，并且单击的缩略图应显示边框，显示用户单击的缩略图。

为了实现这一点，我使用了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>

提前致谢！

Answer 1

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

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

Answer 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

         }
     }

从Repeater访问所选项目

2 个答案: