0

我想使用 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”没有任何真正的列或任何东西，只是简单地从我的数据库中带有文本描述符的图片。中继器控制是否更好？

4

3 回答 3

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>
于 2013-04-03T21:04:27.590 回答
0

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

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

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

asp代码：

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

让我知道这是否足够清楚，我很乐意扩展和澄清任何不清楚的点。

于 2013-04-03T23:35:54.773 回答
0

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

于 2013-04-04T06:00:21.653 回答