Formation PUB770 : ASP.NET WebForms, H-2015 L'accès aux données

15.3 Ajouter un contrôle orienté données


Pour qu'un contrôle puisse être automatiquement associé à des données tirées de votre BD, votre page Web doit comporter les éléments suivants :

▼Publicité Le texte se poursuit plus bas

  • Un contrôle serveur orienté données, comme par exemple :
    • pour une grille de données : <asp:GridView>
    • pour une liste déroulante : <asp:DropDownList>
    • etc.
  • Un contrôle serveur pour la source de données. Avec une BD MS SQL ou MySQL, ce sera un <asp:SqlDataSource>. C'est la source de données qui sera responsable de la requête SQL permettant de retrouver les données désirées.
  • Une chaîne de connexion. Elle sera configurée dans le fichier Web.config. C'est elle qui permettra à la source de données de retrouver physiquement la base de données à utiliser.

Avant de tenter de configurer les composants impliqués, tentons de comprendre les liens qui les unissent. Une page Web peut comprendre un ou plusieurs contrôles orientés données. Généralement, chaque contrôle aura sa propre source de données. Il est cependant possible qu'une même source de données soit partagée par plusieurs contrôles de la page.

Pour chaque source de données, il faut indiquer quelle base de données doit être utilisée. On travaillera pour cela à l'aide d'une chaîne de connexion. Cette dernière est définie dans le fichier Web.config.

La chaîne de connexion contient le chemin permettant d'accéder à la base de données. Un simple changement à la chaîne de connexion permettra de modifier l'emplacement de la base de données à utiliser pour l'ensemble du site Web.

Utiliser un contrôle orienté données

Heureusement, Visual Studio vous aidera à configurer tout ça. Voici, par exemple, la procédure vous permettant d'ajouter une grille de données :

  • Ouvrez le fichier .aspx en mode Source.
  • Repérez l'endroit exact où la grille de données doit être ajoutée.
  • Ouvrez la boîte à outils et faites glisser le composant GridView à l'endroit désiré.

    Ajout d'un GridView

  • Passez en mode Design. Repérez la grille de données puis cliquez sur la flèche à sa droite. Dans « Choisir la source de données », cliquez sur « Nouvelle source de données ».

    Ajout d'un GridView

  • Cliquez sur Base de données puis donnez à la source de données un nom débutant par dataSource suivi du nom de la table qui sera utilisée. Comme une même page peut contenir plusieurs sources de données, assurez-vous que ce nom soit unique dans la page.

    Ajout d'un GridView

  • Sélectionnez ensuite la base de données à utiliser dans la liste déroulante. Si vous ne la voyez pas dans la liste déroulante, vous devrez configurer une nouvelle chaîne de connexion, tel qu'expliqué dans les sous-points suivants.

    Ajout d'un GridView

    Voici comment ajouter une nouvelle chaîne de connexion, si votre BD n'apparaît pas dans la liste déroulante :

    • Cliquez sur « Nouvelle connexion ». 

    • Choisissez « Microsoft SQL Server » comme source de données.

    • Dans la fenêtre « Ajouter une connexion », entrez les informations suivantes :

      • Nom du serveur : (LocalDB)v11.0
      • Utiliser l'authentification Windows
      • Sélectionnez la base de données dans la liste déroulante (attention : il y aura plein de caractères devant son nom. Ne vous en souciez pas).

      Ajout d'un GridView

    • Donnez à la chaîne de connexion un nom débutant par ConnectionString suivi du nom de votre base de données.

      Ajout d'un GridView

  • Visual Studio vous aide ensuite à configurer votre source de données. 

Voici ce qui aura été généré par ces étapes. Notez que l'utilisation de l'assistant pour ajouter ces informations est optionnelle. Si vous préférez travailler directement dans le code, vous obtiendrez le même résultat.

Nouvelle chaîne de connexion dans le fichier Web.config (peut être utilisée par toutes les pages Web) :

Fichier Web.config (XML)

<add name="ConnectionStringASPNET2015-GagnonAnnie" connectionString="Data Source=(LocalDB)v11.0;

AttachDbFilename=|DataDirectory|ASPNET2015-GagnonAnnie.mdf;Integrated Security=True" 

providerName="System.Data.SqlClient" />

Nouvelle source de données dans le fichier .aspx (peut être utilisée par tous les contrôles serveur de cette page Web) :

Fichier .aspx (ASP.NET)

<asp:SqlDataSource ID="dataSourceProduit" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringASPNET2015-GagnonAnnie %>" 

     SelectCommand="SELECT [produit_id], [produit_code], [produit_nom] FROM [produit]">

</asp:SqlDataSource>

Nouveau contrôle orienté données dans le fichier .aspx :

Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewProduits" runat="server" AutoGenerateColumns="False" DataKeyNames="produit_id

    DataSourceID="dataSourceProduit">

    <Columns>

        <asp:BoundField DataField="produit_code" HeaderText="produit_code" ReadOnly="True" SortExpression="produit_code" />

        <asp:BoundField DataField="produit_nom" HeaderText="produit_nom" SortExpression="produit_nom" />

    </Columns>

</asp:GridView>

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 18 août 2017
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre