none
Style de pagination RRS feed

  • Question

  • Bonjour tout le monde,

    Dans un FormView sur une page webform, j'affiche un produit, avec des panels pour la catégorie et le fournisseur.

    J'ai mis AllowPaging à true donc en bas s'affichent des numéros de pages, en liens hypertexte pour afficher les pages correspondantes en cliquant dessus.

    Lorsque j'ai mis ça en place il n'y avait rien à redire sur cette pagination.

    J'ignore si ça a à voir avec la bagarre que j'ai livrée au plan de site, mais toujours est-il que depuis, les numéros de pages sont collés les uns aux autres, dans le style "12131415", ce qui fait que ça ne signifie plus rien pour l'utilisateur.

    J'ai trouvé des styles pour le contrôle de pagination dans son ensemble, mais pas pour ses éléments. Est-ce qu'en principe pour corriger ça je suis obligé d'écrire tout le template de pagination ?

    Puisque ce sont des liens, je m'en suis sorti comme ça :

    a
    {
        margin-left:5px;
    }

    mais j'avoue que je ne suis pas contre quelque chose d'un peu plus spécifique.



    • Modifié Gloops lundi 3 septembre 2018 09:50
    lundi 3 septembre 2018 09:47

Réponses

  • Bonjour

    Pour les gens qui ne seraient pas effrayés par un accent américain à couper au couteau, voici une vidéo qui explique l'utilisation du contrôle DataPager :

    https://www.youtube.com/watch?v=GDvbkbFAxp8

    Dans cet exemple le contrôle est placé à l'extérieur de ce qu'il doit paginer (en l'occurrence une ListView), et le lien est établi à l'aide de la propriété PagedControlId.

    Je fais pareil en appliquant ça à mon FormView, et là à l'exécution je vois apparaître à l'écran une page d'erreur qui me dit "Le contrôle 'FormView1' n'implémente pas IPageableItemContainer."

    Ce qui confirme ce qu'on avait un peu compris, avec une GridView c'est une bonne idée, mais avec un FormView ça ne marche pas, il semblerait que l'approche que j'ai adoptée pour formater les numéros de pages soit la bonne.

    Si on veut personnaliser davantage on peut s'inspirer de ce qui est dit là :

    Paging in a FormView WebServer Control

    et en adaptant ça aux contrôles numériques de pages, ça donne :

            <PagerTemplate>
                <table>
                    <tr>
                        <td><asp:LinkButton ID="lnkPage14" CommandName="Page" CommandArgument="14" Text="14" runat="server" /></td>
                        <td><asp:LinkButton ID="lnkPage24" CommandName="Page" CommandArgument="24" Text="24" runat="server" /></td>
                    </tr>
                </table>
            </PagerTemplate>

    Je n'ai mis que deux exemples, pour aller aux pages 14 et 24, l'idée serait plutôt de générer ça du côté serveur, en gérant l'intervalle de pages à afficher selon celle qui est à l'écran, un certain nombre avant, un certain nombre après ...

    Là on change complètement d'optique puisque mon objectif était d'éviter de passer du temps là-dessus.

    Donc je laisse comme j'avais mis, avec un style sur a et span avec les sélecteurs CSS plus précis qui vont bien, et le reste c'est pour profiter de l'information collectée à cette occasion, des fois que ça serve à quelqu'un.


    • Modifié Gloops dimanche 9 septembre 2018 12:36
    • Marqué comme réponse Gloops dimanche 9 septembre 2018 12:37
    dimanche 9 septembre 2018 12:34

Toutes les réponses

  • Bonjour Gloops,

    Veuillez consulter le thread How to style a formview pager et les exemples dans cet article - Some Tips and Tricks while Using ASP.NET GridView Paging.

    Cordialement, 
    Nina


    Microsoft propose ce service gratuitement, dans le but d'aider les utilisateurs et d'élargir les connaissances générales liées aux produits et technologies Microsoft. Ce contenu est fourni "tel quel" et il n'implique aucune responsabilité de la part de Microsoft.

    mardi 4 septembre 2018 08:43
    Modérateur
  • Merci, à première vue ça semble être pile ce que je cherche.

    L'intellisense ne semble pas hostile à la démarche ...

    Et ici on enfonce le clou :

    https://stackoverflow.com/questions/5021827/how-to-style-a-formview-pager

    Mais sur la page, on me dit "IPageableItemContainer introuvable. Vérifiez que DataPager se trouve dans un IPageableItemContainer ou que PagedControlID a pour valeur l'ID de contrôle d'un IPageableItemContainer."

    Si je comprends bien, je dois mettre dans la propriété PagedControlID l'identifiant d'un contrôle qui implémente IPageableItemContainer. Si je lui dis FormView1 ça ne lui convient pas.

            <PagerTemplate>
                <asp:DataPager ID="BottomDataPager" runat="server">
                    <Fields>
                        <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
    
                        <asp:NumericPagerField></asp:NumericPagerField>
                        <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
                    </Fields>
                </asp:DataPager>
            </PagerTemplate>

    Et puisque dans plusieurs fils que j'ai consultés sur la question, des intervenants rappellent que FormView n'affiche qu'un enregistrement, et du coup s'étonnent qu'on veuille le paginer, j'anticipe la question : la pagination couvre toute la table, et permet de sélectionner un enregistrement, puisqu'on en a un par page.

    Certes j'ai mis par ailleurs une liste déroulante pour les catégories et une autre pour les produits, avec une sélection en cascade entre elles, la sélection d'un produit dans la deuxième liste déroulante entraînant l'affichage de son détail dans le FormView (en passant par une vue pour connaître le numéro d'enregistrement d'un produit, même si la liste déroulante des produits ne contient que ceux d'une catégorie).

    L'un n'empêche pas l'autre, surtout quand c'est pour s'entraîner : la pagination permet de sélectionner un produit d'après son numéro de rang dans la table.

    C'est fonctionnellement étrange dans l'exemple choisi, de proposer ça à l'utilisateur, mais choisir un enregistrement d'après son rang dans la table, ce n'est pas toujours stupide. Et là, j'essaie de couvrir un maximum de fonctionnalités techniques sans trop me creuser pour trouver un exemple qui fasse vraiment sens d'un point de vue fonctionnel. Afficher des données dans l'ordre de leur création pourrait être un exemple : un enregistrement par page.

    Pour le moment j'ai affiné un peu la feuille de style, en attendant que le DataPager ne lève plus d'exception :

    #MainContent_FormView1 tbody tr td table tr td a,
    #MainContent_FormView1 tbody tr td table tr td span { margin-left: 3px; margin-right: 3px; }


    N.B. Le projet tourne sur .Net 4.6.1

    • Modifié Gloops mardi 4 septembre 2018 11:18
    mardi 4 septembre 2018 10:42
  • Bonjour

    Pour les gens qui ne seraient pas effrayés par un accent américain à couper au couteau, voici une vidéo qui explique l'utilisation du contrôle DataPager :

    https://www.youtube.com/watch?v=GDvbkbFAxp8

    Dans cet exemple le contrôle est placé à l'extérieur de ce qu'il doit paginer (en l'occurrence une ListView), et le lien est établi à l'aide de la propriété PagedControlId.

    Je fais pareil en appliquant ça à mon FormView, et là à l'exécution je vois apparaître à l'écran une page d'erreur qui me dit "Le contrôle 'FormView1' n'implémente pas IPageableItemContainer."

    Ce qui confirme ce qu'on avait un peu compris, avec une GridView c'est une bonne idée, mais avec un FormView ça ne marche pas, il semblerait que l'approche que j'ai adoptée pour formater les numéros de pages soit la bonne.

    Si on veut personnaliser davantage on peut s'inspirer de ce qui est dit là :

    Paging in a FormView WebServer Control

    et en adaptant ça aux contrôles numériques de pages, ça donne :

            <PagerTemplate>
                <table>
                    <tr>
                        <td><asp:LinkButton ID="lnkPage14" CommandName="Page" CommandArgument="14" Text="14" runat="server" /></td>
                        <td><asp:LinkButton ID="lnkPage24" CommandName="Page" CommandArgument="24" Text="24" runat="server" /></td>
                    </tr>
                </table>
            </PagerTemplate>

    Je n'ai mis que deux exemples, pour aller aux pages 14 et 24, l'idée serait plutôt de générer ça du côté serveur, en gérant l'intervalle de pages à afficher selon celle qui est à l'écran, un certain nombre avant, un certain nombre après ...

    Là on change complètement d'optique puisque mon objectif était d'éviter de passer du temps là-dessus.

    Donc je laisse comme j'avais mis, avec un style sur a et span avec les sélecteurs CSS plus précis qui vont bien, et le reste c'est pour profiter de l'information collectée à cette occasion, des fois que ça serve à quelqu'un.


    • Modifié Gloops dimanche 9 septembre 2018 12:36
    • Marqué comme réponse Gloops dimanche 9 septembre 2018 12:37
    dimanche 9 septembre 2018 12:34