動態渲染圖像列表

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

嘗試一下，如果您有特定的問題或疑問，請向我們顯示代碼和您的問題。