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

我会使用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>

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实体列表（{{1 }}）。

如果这一点足够清楚，请告诉我，我很乐意扩大并澄清任何不明确的观点。

Answer 3

您可以在列表视图的项目模板中使用数据列表或转发器，并且在listview的布局模板中，您可以制作任何布局，基于div，表格或未排序的列表

显示图片网格？

3 个答案: