Comment : établir une liaison vers les données d'un contrôle basé sur des modèles dans Visual Studio

Mise à jour : novembre 2007

Vous pouvez associer un contrôle, tel que le contrôle GridView, DetailsView, FormView, ListView, DataList ou Repeater à un contrôle de source de données, tel que le contrôle LinqDataSource, ObjectDataSource ou SqlDataSource. Vous pouvez également utiliser les modèles de contrôle (ceux-ci sont obligatoires pour les contrôles ListView, DataList, Repeater et FormView) pour personnaliser la présentation des données avec votre interface utilisateur personnalisée dans le concepteur.

Cette rubrique explique le processus d'ajout de contrôles d'interface utilisateur, tels qu'un contrôle TextBox, à un modèle, puis la liaison du contrôle aux données spécifiques.

Pour lier un contrôle de modèle à une source de données

  1. Établissez une source de données valide, telle que le contrôle SqlDataSource, sur votre page et notez la valeur de propriété ID.

    Par exemple :

    <asp:SqlDataSource ID="SqlDataSource1" Runat="server" 
      SelectCommand="SELECT CustomerID, CompanyName FROM Customers"
      ConnectionString="<%$ 
        ConnectionStrings:NorthwindConnectionString %>">
    </asp:SqlDataSource>
    

    Pour plus d'informations sur l'utilisation d'un contrôle SqlDataSource avec la base de données, consultez Vue d'ensemble du contrôle serveur Web SqlDataSource.

  2. À partir du groupe Données de la Boîte à outils, faites glisser un contrôle DataList sur votre page.

    Le menu contextuel Tâches DataList s'affiche.

    • Si le menu contextuel Tâches DataList ne s'affiche pas, cliquez avec le bouton droit sur le contrôle DataList, puis cliquez sur Afficher la balise active.
  3. Dans la liste Choisir la source de données, cliquez sur le contrôle SqlDataSource que vous avez créé à l'étape 1.

    Lorsque la page est restituée, le contrôle affiche toutes les colonnes et les données de la requête sans personnalisation. Selon vos données, votre contrôle DataList apparaîtra avec les champs liés par défaut, comme le montre l'exemple de code suivant :

    <asp:DataList ID="DataList1"  
        DataKeyField="CustomerID" 
        DataSourceID="SqlDataSource1">
      <ItemTemplate>
        CustomerID:
        <asp:Label ID="CustomerIDLabel"  
            Text='<%# Eval("CustomerID") %>'>
        </asp:Label><br />
        CompanyName:
        <asp:Label ID="CompanyNameLabel"  
            Text='<%# Eval("CompanyName") %>'>
        </asp:Label><br />
        <br />
      </ItemTemplate>
    </asp:DataList>
    

Pour modifier les modèles d'un contrôle

  1. En mode Design, cliquez avec le bouton droit sur le contrôle DataList, puis cliquez sur Afficher la balise active.

  2. Dans le menu Tâches DataList, cliquez sur Modifier les modèles.

    Vous pouvez à présent modifier des modèles dans le concepteur. Vous pouvez faire glisser d'autres contrôles à lier ultérieurement sur le modèle.

  3. Dans la liste Afficher, cliquez sur AlternatingItemTemplate (des contrôles différents prennent en charge des modèles différents).

  4. Dans l'espace de conception AlternatingItemTemplate, tapez CustomerID:, puis à partir du groupe Standard dans la boîte à outils, faites glisser un contrôle T:System.Web.UI.WebControls.Label sur le contrôle DataList.

  5. Dans le menu Tâches Label, cliquez sur Modifier les DataBindings.

  6. Dans la boîte de dialogue LabelName DataBindings, sous Propriétés pouvant être liées, cliquez sur Texte.

  7. Sous Liaison pour Text, dans la liste Lié à, cliquez sur CustomerID.

  8. Répétez les étapes 4 à 7 pour CompanyName.

  9. Dans l'espace de conception AlternatingItemTemplate, sélectionnez l'ensemble du contenu, puis appuyez sur CTRL+B pour mettre le texte en gras.

  10. Cliquez avec le bouton droit sur le contrôle DataList, puis cliquez sur Afficher la balise active.

  11. Cliquez sur Terminer la modification du modèle pour quitter le mode de modification de modèle.

    Lorsque votre page est affichée dans le navigateur, la liste des sociétés est affichée en alternant texte brut et texte gras.

Voir aussi

Tâches

Procédure pas à pas : accès aux données de base dans les pages Web

Concepts

Vue d'ensemble des contrôles de source de données

Vue d'ensemble du contrôle serveur Web SqlDataSource