How to display dynamic images from a Listview?

Question

I created a div with a Listview where a Checkbox and a Imagery which are loaded into the Page_load.

I need that by clicking on one of the Checkbox by selecting from the image, it is created dynamically in another Div beside, being that at most the user can select 4 images from the list and after the choice of the images they are recorded the folder path so that again when the user enters the same screen the previously selected images are loaded.

Down with 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();
    }

Answer 1

You can do in the same way that loads the main list of images. In this block of code, you can leave so:

<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 in the 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 along those lines.