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

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

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

编辑：既然你要求一个例子，那就像这样简单。首先创建网格并确保为图像添加占位符：

<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 2

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

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

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

4 个答案: