简体   繁体   中英

render list of images dynamically

I using listview to render my book data. Books may have list of images. I want to render list of images dynamically.

<asp:ListView ID="BookListView" runat="server" OnSelectedIndexChanged="ListView1_SelectedIndexChanged">
    <LayoutTemplate>
        <div id="groupPlaceholder" runat="server">
        </div>
    </LayoutTemplate>
    <GroupTemplate>
        <div>
            <div id="itemPlaceholder" runat="server"></div>
        </div>
    </GroupTemplate>
    <ItemTemplate>
        <div>
            <div id="BookTemplate" style="float: left">
                <b>BookID:</b>
                <asp:Label ID="BookID" runat="server" Text='<%# Eval("bookID") %>' /><br />
                <b>Name:</b>
                <asp:Label ID="lblBookName" runat="server" Text='<%# Eval("Name") %>' /><br />
                <b>Price:</b>
                <asp:Label ID="BookPrice" runat="server" Text='<%# Eval("price") %>' />
            </div>
            <div>
               **<asp:Image ID="Image" ImageUrl='<%# Eval("Images") %>'** runat="server" Height="100"
                    Width="100" />
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

-

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        booklist = ds.GetBooks();
        BookListView.DataSource = booklist;
        BookListView.DataBind();
    }       
}

public class Book
{
    public Book()
    {
        Images = new List<string>();
    }
    public int BookId { get; set; }
    public string Name { get; set; }
    public int Price { get; set; }
    public string Author { get; set; }
    public string Edition { get; set; }
    public int? Pages { get; set; }
    public List<string> Images { get; set; }
}

It looks like Images is a list of strings containing the path/URL to where the pictures are stored? If that's the case, you might try something like:

private void loadImageThumbnails(List<string> Images,string parentControlName)
    {
        int x = 0;
        int y = 0;
        foreach(string imagePath in Images)
        {
            PictureBox p = new PictureBox();
            p.ImageLocation = imagePath;
            p.Top = y;
            p.Left = x;
            p.Width = 100;
            p.Height = 100;
            p.Name = System.IO.Path.GetFileName(imagePath);
            p.Load();
            Control c = Controls.Find(parentControlName, true)[0];
            c.Controls.Add(p);
            //move left to right with 5 colums
            x += p.Width + 10;
            if (x >= 550)
            {
                x = 0;
                y += p.Height + 10;
            }
        }
    }

Play with that and if you have a specific question or problem, show us the code and your problem.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM