动态渲染图像列表

Question

我使用listview呈现我的图书数据。 书籍可能包含图像列表。 我想动态渲染图像列表。

<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; }
}

Answer 1

看起来图像是一个字符串列表，其中包含存储图片的路径/ URL？ 如果是这种情况，您可以尝试执行以下操作：

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;
            }
        }
    }

尝试一下，如果您有特定的问题或疑问，请向我们显示代码和您的问题。