GridView 中的 ASP.Net 显示图像跨列和行？使用 C#

Question

我想在 Gridview 中显示一些缩略图。我不熟悉提供的所有定制。基本上我想将图像存储在 Gridview 中，可能跨越 5 列宽......然后完成其余的需要多少行。我不想要任何列或行标题，并且真的不想看到实际网格的证据。我还想让图像可点击。

我将从 Asp.net 中的 Sql 数据库中提取图像。我不想将网格绑定到 sqldatasource，而是将图像粘贴在网格中，并在页面后面的代码中使用某种循环。这就是让我感到困惑的地方。我知道您可以创建数据表并添加列和行。但是，似乎行/列不跨越。您将如何存储图像以使其像网格一样工作。我在下面提供了一些（非常）sudo 代码，让您了解我想要做什么。

sudo 代码：

colcount = 0;  
rowcount = 0;  
imagecount = 0;  
while(images.length > imagecount){  
    if(colcount < 5){  
        grid[rowcount][colcount] = images[imagecount];  
        colcount++;  
        imagecount++;  
    }  
    else{  
        rowcount++;
        colcount = 0; 
    }
}  

Answer 1

您可以使用中继器...这样您就可以真正定义每个“行”或“列”的外观以及它们是水平重复还是垂直重复

Answer 2

对于您在此处描述的所有内容，最好的选择是使用 DataList 控件。您可以通过使用RepeatColumns 属性来指定您想要的列宽，您甚至可以通过将RepeatLayout 属性设置为“Flow”来消除任何“tableness”感。

这也让您不必担心列数，您甚至可以绑定一组图像进行绑定。

编辑：既然你要求一个例子，那就这么简单。首先创建你的网格并确保有一个图片的占位符：

<asp:DataList ID="dlImages" runat="server" 
              RepeatColumns="5" 
              RepeatDirection="Horizontal" 
              RepeatLayout="Flow">

   <ItemTemplate>
      <asp:Image ID="imgPrettyPic" runat="server" />
   </ItemTemplate>

</asp:DataList>

然后在您的代码中，您所要做的就是一个简单的数据绑定。我不确定您的图像是如何存储的，但为了争论，假设您有一个数据库查询，它为您提供了您想要显示的每个图像的 URL。您的页面加载将如下所示：

if (!Page.IsPostBack())
{

    dtImageURLs = GetImageUrlsFromDB();
    dlImages.DataSource = dtImageURLs;

    dlImages.DataBind();
}

现在这就是人们会在事情上有所不同的地方。我更喜欢在后面的代码中执行所有 RowBinding 类型的方法，而不是内联，因此我使用 DataList 的 RowDataBound 事件并相应地绑定 URL 属性。

    protected void dlImages_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
   {

       Image TargetImage = default(Image);
       DataRow DataSourceRow = default(DataRow);

       DataSourceRow = ((System.Data.DataRowView)e.Item.DataItem).Row;
       TargetImage = (Image)e.Item.FindControl("imgPrettyPicture");

       TargetImage.ImageUrl = DataSourceRow.Item("ImageURL").ToString;
   }

...这应该可以让您启动并运行。请注意，您需要将 DataSourceRow 对象更改为您从中进行数据绑定的任何类型的项目。我使用的是 DataRow，因为这是我经常遇到的最常见的情况。

Answer 3

如果您想要特定的 HTML，那么您最终会一直与 GridView 作斗争。请改用 ListView 或 Repeater。

<asp:ListView runat="server">
   <LayoutTemplate>
      <table>
         <asp:PlaceHolder id="itemPlaceHolder" runat="server" />
       </table>
   </LayoutTemplate>
   <ItemTemplate>
          <tr>
             <td colspan="5"><asp:Image runat="server" src='<%# Eval("ImageUrl")' %></td>
             <td><%# Eval("Column1") %></td>
          </tr>
   </ItemTemplate>
 </asp:ListView>

我知道您可以创建数据表并添加列和行。但是，行/列似乎没有跨越。

听起来您正在创建 System.Data.DataTable - 这是一种数据结构 - 而不是布局控件。如果您想以编程方式创建<table>，您可以使用System.Web.UI.WebControls.Table 和System.Web.UI.HtmlControls.HtmlTable。您可以在关联的 TableRow 或 HtmlTableRow 上设置 colspan 和 rowspan。

Answer 4

为什么不手动生成网格？

在您的代码隐藏中创建一个方法，使用Response.Write 语句输出必要的 HTML。在.aspx 页面中，使用<% RenderGrid(); %> 调用您的方法并显示相应的网格。