グリッドビューで複数の列に画像を表示する方法は？

Question

画像のサムネイルを画像ギャラリーのような4列のグリッドビューに表示する必要があります。私のイメージソースはデータベースの単一の列に格納されています。私はそれらのリストを拘束します。私は単一の列に自分のイメージを表示することを達成しました。しかし、画像ギャラリーとして私のグリッドビューの複数の列に私の画像を表示する方法は？

例として、以下の画像を添付しました。

これは私のイメージは私のGridViewに表示する必要がある方法です。

Answer 1

asp:GridViewでは不可能ですが、asp:ListViewを使用すると簡単にこれを達成できます。そのために
あなたはページングを実装するためにasp:DataPager

<asp:DataPager ID="TopPager" runat="server" 
     PageSize="10" 
     PagedControlID="ImagesList"> 
    <Fields> 
     <asp:NextPreviousPagerField PreviousPageText="Previous" 
          RenderDisabledButtonsAsLabels="true" 
          RenderNonBreakingSpacesBetweenControls="true" 
          ShowFirstPageButton="false" 
          ShowNextPageButton="false" 
          ShowLastPageButton="false" 
          ShowPreviousPageButton="true" /> 
     <asp:NumericPagerField ButtonCount="10" 
         CurrentPageLabelCssClass="current" 
          RenderNonBreakingSpacesBetweenControls="true"/> 
     <asp:NextPreviousPagerField NextPageText="Next" 
          RenderDisabledButtonsAsLabels="true" 
          ShowFirstPageButton="false" 
          ShowPreviousPageButton="false" 
          ShowNextPageButton="true" 
          ShowLastPageButton="false" /> 
    </Fields> 
</asp:DataPager> 
<asp:ListView ID="ImagesList" runat="server" 
      DataKeyNames="MyImageID" 
      GroupItemCount="4" 
      OnPagePropertiesChanging="ImagesList_PagePropertiesChanging"> 
    <EmptyDataTemplate> 
     No Images found. 
    </EmptyDataTemplate> 
    <LayoutTemplate> 
     <table> 
      <tr runat="server" id="groupPlaceholder" /> 
     </table> 
    </LayoutTemplate> 
    <GroupTemplate> 
     <tr> 
      <td runat="server" id="itemPlaceholder" /> 
     </tr> 
    </GroupTemplate> 
    <ItemTemplate> 
     <td> 
      <asp:Image ID="MyPicture" runat="server" 
        AlternateText='<%# Eval("MyAltText") %>' 
        ImageUrl='<%# Eval("MyImageUrl") %>' /> 
     </td> 
    </ItemTemplate> 
</asp:ListView> 
    <asp:DataPager ID="BottomPager" runat="server" 
       PageSize="10" 
       PagedControlID="ImagesList"> 
     <Fields> 
      <asp:NextPreviousPagerField PreviousPageText="Previous" 
           RenderDisabledButtonsAsLabels="true" 
           RenderNonBreakingSpacesBetweenControls="true" 
           ShowFirstPageButton="false" 
           ShowNextPageButton="false" 
           ShowLastPageButton="false" 
           ShowPreviousPageButton="true"/> 
      <asp:NumericPagerField ButtonCount="10" 
           CurrentPageLabelCssClass="current" 
           RenderNonBreakingSpacesBetweenControls="true"/> 
      <asp:NextPreviousPagerField NextPageText="Next" 
           RenderDisabledButtonsAsLabels="true" 
           ShowFirstPageButton="false" 
           ShowPreviousPageButton="false" 
           ShowNextPageButton="true" 
           ShowLastPageButton="false" /> 
     </Fields> 
    </asp:DataPager> 

でasp:ListViewを使用してasp:ListView

サンプルコードのGroupItemTemplateとGroupItemCountを使用し、する必要があり、コードビハインドで

protected void ImagesList_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e) 
{ 
    try 
    { 
     TopPager.SetPageProperties(e.StartRowIndex, e.MaximumRows, false); 
     BottomPager.SetPageProperties(e.StartRowIndex, e.MaximumRows, false); 
    } 
    catch (Exception exception) 
    { 
     //Elmah.ErrorSignal.FromCurrentContext().Raise(exception); 
    } 
}