Доступ к выбранному элементу из повторителя - PullRequest
Новая
       10

Доступ к выбранному элементу из повторителя

0 голосов
/ 21 февраля 2012

Я работаю над галереей изображений, которая позволяет загружать изображение, которое генерируется и сохраняется как эскиз, а также исходное изображение.

Изображения в папке миниатюр перечислены иесли пользователь щелкает одну из миниатюр, изображение должно отображаться в полном масштабе, а нажатая миниатюра должна получить рамку, показывающую, какую миниатюру щелкнул пользователь.

Для этого я также использую элемент управления 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>

Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 21 февраля 2012

В соответствии с требованиями к миниатюре вы можете использовать обработчик щелчков jQuery для изображения, которое было выбрано, чтобы переключать соответствующий класс CSS на изображение; увидеть: http://api.jquery.com/click/ см. Также toggleClass

Для отображения полноразмерного изображения я бы предложил фиктивное значение href ("#") в элементе управления гиперссылкой с подпрограммой javascript, которая возвращает false; это необходимо, чтобы остановить процесс всплытия событий, который обычно заставляет браузер переходить по ссылке. Чтобы отобразить изображение более полного размера, вы можете использовать процедуру HTML / CSS, как показано здесь: http://www.wickham43.net/hoverpopups.php

0 голосов
/ 21 февраля 2012

вы можете использовать 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

         }
     }
...