Utilisation de TemplateFields dans le contrôle GridView (VB)

par Scott Mitchell

Télécharger le PDF

Pour offrir une flexibilité, GridView offre le ModèleField, qui s’affiche à l’aide d’un modèle. Un modèle peut inclure un mélange de syntaxe html statique, de contrôles Web et de liaison de données. Dans ce tutoriel, nous allons examiner comment utiliser TemplateField pour obtenir un plus grand degré de personnalisation avec le contrôle GridView.

Présentation

GridView est composé d'un ensemble de champs qui indiquent quelles propriétés du DataSource doivent être incluses dans la sortie rendue, ainsi que la manière dont les données seront affichées. Le type de champ le plus simple est BoundField, qui affiche une valeur de données sous forme de texte. D’autres types de champs affichent les données à l’aide d’autres éléments HTML. CheckBoxField, par exemple, s’affiche sous la forme d’une case à cocher dont l’état coché dépend de la valeur d’un champ de données spécifié ; ImageField restitue une image dont la source d’image est basée sur un champ de données spécifié. Les liens hypertexte et les boutons dont l’état dépend d’une valeur de champ de données sous-jacente peuvent être rendus à l’aide des types de champs HyperLinkField et ButtonField.

Bien que les types de champs CheckBoxField, ImageField, HyperLinkField et ButtonField autorisent une autre vue des données, ils sont toujours relativement limités par rapport à la mise en forme. Un CheckBoxField ne peut afficher qu’une seule case à cocher, tandis qu’un Champ ImageField ne peut afficher qu’une seule image. Que se passe-t-il si un champ particulier doit afficher du texte, une case à cocher et une image, en fonction de différentes valeurs de champ de données ? Ou que se passe-t-il si nous voulions afficher les données à l’aide d’un contrôle Web autre que CheckBox, Image, HyperLink ou Button ? En outre, BoundField limite son affichage à un seul champ de données. Que se passe-t-il si nous voulions afficher deux valeurs de champ de données ou plus dans une seule colonne GridView ?

Pour prendre en charge ce niveau de flexibilité, GridView offre le TemplateField, qui s’affiche à l’aide d’un modèle. Un modèle peut inclure un mélange de syntaxe html statique, de contrôles Web et de liaison de données. De plus, TemplateField a un large éventail de modèles qui peuvent être utilisés pour personnaliser le rendu pour différentes situations. Par exemple, il ItemTemplate est utilisé par défaut pour afficher la cellule pour chaque ligne, mais le EditItemTemplate modèle peut être utilisé pour personnaliser l’interface lors de la modification des données.

Dans ce tutoriel, nous allons examiner comment utiliser TemplateField pour obtenir un plus grand degré de personnalisation avec le contrôle GridView. Dans le tutoriel précédent, nous avons vu comment personnaliser la mise en forme en fonction des données sous-jacentes à l’aide des DataBound et RowDataBound gestionnaires d’événements. Une autre façon de personnaliser la mise en forme en fonction des données sous-jacentes consiste à appeler des méthodes de mise en forme à partir d’un modèle. Nous allons également examiner cette technique dans ce tutoriel.

Pour ce tutoriel, nous allons utiliser TemplateFields pour personnaliser l’apparence d’une liste d’employés. Plus précisément, nous allons répertorier tous les employés, mais afficher le prénom et le nom de l'employé dans une colonne, leur date d'embauche dans un contrôle de calendrier et une colonne de statut qui indique le nombre de jours pendant lesquels ils ont été employés par l'entreprise.

Figure 1 : Trois TemplateFields sont utilisés pour personnaliser l’affichage (cliquez pour afficher l’image de taille complète)

Étape 1 : Liaison des données à GridView

Dans les scénarios de création de rapports où vous devez utiliser TemplateFields pour personnaliser l’apparence, je trouve qu’il est plus simple de commencer par créer un contrôle GridView qui contient uniquement BoundFields, puis pour ajouter de nouveaux TemplateFields ou convertir les champs BoundFields existants en TemplateFields selon les besoins. Par conséquent, commençons ce tutoriel en ajoutant un GridView à la page via le Concepteur et en le liant à un ObjectDataSource qui retourne la liste des employés. Ces étapes créeront une vue de grille (GridView) avec des champs liés (BoundFields) pour chacun des champs de l'employé.

Ouvrez la page GridViewTemplateField.aspx et faites glisser une GridView de la boîte à outils vers le Concepteur. Dans la balise intelligente de GridView, choisissez d’ajouter un nouveau contrôle ObjectDataSource qui appelle la méthode EmployeesBLL de la classe GetEmployees().

Figure 2 : Ajouter un nouveau contrôle ObjectDataSource qui appelle la GetEmployees() méthode (Click pour afficher l’image de taille complète)

La liaison du GridView de cette manière ajoutera automatiquement un BoundField pour chacune des propriétés de l’employé : EmployeeID, LastName, FirstName, Title, HireDate, ReportsTo, et Country. Pour ce rapport, ne nous dérangeons pas avec l’affichage des propriétés EmployeeID, ReportsTo, ou Country. Pour supprimer ces BoundFields, vous pouvez :

• Utilisez la boîte de dialogue Champs, cliquez sur le lien Modifier les colonnes à partir de la balise active de GridView pour afficher cette boîte de dialogue. Ensuite, sélectionnez BoundFields dans la liste inférieure gauche, puis cliquez sur le bouton X rouge pour supprimer BoundField.
• Modifiez la syntaxe déclarative de GridView à partir de la vue Source, supprimez l’élément <asp:BoundField> pour boundField que vous souhaitez supprimer.

Une fois que vous avez supprimé les balises EmployeeID, ReportsTo et Country BoundFields, le balisage de votre GridView doit ressembler à ce qui suit :

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
          SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
          SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
          SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
          SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Prenez un moment pour voir notre progression dans un navigateur. À ce stade, vous devez voir une table avec un enregistrement pour chaque employé et quatre colonnes : un pour le nom de l’employé, un pour son prénom, un pour son titre et un pour sa date d’embauche.

Figure 3 : Les champs LastName, FirstName, Title et HireDate sont affichés pour chaque employé (Cliquez pour afficher l’image de taille complète)

Étape 2 : Affichage des Prénoms et des Noms de Famille dans une Seule Colonne

Actuellement, les prénoms et noms de chaque employé sont affichés dans une colonne distincte. Il peut être intéressant de les combiner en une seule colonne à la place. Pour ce faire, nous devons utiliser un TemplateField. Nous pouvons soit ajouter un nouveau TemplateField, y ajouter le balisage et la syntaxe de liaison de données nécessaires, puis supprimer les FirstName et LastName BoundFields, soit convertir le FirstName BoundField en un TemplateField, modifier le TemplateField pour inclure la valeur de LastName, puis supprimer le LastName BoundField.

Les deux mènent au même résultat, mais personnellement, j’aime convertir les BoundFields en TemplateFields lorsque c’est possible, car la conversion ajoute automatiquement un ItemTemplate et un EditItemTemplate avec une syntaxe de liaison de données et de contrôles Web pour imiter l’apparence et les fonctionnalités du BoundField. L’avantage est que nous devons faire moins de travail avec TemplateField, car le processus de conversion aura effectué certaines des tâches pour nous.

Pour convertir un BoundField existant en TemplateField, cliquez sur le lien Modifier les colonnes à partir de la balise active du GridView, ce qui ouvrira la boîte de dialogue Champs. Sélectionnez BoundField à convertir dans la liste dans le coin inférieur gauche, puis cliquez sur le lien « Convertir ce champ en un TemplateField » dans le coin inférieur droit.

Figure 4 : Convertir un champ BoundField en champ de modèle à partir de la boîte de dialogue Champs (cliquez pour afficher l’image pleine taille)

Allez-y et convertissez FirstName BoundField en TemplateField. Après cette modification, il n’existe aucune différence perceptive dans le Concepteur. Cela est dû au fait que la conversion de BoundField en modèleField crée un TemplateField qui conserve l’apparence de BoundField. Bien qu’il n’y ait pas de différence visuelle à ce stade dans le Concepteur, ce processus de conversion a remplacé la syntaxe déclarative de BoundField , <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> avec la syntaxe TemplateField suivante :

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Comme vous pouvez le voir, le TemplateField se compose de deux modèles : un ItemTemplate avec une étiquette dont la propriété Text est définie sur la valeur du champ de données FirstName, et un EditItemTemplate avec un contrôle TextBox dont la propriété Text est également définie sur le champ de données FirstName. Syntaxe de liaison de données : <%# Bind("fieldName") %> indique que le champ fieldName de données est lié à la propriété de contrôle Web spécifiée.

Pour ajouter la valeur du LastName champ de données à ce TemplateField, nous devons ajouter un autre contrôle Web Label dans le ItemTemplate fichier et lier sa Text propriété à LastName. Cette opération peut être effectuée manuellement ou par le biais du Concepteur. Pour ce faire manuellement, ajoutez simplement la syntaxe déclarative appropriée au ItemTemplate:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Pour l’ajouter via le Concepteur, cliquez sur le lien 'Modifier les modèles' à partir de l'étiquette intelligente de GridView. Cela affiche l’interface de modification de modèle de GridView. Dans la balise active de cette interface, vous trouverez la liste des modèles dans GridView. Étant donné que nous n'avons qu'un seul TemplateField à ce stade, les seuls modèles répertoriés dans la liste déroulante sont ceux pour le TemplateField FirstName, ainsi que les modèles EmptyDataTemplate et PagerTemplate. Le EmptyDataTemplate modèle, s’il est spécifié, est utilisé pour afficher la sortie de GridView s’il n’y a aucun résultat dans les données liées à GridView ; le PagerTemplatecas échéant, est utilisé pour afficher l’interface de pagination d’un GridView qui prend en charge la pagination.

Figure 5 : Les modèles de GridView peuvent être modifiés via le concepteur (cliquez pour afficher l’image de taille complète)

Pour afficher également le LastName dans le TemplateField FirstName, faites glisser le contrôle Label de la boîte à outils dans le FirstName du TemplateField ItemTemplate de l’interface de modification de modèle de GridView.

Figure 6 : Ajouter un contrôle Web Label au FirstName ItemTemplate de TemplateField (cliquez pour afficher l’image de taille complète)

À ce stade, le contrôle Web Label ajouté au TemplateField a sa Text propriété définie sur « Label ». Nous devons modifier ce paramètre afin que cette propriété soit liée à la valeur du champ de données LastName à la place. Pour ce faire, cliquez sur la balise active du contrôle label et choisissez l’option Modifier les liaisons de données.

Figure 7 : Choisir l’option Modifier dataBindings dans la balise active de l’étiquette (cliquez pour afficher l’image de taille complète)

La boîte de dialogue DataBindings s’affiche. Ici, vous pouvez sélectionner la propriété pour participer à la liaison de données dans la liste de gauche et choisir le champ auquel associer les données à partir de la liste déroulante à droite. Choisissez la Text propriété à partir de la gauche et le LastName champ de droite, puis cliquez sur OK.

Figure 8 : Lier la Text propriété au LastName champ de données (cliquez pour afficher l’image de taille complète)

Remarque

La boîte de dialogue DataBindings vous permet d’indiquer s’il faut effectuer une liaison de données bidirectionnelle. Si vous laissez cette case désactivée, la syntaxe <%# Eval("LastName")%> de liaison de données sera utilisée au lieu de <%# Bind("LastName")%>. L’une ou l’autre approche est correcte pour ce tutoriel. La liaison de données bidirectionnelle devient importante lors de l’insertion et de la modification des données. Toutefois, pour afficher simplement des données, l’une ou l’autre approche fonctionne également bien. Nous aborderons en détail la liaison de données bidirectionnel dans les didacticiels futurs.

Prenez un moment pour afficher cette page via un navigateur. Comme vous pouvez le voir, le GridView inclut toujours quatre colonnes ; cependant, la colonne FirstName affiche désormais à la fois les valeurs des champs de données et FirstName.

Figure 9 : Les valeurs FirstName et LastName sont affichées dans une seule colonne (Cliquez pour afficher l’image de taille complète)

Pour effectuer cette première étape, supprimez BoundField LastName et renommez la FirstName propriété de HeaderText TemplateField en « Name ». Une fois ces modifications effectuées, le balisage déclaratif de GridView doit ressembler à ce qui suit :

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="" Title" />
        <asp:BoundField DataField="HireDate" HeaderText="
            HireDate" SortExpression="" HireDate" />
    </Columns>
</asp:GridView>

Figure 10 : Les prénoms et noms de chaque employé sont affichés dans une colonne (cliquez pour afficher l’image de taille complète)

Étape 3 : Utilisation du contrôle Calendrier pour afficher leHiredDatechamp

L’affichage d’une valeur de champ de données sous forme de texte dans un GridView est aussi simple que l’utilisation d’un objet BoundField. Toutefois, pour certains scénarios, les données sont mieux exprimées à l’aide d’un contrôle Web particulier au lieu de texte. Cette personnalisation de l’affichage des données est possible avec TemplateFields. Par exemple, plutôt que d’afficher la date d’embauche de l’employé sous forme de texte, nous pourrions afficher un calendrier (à l’aide du contrôle Calendrier) avec sa date d’embauche mise en surbrillance.

Pour ce faire, commencez par convertir BoundField HiredDate en un TemplateField. Accédez simplement à la balise active de GridView et cliquez sur le lien Modifier les colonnes, ce qui affiche la boîte de dialogue Champs. HiredDate Sélectionnez BoundField, puis cliquez sur « Convertir ce champ en un TemplateField ».

Figure 11 : Convertir HiredDate BoundField en modèleField (cliquez pour afficher l’image de taille complète)

Comme nous l’avons vu à l’étape 2, cela remplace le BoundField par un TemplateField qui contient une ItemTemplate avec Label et une EditItemTemplate avec TextBox dont les propriétés Text sont liées à la valeur HiredDate à l’aide de la syntaxe de liaison de données <%# Bind("HiredDate")%>.

Pour remplacer le texte par un contrôle Calendrier, modifiez le modèle en supprimant l’étiquette et en ajoutant un contrôle Calendrier. Dans le Concepteur, sélectionnez Modifier les modèles à partir de la balise active de GridView, puis choisissez TemplateField HireDateItemTemplate dans la liste déroulante. D'abord, supprimez le contrôleur Étiquette, puis faites glisser un contrôleur Calendrier depuis la boîte à outils dans l'interface de modification du modèle.

Figure 12 : Ajouter un contrôle Calendrier au HireDate du TemplateField (ItemTemplate)

À ce stade, chaque ligne du GridView contiendra un contrôle Calendar dans son HiredDate TemplateField. Toutefois, la valeur réelle HiredDate de l’employé n’est pas définie n’importe où dans le contrôle Calendrier, ce qui permet à chaque contrôle Calendrier d’afficher par défaut le mois et la date actuels. Pour résoudre ce problème, nous devons affecter les propriétés HiredDate et VisibleDate de chaque employé au contrôle Calendar.

Dans la balise active du contrôle Calendrier, choisissez Modifier les liaisons de données. Ensuite, liez les propriétés SelectedDate et VisibleDate au champ de données HiredDate.

Figure 13 : Lier les SelectedDate propriétés VisibleDate au HiredDate champ de données (cliquez pour afficher l’image de taille complète)

Remarque

La date sélectionnée du contrôle Calendrier n’a pas nécessairement besoin d’être visible. Par exemple, un calendrier peut avoir le^1er août 1999 comme date sélectionnée, mais afficher le mois et l’année en cours. La date sélectionnée et la date visible sont spécifiées par les propriétés SelectedDate et VisibleDate du contrôle Calendrier. Étant donné que nous voulons à la fois sélectionner l'attribut de l'employé HiredDate et nous assurer qu'il est affiché, nous devons lier ces deux propriétés au champ de données HireDate.

Lorsque vous affichez la page dans un navigateur, le calendrier affiche maintenant le mois de la date de recrutement de l’employé et sélectionne cette date particulière.

Figure 14 : Le HiredDate de l’employé est affiché dans le contrôle du calendrier (Cliquez pour afficher l’image de taille complète)

Remarque

Contrairement à tous les exemples que nous avons vus jusqu’à présent, pour ce tutoriel, nous n’avons pas défini EnableViewState la propriété pour False ce GridView. La raison de cette décision est que le fait de cliquer sur les dates du contrôle Calendrier entraîne un postback, en définissant la date sélectionnée du calendrier sur celle qui vient d'être cliquée. Si l’état de vue de GridView est désactivé, cependant, à chaque retour, les données du GridView sont à nouveau liées à sa source de données sous-jacente, ce qui a pour effet de réinitialiser la date sélectionnée dans le calendrier à celle de l'employé, remplaçant ainsi la date choisie par l’utilisateur.

Pour ce tutoriel, il s’agit d’une discussion sans importance, car l’utilisateur n’est pas en mesure de mettre à jour HireDate les données de l’employé. Il serait probablement préférable de configurer le contrôle Calendar afin que ses dates ne soient pas sélectionnables. Quel que soit le cas, ce didacticiel montre que dans certaines circonstances, l’état d’affichage doit être activé pour fournir certaines fonctionnalités.

Étape 4 : Affichage du nombre de jours pendant lesquels l’employé a travaillé pour l’entreprise

Jusqu’à présent, nous avons vu deux applications de TemplateFields :

• Combinaison de deux valeurs de champ de données ou plus en une colonne et
• Expression d’une valeur de champ de données à l’aide d’un contrôle Web au lieu de texte

Une troisième utilisation de TemplateFields consiste à afficher des métadonnées sur les données sous-jacentes de GridView. En plus d’afficher les dates d’embauche des employés, par exemple, nous pourrions également avoir une colonne qui affiche le nombre total de jours qu’ils ont eus sur le travail.

Une autre utilisation de TemplateFields se produit dans les scénarios où les données sous-jacentes doivent être affichées différemment dans le rapport de page web que dans le format stocké dans la base de données. Imaginez que la Employees table comprenait un Gender champ qui stockait le caractère M ou F pour indiquer le sexe de l’employé. Lors de l’affichage de ces informations dans une page web, nous voulons peut-être afficher le sexe comme « Masculin » ou « Femelle », par opposition à « M » ou « F ».

Ces deux scénarios peuvent être gérés en créant une méthode de mise en forme dans la classe code-behind de la page ASP.NET (ou dans une bibliothèque de classes distincte, implémentée en tant que Shared méthode) appelée à partir du modèle. Une telle méthode de mise en forme est appelée à partir du modèle à l’aide de la même syntaxe de liaison de données vue précédemment. La méthode de mise en forme peut prendre n’importe quel nombre de paramètres, mais doit retourner une chaîne. Cette chaîne retournée est le code HTML injecté dans le modèle.

Pour illustrer ce concept, nous allons augmenter notre tutoriel pour afficher une colonne qui répertorie le nombre total de jours pendant lesquels un employé a été sur le travail. Cette méthode de mise en forme prend un objet Northwind.EmployeesRow et renvoie le nombre de jours que l'employé a passé chez l'entreprise sous forme de chaîne. Cette méthode peut être ajoutée à la classe code-behind de la page ASP.NET, mais doit être marquée comme Protected ou Public pour être accessible à partir du modèle.

Protected Function DisplayDaysOnJob(employee As Northwind.EmployeesRow) As String
    ' Make sure HiredDate is not NULL... if so, return "Unknown"
    If employee.IsHireDateNull() Then
        Return "Unknown"
    Else
        ' Returns the number of days between the current
        ' date/time and HireDate
        Dim ts As TimeSpan = DateTime.Now.Subtract(employee.HireDate)
        Return ts.Days.ToString("#,##0")
    End If
End Function

Étant donné que le HiredDate champ peut contenir des NULL valeurs de base de données, nous devons d’abord vérifier que la valeur n’est pas NULL avant de poursuivre le calcul. Si la HiredDate valeur est NULL, nous renvoyons simplement la chaîne « Unknown » ; si ce n’est pas NULLle cas, nous calculons la différence entre l’heure actuelle et la HiredDate valeur et renvoyons le nombre de jours.

Pour utiliser cette méthode, nous devons l’appeler à partir d’un TemplateField dans GridView à l’aide de la syntaxe de liaison de données. Commencez par ajouter un nouveau TemplateField à GridView en cliquant sur le lien Modifier les colonnes dans la balise active de GridView et en ajoutant un nouveau TemplateField.

Figure 15 : Ajouter un nouveau templateField à GridView (cliquez pour afficher l’image de taille complète)

Définissez la propriété HeaderText de ce nouveau TemplateField sur "Jours de travail" et la propriété ItemStyleHorizontalAlign de Center. Pour appeler la méthode DisplayDaysOnJob à partir du modèle, ajoutez un ItemTemplate et utilisez la syntaxe de liaison de données suivante :

<%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
    Northwind.EmployeesRow)) %>

Container.DataItem retourne un DataRowView objet correspondant à l’enregistrement DataSource lié au GridViewRow. Sa propriété Row retourne le Northwind.EmployeesRow de type fort, qui est passé à la méthode DisplayDaysOnJob. Cette syntaxe de liaison de données peut apparaître directement dans la ItemTemplate (comme indiqué dans la syntaxe déclarative ci-dessous) ou être affectée à la Text propriété d’un contrôle Label Web.

Remarque

Sinon, au lieu de fournir une instance EmployeesRow, nous pourrions simplement passer la valeur HireDate en utilisant <%# DisplayDaysOnJob(Eval("HireDate")) %>. Toutefois, la Eval méthode retourne un Object, donc nous devrons modifier notre DisplayDaysOnJob signature de méthode pour accepter un paramètre d’entrée de type Object, à la place. Nous ne pouvons pas convertir aveuglement l’appel Eval("HireDate") en un DateTime , car la HireDate colonne de la Employees table peut contenir des NULL valeurs. Par conséquent, nous devons accepter un paramètre d’entrée Object pour la DisplayDaysOnJob méthode, vérifier s’il avait une valeur de base de données NULL (qui peut être effectuée à l’aide Convert.IsDBNull(objectToCheck)), puis continuer en conséquence.

En raison de ces subtilités, j'ai choisi de transmettre l'ensemble de l'instance EmployeesRow. Dans le tutoriel suivant, nous allons voir un exemple plus adapté pour utiliser la Eval("columnName") syntaxe pour passer un paramètre d’entrée dans une méthode de mise en forme.

L’exemple suivant montre la syntaxe déclarative de notre GridView après l’ajout de TemplateField et la DisplayDaysOnJob méthode appelée à partir de :ItemTemplate

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="EmployeeID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name"
          SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="" Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate" SortExpression="
            HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
                </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
                    Northwind.EmployeesRow)) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

La figure 16 montre le didacticiel terminé, lorsqu’il est affiché via un navigateur.

Figure 16 : Nombre de jours pendant lesquels l’employé a été sur le travail est affiché (cliquez pour afficher l’image de taille complète)

Résumé

Le ModèleField dans le contrôle GridView permet un degré de flexibilité plus élevé dans l’affichage des données qu’avec les autres contrôles de champ. TemplateFields est idéal pour les situations où :

• Plusieurs champs de données doivent être affichés dans une colonne GridView
• Les données sont mieux exprimées à l’aide d’un contrôle Web plutôt que de texte brut
• La sortie dépend des données sous-jacentes, telles que l’affichage des métadonnées ou la reformatage des données

Outre la personnalisation de l’affichage des données, TemplateFields est également utilisé pour personnaliser les interfaces utilisateur utilisées pour modifier et insérer des données, comme nous le verrons dans les prochains didacticiels.

Les deux didacticiels suivants continuent à explorer les modèles, en commençant par un aperçu de l’utilisation de TemplateFields dans un DetailsView. Ensuite, nous allons nous tourner vers FormView, qui utilise des modèles à la place des champs pour offrir une plus grande flexibilité dans la disposition et la structure des données.

Bonne programmation !

À 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 didacticiel était Dan Jagers. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.

PrécédentSuivant