显示图片网格？

Question

我想使用 GridView 来绑定图片列表。我已经可以做到这一点，但我需要控制网格的宽度。

如果它是一张桌子，那就很简单了：

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

我希望“gridview”没有任何真正的列或任何东西，只是简单地从我的数据库中带有文本描述符的图片。中继器控制是否更好？

Answer 1

您可以在列表视图的项目模板中使用数据列表或中继器，并且在列表视图的布局模板中，您可以进行任何布局、基于 div、表格或未排序列表

Answer 2

根据我对您问题的理解，您希望将图像以 表格以外的形式输出。

DataList 控件具有内置功能，可让您的生活更轻松。即RepeatColumns和RepeatLayout。 @Hanlet 的回答很好地解释了这一点。根据我对您问题的理解，他的答案的问题在于他只展示了如何以表格形式输出。正如我之前解释的那样，这 不是 您正在寻找的。 DataList 可以以不同的方式显示输出：RepeatLayout="Flow"。这种方法的潜在问题是布局僵化。它不允许您更改它的显示方式。它使用<span> 和<br /> 标签来显示数据。虽然这个 可以 使用 CSS 设置样式，但它仍然有些限制。如果您选择 Flow 而不是 Table，Hanlet 的答案的输出如下所示：

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

话虽如此，如果您想对Repeater 提供的布局进行无限控制，有一种方法可以做到这一点。使用两个Repeaters：

aspx代码：

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

代码隐藏：

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

基本上，我们在这里所做的是将 URL 列表拆分为 Tuples 的列表。 List 的长度是外部Repeater 中的“行”数。 Tuple 中的实体数是内部Repeater 中的“列”数。

每次我们将一个项目绑定到外部 Repeater (rptRows_ItemDataBound) 时，我们都会将内部 Repeater 的数据源设置为新生成的 URL 实体列表 (ImageEntity)。

如果这足够清楚，请告诉我，我很乐意扩展和澄清任何不清楚的点。

Answer 3

我会使用DataList 控件。 DataList 控件具有非常有用的属性，称为 RepeatColumns 和 RepeatLayout，它们允许您做您需要的事情。

标记：

<asp:DataList ID="DataList1" runat="server" RepeatColumns="3">
    <ItemTemplate>
    <img src="<%#Eval("url") %>" />
    </ItemTemplate>
</asp:DataList>

示例类：

public class Sample
{
    public string url { get; set; }
}

绑定数据列表：

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();

}

结果：包含 2 行 3 列的 HTML 表格，每列显示 google 图像。

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