從中繼器訪問選定的項目

Question

我正在使用圖片庫，該圖片庫允許上傳圖片，該圖片是作為原始圖片生成並存儲為縮略圖的。

列出了縮略圖文件夾中的圖像，並且如果用戶單擊其中一個縮略圖，則圖像應以完整比例顯示，並且所單擊的縮略圖應帶有邊框，以顯示用戶單擊的縮略圖。

為此，我使用了Repeater控件以及圖像和超鏈接控件。 在下面，您可以看到我在文件后面的代碼（文件的實際存儲在單獨的類中進行）。

它可以選擇一個文件並將其上傳：該文件將生成為縮略圖，並且已上傳的圖像將以完整比例顯示。 但是，在某些方面我需要幫助：

1. 如果單擊縮略圖之一，則應將Css類添加到該縮略圖（添加邊框），這是我嘗試使用ItemRepeater_ItemCommand完成的操作。 這里的問題是所有縮略圖都屬於此類。 我如何只選擇單擊的縮略圖？

2. 如何在超鏈接標記中編寫代碼，以便單擊的縮略圖以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

為了顯示完整尺寸的圖像，我建議在超鏈接控件上使用一個偽造的href值（“＃”），並返回一個返回false的javascript例程。 這是希望停止事件冒泡過程，該過程通常會導致瀏覽器跟隨鏈接。 要顯示更大尺寸的圖像，您可以使用此處演示的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

         }
     }