Как отобразить изображения в нескольких столбцах в виде сетки? - PullRequest
2 голосов
/ 14 августа 2011

Мне нужно отобразить миниатюры изображений в виде сетки в 4 столбцах, например, галерею изображений. Мой источник изображения хранится в одном столбце в моей базе данных. Я буду связывать тех, кто формирует список. Я достиг отображения своих изображений в одном столбце. Но как отобразить мои изображения в нескольких столбцах в виде сетки в виде галереи изображений?

В качестве примера я приложил изображение ниже.

GridView Image gallery Mock

Вот как мои изображения должны отображаться в моем сеточном виде.

1 Ответ

4 голосов
/ 14 августа 2011

Это невозможно с asp:GridView, но вы можете легко добиться этого, используя asp:ListView.
. Для этого вам нужно использовать GroupItemTemplate и GroupItemCount из 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);
    }
}
...