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(); %>
调用您的方法并显示相应的网格。