Affichage de données avec ObjectDataSource (C#)

2025-05-04

Ce tutoriel examine le contrôle ObjectDataSource à l’aide de ce contrôle, vous pouvez lier des données récupérées à partir de la BLL créée dans le didacticiel précédent sans avoir à écrire une ligne de code !

Présentation

Une fois notre architecture d’application et notre mise en page de site web terminée, nous sommes prêts à commencer à explorer comment accomplir diverses tâches courantes liées aux données et aux rapports. Dans les didacticiels précédents, nous avons vu comment lier par programmation des données de dal et BLL à un contrôle Web de données dans une page ASP.NET. Cette syntaxe, qui assigne la propriété DataSource du contrôle Web aux données à afficher, puis appelle la méthode DataBind() du contrôle, était le modèle utilisé dans les applications ASP.NET 1.x et peut continuer à être utilisé dans vos applications 2.0. Toutefois, les nouveaux contrôles de source de données de ASP.NET 2.0 offrent un moyen déclaratif d’utiliser les données. À l’aide de ces contrôles, vous pouvez lier des données récupérées à partir de la BLL créée dans le didacticiel précédent sans avoir à écrire une ligne de code !

ASP.NET 2.0 est fourni avec cinq contrôles de source de données intégrés SqlDataSource, AccessDataSource, ObjectDataSource, XmlDataSource et SiteMapDataSource, bien que vous puissiez créer vos propres contrôles de source de données personnalisés, si nécessaire. Comme nous avons développé une architecture pour notre application de didacticiel, nous allons utiliser ObjectDataSource sur nos classes BLL.

ASP.NET 2.0 inclut cinq contrôles de source de données Built-In

Figure 1 : ASP.NET 2.0 inclut cinq contrôles de source de données Built-In

ObjectDataSource sert de proxy pour l’utilisation d’un autre objet. Pour configurer l'ObjectDataSource, nous spécifions cet objet sous-jacent et comment ses méthodes sont mappées aux méthodes Select, Insert, Update, et Delete de l'ObjectDataSource. Une fois cet objet sous-jacent spécifié et ses méthodes mappées aux ObjectDataSource, nous pouvons ensuite lier ObjectDataSource à un contrôle Web de données. ASP.NET est fourni avec de nombreux contrôles Web de données, notamment GridView, DetailsView, RadioButtonList et DropDownList, entre autres. Pendant le cycle de vie de la page, le contrôle Web de données peut avoir besoin d’accéder aux données auxquelles il est lié, ce qu’il accomplira en appelant sa méthode ObjectDataSource Select ; si le contrôle Web de données prend en charge l’insertion, la mise à jour ou la suppression, des appels peuvent être effectués à ses méthodes, Insertou Update à son objet ObjectDataSourceDelete. Ces appels sont ensuite routés par ObjectDataSource vers les méthodes de l’objet sous-jacent approprié, comme le montre le diagramme suivant.

Figure 2 : ObjectDataSource sert de proxy (cliquez pour afficher l’image de taille complète)

Bien que ObjectDataSource puisse être utilisé pour appeler des méthodes d’insertion, de mise à jour ou de suppression de données, nous allons simplement nous concentrer sur le retour de données ; Les futurs didacticiels exploreront l’utilisation des contrôles ObjectDataSource et web de données qui modifient les données.

Étape 1 : Ajout et configuration du contrôle ObjectDataSource

Commencez par ouvrir la page SimpleDisplay.aspx dans le dossier BasicReporting, basculez vers le mode Création, puis faites glisser le contrôle ObjectDataSource depuis la boîte à outils sur l’aire de conception de la page. ObjectDataSource apparaît sous la forme d’une zone grise sur l’aire de conception, car elle ne produit aucun balisage ; il accède simplement aux données en appelant une méthode à partir d’un objet spécifié. Les données retournées par un ObjectDataSource peuvent être affichées par un contrôle Web de données, tel que GridView, DetailsView, FormView, etc.

Remarque

Vous pouvez également ajouter le contrôle Web de données à la page, puis, à partir de sa balise active, choisissez l’option <Nouvelle source> de données dans la liste déroulante.

Pour spécifier l’objet sous-jacent d’ObjectDataSource et la façon dont les méthodes de cet objet sont mappées aux objets ObjectDataSource, cliquez sur le lien Configurer la source de données à partir de la balise active d’ObjectDataSource.

Cliquez sur le lien Configurer la source de données à partir du Smart Tag

Figure 3 : Cliquez sur le lien Configurer la source de données à partir de la balise active (cliquez pour afficher l’image de taille complète)

L’Assistant Configurer la source de données s’affiche. Tout d’abord, nous devons spécifier l’objet avec lequel ObjectDataSource doit fonctionner. Si la case à cocher « Afficher uniquement les composants de données » est cochée, la liste déroulante de cet écran répertorie uniquement les objets qui ont été décorés avec l’attribut DataObject . Actuellement, notre liste inclut les TableAdapters dans le jeu de données typé et les classes BLL que nous avons créées dans le tutoriel précédent. Si vous avez oublié d’ajouter l’attribut DataObject aux classes de couche logique métier, vous ne les verrez pas dans cette liste. Dans ce cas, décochez la case « Afficher uniquement les composants de données » pour afficher tous les objets, qui doivent inclure les classes BLL (ainsi que les autres classes de l’ensemble de données Typé les DataTables, DataRows, etc.).

Dans ce premier écran, choisissez la ProductsBLL classe dans la liste déroulante, puis cliquez sur Suivant.

Figure 4 : Spécifier l’objet à utiliser avec le contrôle ObjectDataSource (cliquez pour afficher l’image de taille complète)

L’écran suivant de l’Assistant vous invite à sélectionner la méthode à appeler par ObjectDataSource. La liste déroulante répertorie les méthodes qui retournent des données dans l’objet sélectionné à partir de l’écran précédent. Ici, nous voyons GetProductByProductID, GetProducts, GetProductsByCategoryIDet GetProductsBySupplierID. Sélectionnez la méthode GetProducts dans la liste déroulante, puis cliquez sur Terminer (si vous avez ajouté le DataObjectMethodAttribute aux méthodes de ProductBLL comme indiqué dans le didacticiel précédent, cette option sera sélectionnée par défaut).

Figure 5 : Choisir la méthode permettant de renvoyer des données à partir de l’onglet SELECT (Cliquez pour afficher l’image de taille complète)

Configurer manuellement ObjectDataSource

L'Assistant Configurer la source de données d'ObjectDataSource offre un moyen rapide de spécifier l'objet qu'il utilise et d'associer les méthodes de l'objet qui sont appelées. Toutefois, vous pouvez configurer ObjectDataSource via ses propriétés, via la fenêtre Propriétés ou directement dans le balisage déclaratif. Définissez simplement la TypeName propriété sur le type de l’objet sous-jacent à utiliser et la SelectMethod méthode à appeler lors de la récupération des données.

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Même si vous préférez l’Assistant Configurer la source de données, il peut arriver que vous deviez configurer manuellement ObjectDataSource, car l’Assistant répertorie uniquement les classes créées par les développeurs. Si vous souhaitez lier ObjectDataSource à une classe du .NET Framework, telle que la classe Membership, pour accéder aux informations de compte d’utilisateur ou à la classe Directory pour travailler avec les informations du système de fichiers, vous devez définir manuellement les propriétés de ObjectDataSource.

Étape 2 : Ajout d’un contrôle Web de données et liaison à ObjectDataSource

Une fois que ObjectDataSource a été ajouté à la page et configuré, nous sommes prêts à ajouter des contrôles Web de données à la page pour afficher les données retournées par la méthode ObjectDataSource Select . Tout contrôle Web de données peut être lié à un ObjectDataSource, examinons l’affichage des données d’ObjectDataSource dans un GridView, DetailsView et FormView.

Liaison d’un GridView à ObjectDataSource

Ajoutez un contrôle GridView de la boîte à outils à SimpleDisplay.aspxl’aire de conception. Dans la balise active de GridView, choisissez le contrôle ObjectDataSource que nous avons ajouté à l’étape 1. Cela crée automatiquement un Objet BoundField dans GridView pour chaque propriété retournée par les données de la méthode ObjectDataSource Select (à savoir les propriétés définies par Products DataTable).

Figure 6 : Un GridView a été ajouté à la page et lié à ObjectDataSource (cliquez pour afficher l’image de taille complète)

Vous pouvez ensuite personnaliser, réorganiser ou supprimer les limites de GridView en cliquant sur l’option Modifier les colonnes de la balise active.

Figure 7 : Gérer les champs boundFields de GridView via la boîte de dialogue Modifier les colonnes (cliquez pour afficher l’image de taille complète)

Prenez un moment pour modifier les BoundFields du GridView, en supprimant les BoundFields ProductID, SupplierID, CategoryID, QuantityPerUnit, UnitsInStock, UnitsOnOrder, et ReorderLevel. Sélectionnez simplement BoundField dans la liste en bas à gauche, puis cliquez sur le bouton Supprimer (le X rouge) pour les supprimer. Ensuite, réorganisez les BoundFields pour que les BoundFields CategoryName et SupplierName précèdent le BoundField UnitPrice, en sélectionnant ces BoundFields et en cliquant sur la flèche vers le haut. Définissez respectivement les propriétés des BoundFields restants sur HeaderText, Products, Category et Supplier. Ensuite, formatez le BoundField Price en devise en définissant sa propriété HtmlEncode sur False et sa propriété DataFormatString sur {0:c}. Enfin, alignez horizontalement la Price case à droite et la Discontinued case à cocher dans le centre via la ItemStyle/HorizontalAlign propriété.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName"
          HeaderText="Category" ReadOnly="True"
          SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued">
            <ItemStyle HorizontalAlign="Center" />
        </asp:CheckBoxField>
    </Columns>
</asp:GridView>

Figure 8 : Les champs boundFields de GridView ont été personnalisés (cliquez pour afficher l’image de taille complète)

Utilisation de thèmes pour une apparence cohérente

Ces didacticiels s’efforcent de supprimer tous les paramètres de style au niveau des contrôles, en utilisant plutôt des feuilles de style en cascade définies dans un fichier externe dans la mesure du possible. Le Styles.css fichier contient DataWebControlStyle, HeaderStyle, RowStyleet AlternatingRowStyle des classes CSS qui doivent être utilisées pour dicter l’apparence des contrôles Web de données utilisés dans ces didacticiels. Pour ce faire, nous pourrions définir la propriété CssClass de GridView sur DataWebControlStyle, et les propriétés HeaderStyle, RowStyle et AlternatingRowStyle de ses propriétés CssClass en conséquence.

Si nous définissons ces propriétés sur le contrôle Web, nous devons nous rappeler de définir explicitement ces CssClass valeurs de propriété pour chaque contrôle Web de données ajouté à nos didacticiels. Une approche plus gérable consiste à définir les propriétés css par défaut pour les contrôles GridView, DetailsView et FormView à l’aide d’un thème. Un thème est une collection de paramètres de propriété, d’images et de classes CSS au niveau du contrôle qui peuvent être appliqués aux pages d’un site pour appliquer une apparence commune.

Notre thème n’inclut pas d’images ou de fichiers CSS (nous laisserons la feuille Styles.css de style as-is, définie dans le dossier racine de l’application web), mais inclura deux skins. Une apparence est un fichier qui définit les propriétés par défaut d’un contrôle Web. Plus précisément, nous aurons un fichier Skin pour les contrôles GridView et DetailsView, indiquant les propriétés par défaut CssClassassociées.

Commencez par ajouter un nouveau fichier d’apparence à votre projet nommé GridView.skin en cliquant avec le bouton droit sur le nom du projet dans l’Explorateur de solutions et en choisissant Ajouter un nouvel élément.

Figure 9 : Ajouter un fichier d’apparence nommé GridView.skin (cliquez pour afficher l’image de taille complète)

Les fichiers d’apparence doivent être placés dans un thème, qui se trouve dans le App_Themes dossier. Étant donné que nous n'avons pas encore ce type de dossier, Visual Studio nous proposera gentiment d'en créer un lors de l'ajout de notre premier thème. Cliquez sur Oui pour créer le App_Theme dossier et y placer le nouveau GridView.skin fichier.

Figure 10 : Autoriser Visual Studio à créer le dossier (App_Theme de taille complète)

Cela crée un thème dans le App_Themes dossier nommé GridView avec le fichier GridView.skinSkin.

Le thème GridView a été ajouté au dossier App_Theme

Figure 11 : Le thème GridView a été ajouté au App_Theme dossier

Renommez le thème GridView en DataWebControls (cliquez avec le bouton droit sur le dossier GridView, App_Theme puis choisissez Renommer). Ensuite, entrez le balisage suivant dans le GridView.skin fichier :

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
</asp:GridView>

Cela définit les propriétés par défaut associées à CssClassGridView dans n’importe quelle page qui utilise le thème DataWebControls. Ajoutons une autre apparence pour DetailsView, un contrôle Web de données que nous utiliserons prochainement. Ajoutez une nouvelle apparence au thème DataWebControls nommé DetailsView.skin et ajoutez le balisage suivant :

<asp:DetailsView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <FieldHeaderStyle CssClass="HeaderStyle" />
</asp:DetailsView>

Avec notre thème défini, la dernière étape consiste à appliquer le thème à notre page ASP.NET. Un thème peut être appliqué sur une base de page par page ou pour toutes les pages d’un site web. Utilisons ce thème pour toutes les pages du site web. Pour ce faire, ajoutez le balisage suivant à la section Web.config<system.web> :

<pages styleSheetTheme="DataWebControls" />

Voilà, c’est tout ! Le styleSheetTheme paramètre indique que les propriétés spécifiées dans le thème ne doivent pas remplacer les propriétés spécifiées au niveau du contrôle. Pour spécifier que les paramètres de thème doivent primer sur les paramètres de contrôle, utilisez l’attribut theme au lieu de styleSheetTheme; malheureusement, les paramètres de thème définis par l’attribut theme n’apparaissent pas dans la vue Création de Visual Studio. Reportez-vous à Vue d’ensemble des thèmes et des skins ASP.NET et Server-Side Styles avec l’utilisation de thèmes pour plus d’informations sur les thèmes et les skins, et consultez Comment appliquer des thèmes ASP.NET pour plus d’informations sur la configuration d’une page pour utiliser un thème.

Figure 12 : GridView affiche le nom, la catégorie, le fournisseur, le prix et les informations supprimées du produit (cliquez pour afficher l’image de taille complète)

Affichage d’un enregistrement à la fois dans DetailsView

GridView affiche une ligne pour chaque enregistrement retourné par le contrôle de source de données auquel il est lié. Toutefois, il est parfois possible que nous souhaitions afficher un seul enregistrement ou un seul enregistrement à la fois. Le contrôle DetailsView offre cette fonctionnalité, en tant que code HTML <table> avec deux colonnes et une ligne pour chaque colonne ou propriété liée au contrôle. Vous pouvez considérer DetailsView comme un GridView avec un enregistrement unique pivoté de 90 degrés.

Commencez par ajouter un contrôle DetailsView au-dessus de GridView dans SimpleDisplay.aspx. Ensuite, liez-le au même contrôle ObjectDataSource que GridView. Comme avec le GridView, un BoundField sera ajouté à un DetailsView pour chaque propriété de l'objet retourné par la méthode de l'ObjectDataSource Select. La seule différence est que les BoundFields de DetailsView sont disposés horizontalement plutôt que verticalement.

Figure 13 : Ajouter un DetailsView à la page et le lier à ObjectDataSource (cliquez pour afficher l’image de taille complète)

Comme GridView, les BoundFields de DetailsView peuvent être modifiés pour fournir un affichage plus personnalisé des données retournées par ObjectDataSource. La figure 14 montre le DetailsView après que ses BoundFields et ses propriétés ont été configurés pour rendre son apparence similaire à l'exemple GridView.

Figure 14 : Le DetailsView affiche un enregistrement unique (cliquez pour afficher l’image de taille complète)

Notez que DetailsView affiche uniquement le premier enregistrement retourné par sa source de données. Pour permettre à l’utilisateur de parcourir tous les enregistrements, un à la fois, nous devons activer la pagination pour DetailsView. Pour ce faire, revenez à Visual Studio et cochez la case Activer la pagination dans la balise active de DetailsView.

Figure 15 : Activer la pagination dans le contrôle DetailsView (cliquez pour afficher l’image de taille complète)

Figure 16 : Avec la pagination activée, DetailsView permet à l’utilisateur d’afficher l’un des produits (cliquez pour afficher l’image de taille complète)

Nous allons en savoir plus sur la pagination dans les didacticiels futurs.

Disposition plus flexible pour afficher un enregistrement à la fois

DetailsView est assez rigide dans la façon dont il affiche chaque enregistrement retourné par ObjectDataSource. Nous souhaitons peut-être une vue plus flexible des données. Par exemple, plutôt que d’afficher le nom, la catégorie, le fournisseur, le prix et les informations abandonnées chacune sur une ligne distincte, nous pouvons afficher le nom et le prix du produit dans un <h4> titre, avec les informations de catégorie et de fournisseur qui apparaissent sous le nom et le prix dans une taille de police plus petite. Et nous n’avons peut-être pas soin d’afficher les noms de propriétés (Product, Category, et ainsi de suite) en regard des valeurs.

Le contrôle FormView fournit ce niveau de personnalisation. Plutôt que d’utiliser des champs (comme GridView et DetailsView), FormView utilise des modèles, ce qui permet de combiner des contrôles Web, du code HTML statique et de la syntaxe de liaison de données. Si vous connaissez le contrôle Repeater de ASP.NET 1.x, vous pouvez considérer formView comme répéteur pour afficher un enregistrement unique.

Ajoutez un contrôle FormView à la surface de conception de la SimpleDisplay.aspx page. Au départ, FormView s’affiche sous la forme d’un bloc gris, nous informant que nous devons fournir, au minimum, le ItemTemplate du contrôle.

Figure 17 : FormView doit inclure une ItemTemplate (cliquer pour afficher l’image de taille complète)

Vous pouvez lier le FormView directement à un contrôle de source de données via la balise intelligente de FormView, ce qui va créer automatiquement une valeur par défaut ItemTemplate (ainsi qu’un EditItemTemplate et InsertItemTemplate, si les propriétés InsertMethod et UpdateMethod du contrôle ObjectDataSource sont définies). Toutefois, pour cet exemple, nous allons lier les données à FormView et spécifier sa ItemTemplate valeur manuellement. Commencez par définir la propriété DataSourceID de FormView sur le ID du contrôle ObjectDataSource, ObjectDataSource1. Ensuite, créez la balise ItemTemplate afin qu'elle affiche le nom et le prix du produit dans un élément <h4>, et les noms de la catégorie et de l'expéditeur sous celui-ci avec une taille de police réduite.

<asp:FormView ID="FormView1" runat="server"
  DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><%# Eval("ProductName") %>
          (<%# Eval("UnitPrice", "{0:c}") %>)</h4>
        Category: <%# Eval("CategoryName") %>;
        Supplier: <%# Eval("SupplierName") %>
    </ItemTemplate>
</asp:FormView>

Figure 18 : Le premier produit (Chai) est affiché dans un format personnalisé (cliquez pour afficher l’image de taille complète)

<%# Eval(propertyName) %> est la syntaxe de liaison de données. La Eval méthode retourne la valeur de la propriété spécifiée pour l’objet actuel lié au contrôle FormView. Consultez l’article d’Alex Homer Simplified and Extended Data Binding Syntax dans ASP.NET 2.0 pour plus d’informations sur les entrée et sorties de la liaison de données.

Comme DetailsView, FormView affiche uniquement le premier enregistrement retourné par ObjectDataSource. Vous pouvez activer la pagination dans FormView pour permettre aux visiteurs de parcourir les produits un par un.

Résumé

L'accès et l'affichage des données à partir d'une couche de logique métier peuvent être effectués sans écrire une ligne de code grâce au contrôle ObjectDataSource d'ASP.NET 2.0. ObjectDataSource appelle une méthode spécifiée d’une classe et retourne les résultats. Ces résultats peuvent être affichés dans un contrôle Web de données lié à ObjectDataSource. Dans ce tutoriel, nous avons examiné la liaison des contrôles GridView, DetailsView et FormView à ObjectDataSource.

Jusqu’à présent, nous n’avons vu que comment utiliser ObjectDataSource pour appeler une méthode sans paramètre, mais que se passe-t-il si nous voulons appeler une méthode qui attend des paramètres d’entrée, telle que la ProductBLL classe GetProductsByCategoryID(categoryID) ? Pour appeler une méthode qui attend un ou plusieurs paramètres, nous devons configurer ObjectDataSource pour spécifier les valeurs de ces paramètres. Nous allons voir comment procéder dans notre prochain tutoriel.

Bonne programmation !

Pour aller plus loin

Pour plus d’informations sur les sujets abordés dans ce tutoriel, consultez les ressources suivantes :

À propos de l’auteur

Scott Mitchell, auteur de sept livres ASP/ASP.NET et fondateur de 4GuysFromRolla.com, travaille avec les technologies Web Microsoft depuis 1998. Scott travaille en tant que consultant indépendant, formateur et écrivain. Son dernier livre est Sams Teach Yourself ASP.NET 2.0 en 24 heures. On peut le joindre à mitchell@4GuysFromRolla.com.

Merci spécial à

Cette série de tutoriels a été examinée par de nombreux réviseurs utiles. Le réviseur principal de ce tutoriel était Hilton Giesenow. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.

Prochain

Partager via