动态渲染图像列表答案

【问题标题】：render list of images dynamically动态渲染图像列表
【发布时间】：2017-01-04 03:38:40
【问题描述】：

我使用 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; }
}

【问题讨论】：

动态意味着我猜你希望它从数据库中显示？你能说得更具体点吗？

标签： c# asp.net listview dynamic

【解决方案1】：

看起来 Images 是一个字符串列表，其中包含存储图片的路径/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;
            }
        }
    }

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

【讨论】：