[英]render list of images dynamically
I using listview to render my book data. 我使用listview呈现我的图书数据。 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? 看起来图像是一个字符串列表,其中包含存储图片的路径/ URL? 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. 尝试一下,如果您有特定的问题或疑问,请向我们显示代码和您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.