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

我有一些想要在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; } } 

你可以使用转发器……这样你就可以真正定义每个“行”或“列”的样子,以及它们是水平还是垂直重复

对于您在此处描述的所有内容,您最好的选择是使用DataList控件。 您可以使用RepeatColumns属性指定您希望事物的宽度,并通过将RepeatLayout属性设置为“Flow”来消除任何“tableness”感。

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

编辑:既然你要求一个例子,它就会这么简单。 首先创建网格并确保为图像添加占位符:

      

然后在你的代码背后,你所要做的就是一个简单的数据绑定。 我不确定你的图像是如何存储的,但是为了论证,假设你有一个数据库查询,它为你提供了你想要显示的每个图像的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,因为这是我经常遇到的最常见的情况。

如果你想要特定的HTML,那么你最终会在一段时间内与GridView作斗争。 请改用ListView或Repeater。

   
<%# Eval("Column1") %>

我知道你可以创建一个数据表并添加列和行。 但是,似乎行/列不会跨越。

听起来你正在创建一个System.Data.DataTable – 这是一个数据结构 – 而不是布局控件。 如果要以编程方式创建

,可以使用System.Web.UI.WebControls.Table一个System.Web.UI.HtmlControls.HtmlTable 。 您可以在关联的TableRow或HtmlTableRow上设置colspan和rowspan。

为什么不手动生成网格?

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