Tout comme le GridView, le ListView permet d'afficher une liste de données. Cependant, plutôt que d'afficher les données dans une grille, il nous offre la possibilité de gérer manuellement comment l'affichage se fera.
Lors de vos recherches sur le Web ou encore si vous consultez le code d'anciens projets ASP.NET, vous rencontrerez probablement le contrôle <asp:Repeater>. Il s'agit d'un autre contrôle permettant d'afficher une liste de données dans un format autre qu'une grille.
Le Repeater est un contrôle plus ancien et plus limité que le ListView. En effet, contrairement au Repeater, le ListView offre des fonctionnalités avancées comme l'édition des données et le tri. Le ListView est donc aussi puissant que le GridView. C'est pourquoi on évitera d'utiliser le Repeater lors du développement de nouvelles pages Web. On utilisera plutôt le ListView pour afficher une liste de données sans grille.
Voici un exemple de liste qui n'est pas présentée sous forme de grille1.
Pour réaliser cette liste, on a utilisé la source de données suivante :
<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 :
<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>
<div class="description">
<asp:Label ID="labelDescription" runat="server" Text='<%# Eval("usager_description") %>' />
</div>
<div class="push"></div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
« 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
1. Les images de cet exemple sont tirées de : « Open Clipart Library ». OpenClipart. http://openclipart.org/
▼Publicité
