Vue d'ensemble du contrôle serveur Web ListView

Article
10/22/2014

Mise à jour : novembre 2007

Le contrôle d'ASP.NET ListView vous permet de créer une liaison avec les éléments de données retournés d'une source de données et de les afficher. Vous pouvez afficher des données sur des pages. Vous pouvez afficher des éléments individuellement ou les regrouper.

Le contrôle ListView affiche les données dans un format que vous définissez à l'aide de modèles et de styles. Ce contrôle s'avère utile pour les données contenues dans une structure à répétition, de la même manière que les contrôles DataList et Repeater. Toutefois, contrairement à ces contrôles, le contrôle ListView permet aux utilisateurs de modifier, d'insérer, de supprimer, de trier et de paginer des données, tout cela sans utiliser de code.

Cette rubrique contient les sections suivantes :

Liaison de données au contrôle ListView
Création de modèles pour le contrôle ListView
Pagination de données
Tri des données
Modification des données
Application de styles aux éléments ListView
Référence de classe
Exemples de code
Ressources supplémentaires

Liaison de données au contrôle ListView

Vous pouvez lier le contrôle ListView aux données en procédant comme suit :

En utilisant la propriété DataSourceID. Cela vous permet de lier le contrôle ListView à un contrôle de source de données, tel que SqlDataSource. Cette approche est conseillée car elle permet au contrôle ListView de tirer parti des fonctions du contrôle de source de données. Elle fournit également des fonctionnalités intégrées de tri, de pagination, d'insertion, de suppression et de mise à jour. Cette approche vous permet également d'utiliser des expressions de liaison bidirectionnelles. Pour plus d'informations sur les contrôles de source de données, consultez Vue d'ensemble des contrôles de source de données.
En utilisant la propriété DataSource. Cela vous permet de créer une liaison avec différents objets, notamment des groupes de données et des lecteurs de données ADO.NET ainsi que des structures en mémoire telles que des collections. Cette approche requiert que vous écriviez le code de toute fonctionnalité supplémentaire, telle que le tri, la pagination et la mise à jour.

Retour au début

Création de modèles pour le contrôle ListView

Les éléments affichés par un contrôle ListView sont définis par des modèles, de la même façon que les contrôles DataList et Repeater. Le contrôle ListView vous permet d'afficher des données sous forme d'éléments individuels ou dans des groupes.

Définissez la mise en page principale (racine) d'un contrôle ListView en créant un modèle LayoutTemplate. LayoutTemplate doit inclure un contrôle qui agit comme un espace réservé pour les données. Par exemple, le modèle de mise en page peut inclure un contrôle ASP.NET Table, Panel ou Label. (Il peut inclure également des éléments HTML table, div ou span dont l'attribut runat a la valeur "server".) Ces contrôles contiendront la sortie de chaque élément tel que défini par le modèle ItemTemplate, qui peuvent être regroupées dans le contenu défini par le modèle GroupTemplate.

Définissez le contenu d'éléments individuels dans le modèle ItemTemplate. Ce modèle contient en général des contrôles qui sont liés aux données de colonnes de données ou d'autres éléments de données individuels.

Regroupement d'éléments

Vous pouvez éventuellement regrouper des éléments dans un contrôle ListView à l'aide du modèle GroupTemplate. En général, vous pouvez regrouper des éléments pour créer une mise en page de tableau en mosaïque. Dans ce type de mise en page, les éléments sont répétés dans une ligne autant de fois que la propriété GroupItemCount le spécifie. Pour créer une mise en page de tableau en mosaïque, le modèle de mise en page peut contenir un contrôle ASP.NET Table ou un élément HTML table dont l'attribut runat a la valeur "server." Ainsi, le modèle de groupe peut contenir un contrôle ASP.NET TableRow (ou un élément HTML tr). Le modèle d'élément peut contenir des contrôles individuels qui figurent à l'intérieur d'un contrôle ASP.NET TableCell (ou un élément HTML td).

Vous pouvez utiliser le modèle EditItemTemplate pour fournir une interface utilisateur liée aux données qui permet aux utilisateurs de modifier des éléments de données existants. Vous pouvez utiliser le modèle InsertItemTemplate pour définir une interface utilisateur liée aux données qui permet aux utilisateurs d'ajouter un nouvel élément de données. Pour plus d'informations, consultez Modification de données plus loin dans cette rubrique.

Modèles disponibles

Le tableau suivant répertorie tous les modèles utilisés avec le contrôle ListView.

LayoutTemplate
Identifie le modèle racine qui définit la mise en page principale du contrôle. Il contient un objet d'espace réservé, tel qu'une ligne de tableau (tr), l'élément div ou span. Cet élément sera remplacé par le contenu défini dans le modèle ItemTemplate ou GroupTemplate. Il peut contenir également un objet DataPager.
ItemTemplate
Identifie le contenu lié aux données à afficher pour les éléments uniques.
ItemSeparatorTemplate
Identifie le contenu à restituer entre des éléments uniques.
GroupTemplate
Identifie le contenu de la mise en page de groupe. Il contient un objet d'espace réservé, comme une cellule de tableau (td), div ou span, qui sera remplacé par le contenu défini dans les autres modèles, comme les modèles ItemTemplate et EmptyItemTemplate.
GroupSeparatorTemplate
Identifie le contenu à rendre entre des groupes d'éléments.
EmptyItemTemplate
Identifie le contenu à rendre pour un élément vide lorsqu'un modèle GroupTemplate est utilisé. Par exemple, si la propriété GroupItemCount a la valeur 5 et que le nombre total d'éléments retournés à partir de la source de données est 8, la dernière ligne de données affichée par le contrôle ListView contiendra trois éléments comme spécifié par le modèle ItemTemplate et deux éléments comme spécifié par le modèle EmptyItemTemplate.
EmptyDataTemplate
Identifie le contenu à restituer si la source de données ne retourne pas de données.
SelectedItemTemplate
Identifie le contenu à rendre pour l'élément de données sélectionné afin de différencier cet élément des autres éléments affichés.
AlternatingItemTemplate
Identifie le contenu à rendre pour les éléments de remplacement afin de faciliter la distinction entre des éléments consécutifs.
EditItemTemplate
Identifie le contenu à rendre lorsqu'un élément est modifié. Le modèle EditItemTemplate est rendu à la place du modèle ItemTemplate pour l'élément de données modifié.
InsertItemTemplate
Identifie le contenu à rendre lorsqu'un élément est inséré. Le modèle InsertItemTemplate est rendu à la place d'un modèle ItemTemplate au début ou à la fin des éléments affichés par le contrôle ListView. Vous pouvez spécifier l'emplacement où le modèle InsertItemTemplate est rendu à l'aide de la propriété InsertItemPosition du contrôle ListView.

Création d'un modèle d'élément

L'exemple suivant indique la structure de base d'un modèle d'élément.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table  id="table1"  >
      <tr  id="itemPlaceholder" ></tr>
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <tr runat="server>
      <td >
        <%-- Data-bound content. --%>
        <asp:Label ID="NameLabel"  
          Text='<%#Eval("Name") %>' />
      </td>
    </tr>
  </ItemTemplate>
</asp:ListView>

Pour afficher des éléments individuellement, ajoutez un contrôle côté serveur au modèle LayoutTemplate et affectez la valeur itemPlaceholder à la propriété ID du contrôle. Ce contrôle constitue uniquement un espace réservé pour les autres modèles, généralement le modèle ItemTemplate. Par conséquent, ce contrôle sera remplacé par le contenu des autres modèles au moment de l'exécution.

Remarque :
Vous pouvez modifier la valeur de la propriété ID utilisée pour identifier le conteneur d'éléments en affectant une nouvelle valeur à la propriété ItemPlaceholderID.

Après avoir défini le modèle de disposition, ajoutez un modèle ItemTemplate qui contient en général des contrôles pour afficher le contenu lié aux données. Vous pouvez spécifier la balise à utiliser pour afficher chaque élément à l'aide de la méthode Eval afin de lier les contrôles aux valeurs de la source de données. Pour plus d'informations sur la méthode Eval, consultez Vue d'ensemble des expressions de liaison de données.

Vous pouvez fournir davantage de contenu à restituer en utilisant le modèle ItemSeparatorTemplate, qui identifie le contenu à inclure entre des éléments.

L'illustration suivante indique une disposition qui affiche des données de la source de données en utilisant plusieurs lignes de tableau par élément.

L'exemple suivant indique comment créer la disposition.

<asp:ListView  ID="EmployeesListView" 
    DataSourceID="EmployeesDataSource" 
    DataKeyNames="EmployeeID">
  <LayoutTemplate>
    <table cellpadding="2"  id="tblEmployees" 
        style="width:460px">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="3">
      <Fields>
        <asp:NumericPagerField
          ButtonCount="5"
          PreviousPageText="<--"
          NextPageText="-->" />
      </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
     <tr >
       <td valign="top" colspan="2" align="center" 
           class="EmployeeName">
         <asp:Label ID="FirstNameLabel"  
           Text='<%#Eval("FirstName") %>' />
         <asp:Label ID="LastNameLabel"  
           Text='<%#Eval("LastName") %>' />
       </td>
     </tr>
     <tr style="height:72px" >
       <td valign="top" class="EmployeeInfo">
         <asp:Label ID="JobTitleLabel"  
             Text='<%#Eval("JobTitle") %>' />
         <br />
         <asp:HyperLink ID="EmailAddressLink"  
             Text='<%#Eval("EmailAddress") %>'  
             href='<%#"mailto:" + Eval("EmailAddress") %>' />
         <br />
         <asp:Label ID="PhoneLabel"  
             Text='<%#Eval("Phone") %>' />
       </td>
       <td valign="top" class="EmployeeAddress">
         <asp:Label ID="AddressLine1Label"  
             Text='<%#Eval("AddressLine1") %>' />
         <br />
         <asp:Panel ID="AddressLine2Panel"  
            Visible='<%#Eval("AddressLine2").ToString() != String.Empty %>'>
         <asp:Label ID="AddressLine2Label"  
            Text='<%#Eval("AddressLine2").ToString()%>'  />
         <br />
         </asp:Panel>
         <asp:Label ID="CityLabel"  
           Text='<%#Eval("City") %>' />,
         <asp:Label ID="StateProvinceNameLabel"  
           Text='<%#Eval("StateProvinceName") %>' />
         <asp:Label ID="PostalCodeLabel"  
           Text='<%#Eval("PostalCode") %>' />
         <br />
         <asp:Label ID="CountryRegionNameLabel"  
           Text='<%#Eval("CountryRegionName") %>' />
       </td>
     </tr>
   </ItemTemplate>
</asp:ListView>

Création d'un modèle de groupe

L'exemple suivant indique comment créer un modèle de groupe.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1" 
    GroupItemCount="5">
  <LayoutTemplate>
    <table  id="table1">
      <tr  id="groupPlaceholder">
      </tr>
    </table>
  </LayoutTemplate>
  <GroupTemplate>
    <tr  id="tableRow">
      <td  id="itemPlaceholder" />
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td >
      <%-- Data-bound content. --%>
      <asp:Label ID="NameLabel"  
          Text='<%#Eval("Name") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

Pour afficher des éléments dans des groupes, utilisez un contrôle serveur dans le modèle LayoutTemplate pour qu'il agisse comme un espace réservé pour le groupe. Par exemple, vous pouvez utiliser un contrôle TableRow. Affectez la valeur groupPlaceholder à la propriété ID du contrôle d'espace réservé. Au moment de l'exécution, ce contrôle d'espace réservé sera remplacé par le contenu du modèle GroupTemplate.

Ajoutez ensuite un contrôle d'espace réservé et affectez la valeur itemPlaceholder à sa propriété ID. Ce contrôle constitue uniquement un espace réservé pour les autres modèles, généralement le modèle ItemTemplate. Par conséquent, ce contrôle sera remplacé par le contenu des autres modèles au moment de l'exécution. Le contenu est répété autant de fois qu'il existe d'éléments spécifiés par la propriété GroupItemCount du contrôle ListView.

Enfin, ajoutez un modèle ItemTemplate avec le contenu lié aux données pour y afficher le contrôle conteneur de chaque élément.

Remarque :
Vous pouvez modifier la valeur de la propriété ID utilisée pour identifier l'espace réservé de groupe en affectant une nouvelle valeur à la propriété GroupPlaceholderID.

Vous pouvez spécifier un séparateur entre des éléments en utilisant le modèle ItemSeparatorTemplate. Vous pouvez spécifier un séparateur entre des groupes en utilisant la propriété GroupSeparatorTemplate.

L'illustration suivante indique une disposition qui affiche plusieurs éléments de la source de données par ligne.

L'exemple suivant indique comment créer la disposition.

<asp:ListView  ID="ProductsListView"
    GroupItemCount="3"
    DataSourceID="ProductsSqlDataSource" DataKeyNames="ProductID">
  <LayoutTemplate>
    <table cellpadding="2" 
           id="tblProducts" style="height:320px">
      <tr  id="groupPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager"
                   PageSize="9">
       <Fields>
         <asp:NumericPagerField ButtonCount="3"
              PreviousPageText="<--"
              NextPageText="-->" />
       </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <GroupTemplate>
    <tr  id="productRow"
        style="height:80px">
      <td  id="itemPlaceholder">
      </td>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td valign="top" align="center" style="width:100" >
      <asp:Image ID="ProductImage" 
           ImageUrl='<%#"~/images/thumbnails/" + 
               Eval("ThumbnailPhotoFileName") %>'
           Height="49" /><br />
      <asp:HyperLink ID="ProductLink" 
           Target="_blank" Text='<% #Eval("Name")%>'
           href='<%#"ShowProduct.aspx?ProductID=" + 
              Eval("ProductID") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

Retour au début

Pagination de données

Pour permettre aux utilisateurs de paginer des données dans un contrôle ListView, vous pouvez utiliser un contrôle DataPager. Le contrôle DataPager peut figurer à l'intérieur du modèle LayoutTemplate ou sur la page, en dehors du contrôle ListView. Si le contrôle DataPager ne figure pas dans le contrôle ListView, vous devez affecter l'ID du contrôle ListView à la propriété PagedControlID.

Le contrôle DataPager prend en charge l'interface utilisateur de pagination intégrée. Vous pouvez utiliser l'objet NumericPagerField, qui permet aux utilisateurs de sélectionner une page de données par numéro de page. Vous pouvez également utiliser l'objet NextPreviousPagerField. Cette opération permet aux utilisateurs de passer d'une page de données à une autre ou d'accéder à la première ou à la dernière page de données. La taille des pages de données est définie à l'aide de la propriété PageSize du contrôle DataPager. Vous pouvez utiliser un ou plusieurs objets de champ du pagineur dans un contrôle DataPager unique.

Vous pouvez également créer une interface utilisateur de pagination personnalisée à l'aide de l'objet TemplatePagerField. Dans le modèle TemplatePagerField, vous pouvez référencer le contrôle DataPager à l'aide de la propriété Container. Cette propriété fournit l'accès aux propriétés du contrôle DataPager. Ces propriétés incluent l'index de ligne initial, la taille de la page et le nombre total de lignes actuellement liées au contrôle ListView.

L'exemple suivant illustre une classe DataPager incluse dans le modèle LayoutTemplate d'un contrôle ListView.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table  id=" table1">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="5">
        <Fields>
          <asp:NumericPagerField ButtonCount="10"
               PreviousPageText="<--"
               NextPageText="-->" />
        </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <tr >
      <%-- Data-bound content. --%>
    </tr>
  </ItemTemplate>
</asp:ListView>

L'illustration suivante présente une disposition qui affiche des liens vers des pages de données en se basant sur leur numéro de page, à l'aide de l'objet NumericPagerField.

L'exemple suivant indique comment créer la disposition.

<asp:DataPager  ID="DataPager" PageSize="10">
  <Fields>
    <asp:NumericPagerField ButtonCount="10"
         CurrentPageLabelCssClass="CurrentPage"
         NumericButtonCssClass="PageNumbers"
         NextPreviousButtonCssClass="PageNumbers" NextPageText=" > "
         PreviousPageText=" < " />
  </Fields>
</asp:DataPager>

L'illustration suivante présente une interface utilisateur de pagination qui affiche des liens vers les pages suivantes et précédentes et vers la première et la dernière page des données à l'aide de l'objet NextPreviousPagerField. L'interface utilisateur de pagination inclut également le contenu personnalisé d'un modèle TemplatePagerField, qui affiche la plage de numéros d'éléments actuelle et le nombre total d'éléments. Le modèle TemplatePagerField inclut une zone de texte où les utilisateurs peuvent entrer le numéro d'un élément vers lequel effectuer un déplacement. L'élément spécifié s'affiche en tant que premier élément de la page.

L'exemple suivant indique comment créer l'interface utilisateur de pagination.

<asp:DataPager  ID="EmployeesDataPager" PageSize="8">
  <Fields>
    <asp:TemplatePagerField>
      <PagerTemplate>
        &nbsp;
        <asp:TextBox ID="CurrentRowTextBox" 
             AutoPostBack="true"
             Text="<%# Container.StartRowIndex + 1%>" 
             Columns="1" 
             style="text-align:right" 
             OnTextChanged="CurrentRowTextBox_OnTextChanged" />
        to
        <asp:Label ID="PageSizeLabel"  Font-Bold="true"
             Text="<%# Container.StartRowIndex + Container.PageSize > Container.TotalRowCount ? Container.TotalRowCount : Container.StartRowIndex + Container.PageSize %>" />
        of
        <asp:Label ID="TotalRowsLabel"  Font-Bold="true"
             Text="<%# Container.TotalRowCount %>" />
      </PagerTemplate>
    </asp:TemplatePagerField>
    <asp:NextPreviousPagerField 
         ShowFirstPageButton="true" ShowLastPageButton="true"
         FirstPageText="|<< " LastPageText=" >>|"
         NextPageText=" > " PreviousPageText=" < " />
  </Fields>
</asp:DataPager>

L'exemple suivant illustre le gestionnaire d'événements de l'événement TextChanged du contrôle TextBox inclus dans le modèle TemplatePagerField. Le code du gestionnaire se déplace vers l'élément de données spécifié par l'utilisateur.

Protected Sub CurrentRowTextBox_OnTextChanged(ByVal sender As Object, _
        ByVal e As EventArgs) 
    Dim t As TextBox = CType(sender, TextBox)
    Dim pager As DataPager = _
        CType(EmployeesListView.FindControl("EmployeesDataPager"), _
        DataPager)
    pager.SetPageProperties(Convert.ToInt32(t.Text) - 1, _
        pager.PageSize, True)
End Sub

protected void CurrentRowTextBox_OnTextChanged(object sender, 
    EventArgs e)
{
    TextBox t = (TextBox)sender;
    DataPager pager = 
        (DataPager)EmployeesListView.FindControl("EmployeesDataPager");
    pager.SetPageProperties(Convert.ToInt32(t.Text) - 1, 
         pager.PageSize, true);
}

Retour au début

Tri des données

Vous pouvez trier les données affichées dans un contrôle ListView en ajoutant un bouton au modèle LayoutTemplate et en attribuant la valeur "Sort" à la propriété CommandName du bouton. Affectez à la propriété CommandArgument du bouton le nom de la colonne sur laquelle vous souhaitez effectuer un tri. Cliquer à plusieurs reprises sur le bouton Trier permet de basculer le sens de tri entre Ascending et Descending.

Vous pouvez spécifier plusieurs noms de colonne dans la propriété CommandArgument du bouton Trier. Toutefois, le contrôle ListView applique le sens de tri à toute la liste de colonnes. Par conséquent, le sens de tri ne s'applique qu'à la dernière colonne de la liste. Par exemple, si CommandArgument contient "LastName, FirstName", cliquer à plusieurs reprises sur le bouton Trier génère une expression de tri comme "LastName, FirstName ASC" (ordre croissant) ou "LastName, FirstName DESC" (ordre décroissant).

L'exemple suivant illustre un contrôle ListView qui inclut un bouton Trier pour trier les données par nom.

<asp:ListView  ID="ListView1" DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <asp:LinkButton  ID="SortButton" 
         Text="Sort" CommandName="Sort" CommandArgument="LastName" />
    <table  id="table1">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="20">
        <Fields>
          <asp:NumericPagerField ButtonCount="10"
               PreviousPageText="<--"
               NextPageText="-->" />
        </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <tr >
      <td><asp:Label  ID="FirstNameLabel" 
               Text='<%# Eval("FirstName")' /></td>
      <td><asp:Label  ID="LastNameLabel" 
               Text='<%# Eval("LastName")' /></td>
    </tr>
  </ItemTemplate>
</asp:ListView>

Définition dynamique de l'expression de tri

Vous pouvez créer un tri personnalisé en définissant de manière dynamique l'expression de tri d'un contrôle ListView. Pour ce faire, appelez la méthode Sort ou gérez l'événement Sorting.

L'exemple suivant illustre un gestionnaire pour l'événement Sorting. Le code applique le même sens de tri à toutes les colonnes de la propriété SortExpression.

Protected Sub ContactsListView_Sorting(ByVal sender As Object, _
        ByVal e As ListViewSortEventArgs)

    If (String.IsNullOrEmpty(e.SortExpression)) Then Return

    Dim direction As String = ""
    If Not (ViewState("SortDirection") Is Nothing) Then
        direction = ViewState("SortDirection").ToString()
    End If
    
    If direction = "ASC" Then
        direction = "DESC"
    Else
        direction = "ASC"
    End If

    ViewState("SortDirection") = direction

    Dim sortColumns As String() = e.SortExpression.Split(","c)
    Dim sortExpression As String = sortColumns(0) & " " & direction
    Dim i As Integer
    For i = 1 To sortColumns.Length - 1
        sortExpression += ", " & sortColumns(i) & " " & direction
    Next i
    e.SortExpression = sortExpression
    
  End Sub

protected void EmployeesListView_OnSorting(object sender, 
        ListViewSortEventArgs e)
{
    if (String.IsNullOrEmpty(e.SortExpression)) { return; }
    string direction = "";
    if (ViewState["SortDirection"] != null)
        direction = ViewState["SortDirection"].ToString();

    if (direction == "ASC")
        direction = "DESC";
    else
        direction = "ASC";

    ViewState["SortDirection"] = direction;

    string[] sortColumns = e.SortExpression.Split(',');
    string sortExpression = sortColumns[0] + " " + direction;
    for (int i = 1; i < sortColumns.Length; i++)
        sortExpression += ", " + sortColumns[i] + " " + direction;
    e.SortExpression = sortExpression;
}

Retour au début

Modification des données

Vous pouvez créer des modèles pour le contrôle ListView qui permettent aux utilisateurs de modifier, d'insérer ou de supprimer un élément de données unique.

Pour permettre aux utilisateurs de modifier un élément de données, vous pouvez ajouter un modèle EditItemTemplate au contrôle ListView. Lorsqu'un élément bascule en mode Édition, le contrôle ListView affiche l'élément à l'aide du modèle de modification. Le modèle doit inclure des contrôles liés aux données dans lesquels l'utilisateur peut modifier des valeurs. Il peut inclure par exemple des zones de texte dans lesquelles les utilisateurs peuvent modifier des valeurs existantes.

Pour permettre aux utilisateurs d'insérer un nouvel élément, vous pouvez ajouter un modèle InsertItemTemplate au contrôle ListView. Tout comme le modèle de modification, le modèle d'insertion doit inclure des contrôles liés aux données qui permettent d'entrer des données. Le modèle InsertItemTemplate est restitué au début ou à la fin des éléments affichés. Spécifiez l'emplacement où le modèle InsertItemTemplate est restitué à l'aide de la propriété InsertItemPosition du contrôle ListView.

En général, vous pouvez ajouter des boutons aux modèles pour permettre aux utilisateurs de spécifier l'action qu'ils souhaitent effectuer. Par exemple, vous pouvez ajouter un bouton Supprimer à un modèle d'élément pour permettre aux utilisateurs de supprimer cet élément.

Vous pouvez ajouter un bouton Modifier à un modèle d'élément pour permettre à l'utilisateur de basculer en mode Édition. Dans EditItemTemplate, vous pouvez inclure un bouton Mettre à jour qui permet aux utilisateurs d'enregistrer leurs modifications. Vous pouvez également inclure un bouton Annuler qui permet aux utilisateurs de revenir en mode d'affichage sans enregistrer leur modifications.

Définissez l'action qu'un bouton effectuera en définissant la propriété CommandName de ce bouton. Le tableau suivant répertorie les valeurs de la propriété CommandName pour lesquelles le contrôle ListView dispose d'un comportement intégré.

Select
Affiche le contenu du modèle SelectedItemTemplate pour l'élément sélectionné.
Insert
Dans un modèle InsertItemTemplate, spécifie que le contenu de contrôles liés aux données doit être enregistré dans la source de données.
Edit
Spécifie que le contrôle ListView doit basculer en mode Édition et afficher l'élément en utilisant le modèle EditItemTemplate.
Update
Dans un modèle EditItemTemplate, spécifie que le contenu de contrôles liés aux données doit être enregistré dans la source de données.
Delete
Supprime l'élément actuel de la source de données.
Cancel
Annule l'action en cours. Lorsque le modèle EditItemTemplate est affiché, l'annulation de l'action affiche le modèle SelectedItemTemplate si l'élément correspond à l'élément actuellement sélectionné. Sinon, le modèle ItemTemplate est affiché. Lorsque le modèle InsertItemTemplate est affiché, l'annulation de l'action affiche un modèle InsertItemTemplate vide.
(Valeur personnalisée)
Par défaut, n'effectue aucune action. Vous pouvez indiquer une valeur personnalisée pour la propriété CommandName. Dans l'événement ItemCommand, vous pouvez ensuite tester la valeur et adopter la bonne marche à suivre.

Pour obtenir l'exemple d'un contrôle ListView configuré pour permettre la modification, la suppression et l'insertion de données, consultez Procédure pas à pas : modification de données à l'aide du contrôle serveur Web ListView.

Retour au début

Application de styles aux éléments ListView

Le contrôle ListView ne prend pas en charge les propriétés de style telles que BackColor et Font. Pour appliquer des styles au contrôle ListView, vous devez utiliser des classes de feuilles de style en cascade (CSS) ou des éléments de style intraligne pour les contrôles individuels dans les modèles ListView.

Certains objets prennent en charge des propriétés qui vous permettent d'appliquer un style aux éléments de la sortie. Par exemple, l'objet NumericPagerField inclut les propriétés suivantes :

Une propriété NumericButtonCssClass qui vous permet de spécifier le nom de classe CSS des boutons via lesquels vous pouvez accéder aux pages de données en fonction de leur numéro.
Une propriété CurrentPageLabelCssClass qui vous permet de spécifier le nom de classe CSS du numéro de page active.
Une propriété NextPreviousButtonCssClass qui vous permet de spécifier le nom de classe CSS des boutons via lesquels vous pouvez accéder au groupe de boutons numériques suivant ou précédent.

Retour au début

Référence de classe

Le tableau suivant répertorie les classes clés associées au contrôle ListView.

Classe	Description
ListView	Contrôle serveur qui affiche les valeurs d'une source de données à l'aide de modèles définis par l'utilisateur. Vous pouvez configurer le contrôle pour permettre aux utilisateurs de sélectionner, trier, supprimer, modifier et insérer des enregistrements.
ListViewItem	Objet qui représente un élément du contrôle ListView.
ListViewDataItem	Objet qui représente un élément de données du contrôle ListView.
ListViewItemType	Énumération qui identifie la fonction des éléments d'un contrôle ListView.
DataPager	Contrôle serveur qui fournit une fonctionnalité de pagination aux contrôles qui implémentent l'interface IPageableItemContainer, comme le contrôle ListView.
NumericPagerField	Champ DataPager qui permet aux utilisateurs de sélectionner une page de données en fonction de son numéro.
NextPreviousPagerField	Champ DataPager qui permet aux utilisateurs de passer d'une page de données à une autre ou d'accéder à la première ou à la dernière page de données.
TemplatePagerField	Champ DataPager qui permet aux utilisateurs de créer une interface utilisateur de pagination personnalisée.