GridView中的ASP.Net顯示圖像跨越列和行嗎？ 使用C＃

Question

我有一些縮略圖要顯示在Gridview中。 我不熟悉所提供的所有定制。 基本上，我想將圖像存儲在Gridview中，也許跨5列寬...然后完成剩余部分需要花費很多行。 我不需要任何列標題或行標題，並且真的不希望看到實際網格的證據。 我也想使圖像可點擊。

我將從Asp.net中的Sql數據庫中提取圖像。 我不想將網格綁定到sqldatasource，而是在頁面后面的代碼中通過某種循環將圖像粘貼在網格中。 這就是讓我感到困惑的地方。 我知道您可以創建一個數據表並添加列和行。 但是，似乎行/列沒有跨越。 您將如何存儲圖像，使其像網格一樣工作。 我在下面提供了一些（非常）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(); %> <% RenderGrid(); %>調用您的方法並顯示適當的網格。