ASP.Net GridViewのイメージは、列と行にまたがって表示されますか？ C＃を使用して

Question

私はGridviewに表示するいくつかのサムネイルがあります。私は提供されているすべてのカスタマイズに精通していません。基本的には、私はGridviewに画像を保存したいと思っています。多分5列の幅に及んでいます。私は列や行のタイトルを望んでいないし、本当に実際のグリッドの証拠を見たくない。私はまた、画像をクリック可能にしたい。

私はAsp.netのSqlデータベースから画像を取り込みます。グリッドをsqldatasourceにバインドするのではなく、グリッド内の画像をページの背後にあるコードにループを張って貼り付けます。これが私にとって紛らわしい場所です。私はあなたがdatatableを作成し、列と行を追加することができます知っている。しかし、行/列がスパンしないようです。あなたはグリッドのように働くように画像をどのように保存しますか？私はあなたに私がしようとしていることのアイデアを与えるために、以下の（非常に）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

なぜあなたは手動であなたのグリッドを生成しませんか？

Response.Writeステートメントを使用して必要なHTMLを出力するメソッドをコードビハインドに作成します。 .aspxページで、​​を使用してメソッドを呼び出し、適切なグリッドを表示します。

Answer 2

ここで説明した内容はすべて、DataListコントロールを使用することです。 RepeatColumnsプロパティを使用することで、必要な列の幅を指定できます。また、RepeatLayoutプロパティを "Flow"に設定することで、 "tableness"の感覚をなくすこともできます。

これにより、列のカウントを心配する必要がなくなり、画像のコレクションをバインドしてバインドすることもできます。

EDIT：例をリクエストしたので、これほど簡単です。まず、あなたのグリッドを作成し、画像のプレースホルダを持っていることを確認してください。

<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をしたい場合、彼らはあなたがして、水平または垂直に

Answer 4

繰り返し取得するかどうかをどのように定義することができるようになります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を設定することができます。