Displaying grid of pictures? - asp.net

Question

I wanted to use a GridView for binding a picture list. I can already do this, but I need to control how wide the grid goes.
If it was a table it would be easy like this:
<table>
<tr>
<td>Image 1</td>
<td>Image 2</td>
<td>Image 3</td>
</tr>
<tr>
<td>Image 4</td>
<td>Image 5</td>
<td>Image 6</td>
</tr>
<tr>
<td>Image 7</td>
<td>Image 8</td>
<td>Image 9</td>
</tr>
</table>
I want the "gridview" to not have any real columns or anything, just simply pictures with a text descriptor below them from my database. Is the repeater control better for this?

Answer 1

I would use a DataList control. The DataList control has very useful properties called RepeatColumns, and RepeatLayout which allow you to do what you need.
Markup:
<asp:DataList ID="DataList1" runat="server" RepeatColumns="3">
<ItemTemplate>
<img src="<%#Eval("url") %>" />
</ItemTemplate>
</asp:DataList>
Sample Class:
public class Sample
{
public string url { get; set; }
}
Binding DataList:
protected void Page_Load(object sender, EventArgs e)
{
List<Sample> samples = new List<Sample>();
samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
this.DataList1.DataSource = samples;
this.DataList1.DataBind();
}
Result: A HTML table with 2 rows with 3 columns each showing the google image.
<table id="Table1" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</td>
<td>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</td>
<td>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</td>
</tr>
<tr>
<td>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</td>
<td>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</td>
<td>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</td>
</tr>
</table>

Answer 2

From my understanding of your question, you want to out put the images in a form other than a table.
A DataList controls has built-in features that would make your life easier. Namely, RepeatColumns, and RepeatLayout. #Hanlet's answer explains this very well. The problem with his answer, from my understanding of your question, is that he only shows how to output as a table. Which, as I explained earlier is not what you are looking for. The DataList can display the output in a different way: RepeatLayout="Flow". The potential problem with this approach is that the layout is rigid. It will not allow you to change how it is displayed. It uses <span> and <br /> tags to display the data. While this can be styled using CSS, it is still somewhat limiting. Here is how the output from Hanlet's answer would look if you choose Flow instead of Table :
<div>
<span id="DataList1">
<span>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</span>
<span>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</span>
<span>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</span>
<br />
<span>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</span>
<span>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</span>
<span>
<img src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</span>
</div>
All that being said, if you want the unlimited control over the layout that a Repeater provides, there is a way to do this. Using two Repeaters:
aspx code:
<asp:Repeater ID="rptRows" runat="server" OnItemDataBound="rptRows_ItemDataBound">
<ItemTemplate>
<asp:Repeater ID="rptItems" runat="server">
<ItemTemplate>
<img width="30px" src="<%#Eval("url") %>" />
</ItemTemplate>
</asp:Repeater>
</br>
</ItemTemplate>
</asp:Repeater>
code-behind:
public class ImageEntity
{
public string url { get; set; }
}
public partial class DataListSample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
List<Tuple<ImageEntity, ImageEntity, ImageEntity>> listTuples = new List<Tuple<ImageEntity, ImageEntity, ImageEntity>>();
listTuples.Add(new Tuple<ImageEntity, ImageEntity, ImageEntity>(new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }));
listTuples.Add(new Tuple<ImageEntity, ImageEntity, ImageEntity>(new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }));
listTuples.Add(new Tuple<ImageEntity, ImageEntity, ImageEntity>(new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }));
listTuples.Add(new Tuple<ImageEntity, ImageEntity, ImageEntity>(new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }));
this.rptRows.DataSource = listTuples;
this.rptRows.DataBind();
}
protected void rptRows_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
Repeater rptItems = (Repeater)e.Item.FindControl("rptItems");
Tuple<ImageEntity, ImageEntity, ImageEntity> items = (Tuple<ImageEntity, ImageEntity, ImageEntity>)e.Item.DataItem;
rptItems.DataSource = new List<ImageEntity>() { items.Item1, items.Item2, items.Item3 };
rptItems.DataBind();
}
}
}
Basically, what we are doing here is splitting up the list of URLs into a List of Tuples. The length of the List is the number of "rows" in the outer Repeater. The number of entities in the Tuple is the number of "columns" in the inner Repeater.
Each time we bind an item to the outer Repeater (rptRows_ItemDataBound) , we set the datasource of the inner Repeater to a newly generated list of the URL entities (ImageEntity).
Let me know if this is clear enough, I would be happy to expand and clarify any points that are unclear.

Answer 3

you can use a data list or repeater inside the item template of a listview and and in listview's layout template you can make any layout, div based , table or unsorted list