如何在网格视图中的多列中显示图像？

Question

我需要在4个列中的网格视图中显示图像的缩略图，如图库。我的图像源存储在我的数据库中的单个列中。我将绑定那些列表。我已经在一列中显示了我的图像。但是如何在我的网格视图中将多个列中的图像显示为图库？

举个例子，我附上了一张图片。

这就是我的图像必须在我的网格视图中显示的方式。

Answer 1

使用asp:GridView这是不可能的，但您可以使用asp:ListView轻松实现此目的 为此，您必须使用GroupItemCount

的GroupItemTemplate和asp:ListView

使用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>

要实现分页，请在代码隐藏

中执行此操作

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);
    }
}