ASP.NET : Le ListView pour afficher une liste de données sans grille

On retrouve souvent des pages Web présentant les données sous forme de tableau. Ce format convient pour un grand nombre de situations. Par contre, il arrive parfois qu'on ait besoin d'afficher une liste de données sans pour autant que les informations soient placées en lignes et en colonnes. Le ListView nous permettra d'y parvenir tout en conservant les fonctionnalités avancées offertes par le GridView.

▼Publicité

Voici un exemple de liste qui n'est pas présentée sous forme de grille1.

Exemple de ListView

Pour réaliser cette liste, on a utilisé la source de données suivante :

Fichier .aspx (ASP.NET)

<asp:SqlDataSource ID="dataSourceConseiller" runat="server" 

    ConnectionString="<%$ ConnectionStrings:ConnectionStringVotreSite %>" 

    SelectCommand="SELECT usager_id, usager_prenom+' '+usager_nomfamille AS usager_nomcomplet

    usager_description, usager_photo FROM usager INNER JOIN departement ON usager_dept_id=dept_id WHERE dept_code='ventes' 

    ORDER BY usager_nomfamille, usager_prenom">

</asp:SqlDataSource>

Le ListView suivant permet d'afficher correctement chacun des enregistrements retrouvés par la requête SELECT :

Fichier .aspx (ASP.NET)

<asp:ListView ID="listViewConseillers" runat="server" DataSourceID="dataSourceConseiller" DataKeyNames="usager_id">

    <LayoutTemplate>

        <div class="listeconseillers">

            <ul>

                <%--Ce PlaceHolder sera remplacé par le contenu du ItemTemplate pour chaque enregistrement--%>

                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />

            </ul>

        </div>

    </LayoutTemplate>

    <ItemTemplate>

        <li>

            <div class="ficheconseiller">

                <h3><asp:Label ID="labelNomComplet" runat="server" Text='<%# Eval("usager_nomcomplet") %>' /></h3>

                <div class="photo">

                    <img src='medias/commun/usagers/<%# Eval("usager_photo") %>'

                        alt='<%# Eval("usager_nomcomplet") %>' />

                </div>

     nbsp;           <div class="description">

                    <asp:Label ID="labelDescription" runat="server" Text='<%# Eval("usager_description") %>' />

                </div>

                <div class="push"></div>

            </div>

        </li>

    </ItemTemplate>

</asp:ListView>

Pour plus d'information

« ListView, contrôle ». MSDN. http://msdn.microsoft.com/fr-ca/library/cc295514.aspx#fbid=dRlIMLbJjL7

« Vue d'ensemble du contrôle serveur Web ListView ». MSDN. http://msdn.microsoft.com/fr-fr/library/bb398790.aspx

Sources

1. Les images de cet exemple sont tirées de : « Open Clipart Library ». OpenClipart. http://openclipart.org/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories