How to display dynamic images from a ListView?

Question

How to display dynamic images from a ListView?

Navigation

#1 by (2 votes)

-1

I created a div with a ListView where CheckBox and a Image in> Page_Load .

I need to click on one of the CheckBox by selecting from the image, it will be created dynamically in another Div , and at most the user can select 4 images from the list and after choosing the images they are saved the path of the folder so that another time the user enters the same screen the previously selected images will be loaded.

Below what I already have.

<asp:Panel runat="server" ID="panelObjeto">
    <div style="position: relative; height: 300px; width: 200px; overflow-x: scroll;">
        <asp:ListView ID="livImagens" runat="server" OnSelectedIndexChanging="livImagens_OnSelectedIndexChanged">
            <LayoutTemplate>
                <table>
                    <tr>
                        <th></th>
                    </tr>
                    <tr id="itemplaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr style="border: solid 1px">
                    <td style="border: solid 1px">
                        <asp:CheckBox ID="cbxImagem" runat="server" />
                    </td>
                    <td>
                        <asp:Image ID="Image1" runat="server" Height="100px" Width="100px" ImageUrl='<%# Eval("Value") %>' />
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>

    </div>
    <div id="divimagens" runat="server" style="position: absolute; left: 35%; top: 23%; height: 300px; width: 710px;">
        <p>Aqui será carregado as imagens</p> 
    </div>
</asp:Panel>

Code behind.

if (!IsPostBack)
    {
        string[] filePaths = Directory.GetFiles(Server.MapPath("~/Imagens/"));
        List<ListItem> files = new List<ListItem>();
        foreach (string filePath in filePaths)
        {
            string fileName = Path.GetFileName(filePath);
            files.Add(new ListItem(fileName, "~/Imagens/" + fileName));
        }
        livImagens.DataSource = files;
        livImagens.DataBind();
    }

javascript jquery c# asp.net webforms

asked by anonymous 27.10.2015 / 13:21

1 answer

File Upload [closed] Jquery mobile duplicating elements [closed]

score 2 · Accepted Answer

You can do the same thing as loading the main list of images. In this code block, you can leave it like this:

<div id="divimagens" runat="server" style="position: absolute; left: 35%; top: 23%; height: 300px; width: 710px;">
       <asp:ListView ID="livImagensSelecionadas" runat="server">
            <LayoutTemplate>
                <table>
                    <tr>
                        <th></th>
                    </tr>
                    <tr id="itemplaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr style="border: solid 1px">
                    <td>
                        <asp:Image ID="Image2" runat="server" Height="100px" Width="100px" ImageUrl='<%# Eval("Value") %>' />
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
</div>

and no behind:

List<ListItem> imgSelecionadas = new List<ListItem>();

protected void livImagens_OnSelectedIndexChanged(object sender, EventArgs e)
{
   string imageUrl = ((sender as Control).FindControl("Image1") as Image).ImageUrl;
   imgSelecionadas.Add(new ListItem(imageUrl.replace("~/Imagens/",""), imageUrl));
   livImagensSelecionadas.DataSource = imgSelecionadas;
   livImagensSelecionadas.DataBind();
}

Something more or less in this line.