Mise en forme personnalisée basée sur des données (VB)

par Scott Mitchell

Télécharger le PDF

L’ajustement du format gridView, DetailsView ou FormView en fonction des données liées à celle-ci peut être effectué de plusieurs façons. Dans ce tutoriel, nous allons découvrir comment effectuer une mise en forme liée aux données à l’aide des gestionnaires d’événements DataBound et RowDataBound.

Présentation

L’apparence des contrôles GridView, DetailsView et FormView peut être personnalisée par le biais d’une multitude de propriétés liées au style. Les propriétés telles que CssClass, FontBorderWidthBorderStyle, BorderColor, Widthet Height, entre autres, dictent l’apparence générale du contrôle rendu. Les propriétés, y compris HeaderStyle, RowStyle, AlternatingRowStyleet d’autres autorisent l’application de ces mêmes paramètres de style à des sections particulières. De même, ces paramètres de style peuvent être appliqués au niveau du champ.

Dans de nombreux scénarios cependant, les exigences de mise en forme dépendent de la valeur des données affichées. Par exemple, pour attirer l’attention sur les produits hors stock, un rapport listant les informations sur les produits peut définir la couleur d’arrière-plan sur jaune pour ces produits dont UnitsInStock les champs et UnitsOnOrder les champs sont tous deux égaux à 0. Pour mettre en évidence les produits les plus coûteux, nous voulons peut-être afficher les prix de ces produits qui coûtent plus de 75,00 $ dans une police en gras.

L’ajustement du format gridView, DetailsView ou FormView en fonction des données liées à celle-ci peut être effectué de plusieurs façons. Dans ce tutoriel, nous allons examiner comment effectuer une mise en forme liée aux données à l’aide des gestionnaires d'événements DataBound et RowDataBound. Dans le tutoriel suivant, nous allons explorer une autre approche.

Utilisation du gestionnaire d’événements duDataBoundcontrôle DetailsView

Lorsque les données sont liées à un DetailsView, qu'elles proviennent d'un contrôle de source de données ou qu'elles sont attribuées par programmation à travers la propriété DataSource du contrôle et l'appel de sa méthode DataBind(), la séquence d’étapes suivante se produit :

1. L’événement du contrôle Web de DataBinding données se déclenche.
2. Les données sont liées au contrôle Web de données.
3. L’événement du contrôle Web de DataBound données se déclenche.

La logique personnalisée peut être injectée immédiatement après les étapes 1 et 3 via un gestionnaire d’événements. En créant un gestionnaire d’événements pour l’événement DataBound , nous pouvons déterminer par programme les données qui ont été liées au contrôle Web de données et ajuster la mise en forme si nécessaire. Pour illustrer cela, nous allons créer un DetailsView qui répertorie les informations générales sur un produit, mais affiche la UnitPrice valeur en gras, police italique si elle dépasse 75,00 $.

Étape 1 : affichage des informations sur le produit dans un DetailsView

Ouvrez la page CustomColors.aspx dans le dossier CustomFormatting, glissez un contrôle DetailsView depuis la barre d'outils vers le Concepteur, définissez la valeur de propriété ID sur ExpensiveProductsPriceInBoldItalic, et liez-le à un nouveau contrôle ObjectDataSource qui appelle la méthode ProductsBLL de la classe GetProducts(). Les étapes détaillées pour y parvenir sont omises ici pour la concision, car nous les avons examinées en détail dans les didacticiels précédents.

Une fois que vous avez lié ObjectDataSource à DetailsView, prenez un moment pour modifier la liste des champs. J’ai choisi de supprimer le ProductID, , SupplierIDCategoryID, UnitsInStockUnitsOnOrder, , ReorderLevelet Discontinued BoundFields et renommé et reformaté les autres BoundFields. J'ai également effacé les paramètres Width et Height. Étant donné que DetailsView n’affiche qu’un seul enregistrement, nous devons activer la pagination pour permettre à l’utilisateur final d’afficher tous les produits. Pour ce faire, cochez la case Activer la pagination dans la balise active de DetailsView.

Figure 1 : Cochez la case Activer la pagination dans la balise active DetailsView (cliquez pour afficher l’image de taille complète)

Une fois ces modifications effectuées, le balisage DetailsView sera :

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Fields>
        <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="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Fields>
</asp:DetailsView>

Prenez un moment pour tester cette page dans votre navigateur.

Figure 2 : Le contrôle DetailsView affiche un produit à la fois (cliquez pour afficher l’image pleine taille)

Étape 2 : Détermination par programmation de la valeur des données dans le gestionnaire d’événements DataBound

Pour afficher le prix en gras et en italique pour ces produits dont la valeur UnitPrice dépasse 75,00 $, nous devons d'abord être en mesure de déterminer la valeur UnitPrice par voie de programme. Pour DetailsView, cette opération peut être effectuée dans le gestionnaire d’événements DataBound . Pour créer le gestionnaire d’événements, cliquez sur DetailsView dans le Concepteur, puis accédez à la fenêtre Propriétés. Appuyez sur F4 pour l’afficher, s’il n’est pas visible, ou accédez au menu Affichage et sélectionnez l’option de menu Fenêtre Propriétés. Dans la fenêtre Propriétés, cliquez sur l'icône en forme d'éclair pour répertorier les événements de DetailsView. Ensuite, double-cliquez sur l’événement DataBound ou tapez le nom du gestionnaire d’événements que vous souhaitez créer.

Figure 3 : Créer un gestionnaire d’événements pour l’événement DataBound

Remarque

Vous pouvez également créer un gestionnaire d’événements à partir de la partie de code de la page ASP.NET. Vous y trouverez deux listes déroulantes en haut de la page. Sélectionnez l’objet dans la liste déroulante gauche et l’événement pour lequel vous souhaitez créer un gestionnaire à partir de la liste déroulante de droite et Visual Studio crée automatiquement le gestionnaire d’événements approprié.

Cela crée automatiquement le gestionnaire d’événements et vous amène à la partie de code où elle a été ajoutée. À ce stade, vous verrez :

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound
End Sub

Les données liées à DetailsView sont accessibles via la DataItem propriété. Rappelez-vous que nous lions nos contrôles à un DataTable fortement typé, qui est composé d’une collection d’instances DataRow fortement typées. Lorsqu'une DataTable est liée à une DetailsView, le premier DataRow de la DataTable est affecté à la propriété DataItem de la DetailsView. Plus précisément, la DataItem propriété est affectée à un DataRowView objet. Nous pouvons utiliser la propriété de DataRowViewRow pour avoir accès à l'objet DataRow sous-jacent, qui est en fait une instance de ProductsRow. Une fois que nous avons cette ProductsRow instance, nous pouvons prendre notre décision en inspectant simplement les valeurs de propriété de l’objet.

Le code suivant montre comment déterminer si la UnitPrice valeur liée au contrôle DetailsView est supérieure à 75,00 $ :

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
    End If
End Sub

Remarque

Étant donné UnitPrice peut avoir une valeur NULL dans la base de données, nous vérifions d'abord que nous ne sommes pas en train de traiter une valeur NULL avant d'accéder à la propriété ProductsRow de UnitPrice. Cette vérification est importante, car si nous essayons d’accéder à la UnitPrice propriété lorsqu’elle a une NULL valeur, l’objet ProductsRow lève une exception StrongTypingException.

Étape 3 : Mise en forme de la valeur UnitPrice dans DetailsView

À ce stade, nous pouvons déterminer si la UnitPrice valeur liée à DetailsView a une valeur qui dépasse 75,00 $, mais nous n’avons pas encore vu comment ajuster par programmation la mise en forme de DetailsView en conséquence. Pour modifier la mise en forme d'une ligne entière dans DetailsView, accédez par programmation à la ligne à l’aide de DetailsViewID.Rows(index) ; pour modifier une cellule particulière, utilisez DetailsViewID.Rows(index).Cells(index). Une fois que nous avons une référence à la ligne ou à la cellule, nous pouvons ensuite ajuster son apparence en définissant ses propriétés liées au style.

L’accès à une ligne nécessite que vous connaissiez l’index de la ligne, qui commence à 0. UnitPrice ligne est la cinquième ligne dans DetailsView, ce qui lui donne un index de 4 et la rend accessible par programmation à l’aide de ExpensiveProductsPriceInBoldItalic.Rows(4). À ce stade, nous pourrions avoir le contenu de la ligne entière affiché en gras, police italique à l’aide du code suivant :

ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Italic = True

Toutefois, cela fera à la fois l’étiquette (Price) et la valeur en gras et en italique. Si nous voulons mettre en gras et en italique uniquement la valeur, nous devons appliquer cette mise en forme à la deuxième cellule de la ligne, ce qui peut être accompli à l’aide des éléments suivants :

ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Italic = True

Étant donné que nos didacticiels ont jusqu’ici utilisé des feuilles de style pour maintenir une séparation propre entre les informations rendues relatives au balisage et aux styles, plutôt que de définir les propriétés de style spécifiques comme indiqué ci-dessus, utilisons plutôt une classe CSS. Ouvrez la feuille de Styles.css style et ajoutez une nouvelle classe CSS nommée ExpensivePriceEmphasis avec la définition suivante :

.ExpensivePriceEmphasis
{
    font-weight: bold;
    font-style: italic;
}

Ensuite, dans le gestionnaire d'événements DataBound, définissez la propriété CssClass de la cellule sur ExpensivePriceEmphasis. Le code suivant montre le DataBound gestionnaire d’événements dans son intégralité :

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
       ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).CssClass = _
            "ExpensivePriceEmphasis"
    End If
End Sub

Lors de l’affichage de Chai, qui coûte moins de 75,00 $, le prix est affiché dans une police normale (voir la figure 4). Toutefois, lors de l’affichage de Mishi Kobe Niku, qui a un prix de 97,00 $, le prix est affiché dans une police italique gras (voir la figure 5).

Figure 4 : Les prix inférieurs à 75,00 $ sont affichés dans une police normale (cliquez pour afficher l’image de taille complète)

Figure 5 : Les prix des produits coûteux sont affichés en gras, police italique (cliquez pour afficher l’image de taille complète)

Utilisation du gestionnaire d’événements duDataBoundcontrôle FormView

Les étapes permettant de déterminer les données sous-jacentes liées à un FormView sont identiques à celles d’un DetailsView pour créer un gestionnaire d’événements DataBound , de convertir la DataItem propriété en type d’objet approprié lié au contrôle et de déterminer comment procéder. FormView et DetailsView diffèrent toutefois dans la façon dont l’apparence de leur interface utilisateur est mise à jour.

FormView ne contient aucun BoundFields et ne contient donc pas la Rows collection. Au lieu de cela, un FormView est composé de modèles, qui peuvent contenir un mélange de syntaxe html statique, de contrôles Web et de liaison de données. L’ajustement du style d’un FormView implique généralement d’ajuster le style d’un ou plusieurs contrôles Web dans les modèles de FormView.

Pour illustrer cela, nous allons utiliser un FormView pour répertorier les produits comme dans l’exemple précédent, mais cette fois, nous allons afficher uniquement le nom et les unités de produit en stock avec les unités en stock affichées dans une police rouge si elle est inférieure ou égale à 10.

Étape 4 : Affichage des informations sur le produit dans un FormView

Ajoutez un FormView à la CustomColors.aspx page sous le DetailsView et définissez sa propriété ID à LowStockedProductsInRed. Liez FormView au contrôle ObjectDataSource créé à l’étape précédente. Cela crée un ItemTemplate, EditItemTemplateet InsertItemTemplate pour FormView. Supprimez EditItemTemplate et InsertItemTemplate et simplifiez ItemTemplate pour inclure uniquement les valeurs ProductName et UnitsInStock, chacune dans son propre contrôle Label nommé de manière appropriée. Comme avec DetailsView de l’exemple précédent, cochez également la case Activer la pagination dans la balise active de FormView.

Une fois ces modifications modifiées, le balisage de FormView doit ressembler à ce qui suit :

<asp:FormView ID="LowStockedProductsInRed" runat="server"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <b>Product:</b>
        <asp:Label ID="ProductNameLabel" runat="server"
         Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        <b>Units In Stock:</b>
        <asp:Label ID="UnitsInStockLabel" runat="server"
          Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:FormView>

Notez que le ItemTemplate contient :

• Html statique, le texte « Product : » et « Units In Stock : » ainsi que les éléments <br /> et <b>.
• Les contrôles Web les deux contrôles Label, ProductNameLabel et UnitsInStockLabel.
• Syntaxe de liaison de données, les syntaxes <%# Bind("ProductName") %> et <%# Bind("UnitsInStock") %>, qui attribuent les valeurs de ces champs aux propriétés des contrôles Label Text.

Étape 5 : Détermination par programmation de la valeur des données dans le gestionnaire d’événements DataBound

Une fois le balisage de FormView terminé, l’étape suivante consiste à déterminer par programmation si la UnitsInStock valeur est inférieure ou égale à 10. Cela s’effectue exactement de la même manière avec le FormView qu’avec le DetailsView. Commencez par créer un gestionnaire d’événements pour l’événement DataBound formView.

Figure 6 : Créer le gestionnaire d’événements DataBound

Dans le gestionnaire d’événements, castez la propriété de DataItem FormView sur une ProductsRow instance et déterminez si la UnitsInPrice valeur est telle que nous devons l’afficher dans une police rouge.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
        End If
    End If
End Sub

Étape 6 : Mise en forme du contrôle d’étiquette UnitsInStockLabel dans le ItemTemplate de FormView

La dernière étape consiste à mettre en forme la valeur affichée UnitsInStock dans une police rouge si la valeur est de 10 ou moins. Pour ce faire, nous devons accéder par programmation au UnitsInStockLabel dans le ItemTemplate et définir ses propriétés de style afin que son texte soit affiché en rouge. Pour accéder à un contrôle Web dans un modèle, utilisez la FindControl("controlID") méthode comme suit :

Dim someName As WebControlType = _
    CType(FormViewID.FindControl("controlID"), WebControlType)

Pour notre exemple, nous voulons accéder à un contrôle Label dont ID la valeur est UnitsInStockLabel:

Dim unitsInStock As Label = _
    CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

Une fois que nous avons une référence programmatique au contrôle Web, nous pouvons modifier ses propriétés liées au style en fonction des besoins. Comme dans l’exemple précédent, j’ai créé une classe CSS nommée Styles.cssLowUnitsInStockEmphasis. Pour appliquer ce style au contrôle Web Label, définissez sa CssClass propriété en conséquence.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
            unitsInStock.CssClass = "LowUnitsInStockEmphasis"
        End If
    End If
End Sub

Remarque

La syntaxe utilisée pour accéder par programmation au contrôle Web via FindControl("controlID") et définir ses propriétés de style peut également être appliquée lors de l’utilisation des TemplateFields dans les contrôles DetailsView ou GridView. Nous allons examiner TemplateFields dans notre prochain tutoriel.

Les figures 7 montrent FormView lors de l’affichage d’un produit dont UnitsInStock la valeur est supérieure à 10, tandis que le produit de la figure 8 a sa valeur inférieure à 10.

Figure 7 : Pour les produits avec des unités suffisamment grandes en stock, aucune mise en forme personnalisée n’est appliquée (cliquez pour afficher l’image de taille complète)

Figure 8 : Les unités en nombre de stock sont affichées en rouge pour ces produits avec des valeurs de 10 ou moins (cliquez pour afficher l’image de taille complète)

Mise en forme avec l’événementRowDataBoundGridView

Nous avons examiné précédemment la séquence d’étapes dans laquelle DetailsView et FormView contrôlent la progression pendant la liaison de données. Examinons à nouveau ces étapes en tant qu’actualisation.

1. L’événement du contrôle Web de DataBinding données se déclenche.
2. Les données sont liées au contrôle Web de données.
3. L’événement du contrôle Web de DataBound données se déclenche.

Ces trois étapes simples sont suffisantes pour DetailsView et FormView, car elles n’affichent qu’un seul enregistrement. Pour GridView, qui affiche tous les enregistrements liés à celui-ci (pas seulement la première), l’étape 2 est un peu plus impliquée.

À l’étape 2, GridView énumère la source de données et, pour chaque enregistrement, crée une GridViewRow instance et lie l’enregistrement actif à celui-ci. Pour chaque GridViewRow ajout à GridView, deux événements sont déclenchés :

• RowCreated se déclenche une fois le GridViewRow créé
• RowDataBound se déclenche une fois que l’enregistrement actif a été lié au GridViewRow.

Pour GridView, la liaison de données est plus précisément décrite par la séquence d’étapes suivante :

1. L’événement DataBinding GridView se déclenche.

2. Les données sont liées à GridView.

   Pour chaque enregistrement dans la source de données

   1. Créer un objet GridViewRow
   2. Déclencher l’événement RowCreated
   3. Lier l’enregistrement à l’objet GridViewRow
   4. Déclencher l’événement RowDataBound
   5. Ajouter GridViewRow à la collection Rows

3. L’événement DataBound GridView se déclenche.

Pour personnaliser le format des enregistrements individuels de GridView, nous devons ensuite créer un gestionnaire d’événements pour l’événement RowDataBound . Pour illustrer cela, nous allons ajouter un GridView à la CustomColors.aspx page qui répertorie le nom, la catégorie et le prix de chaque produit, en mettant en évidence les produits dont le prix est inférieur à 10,00 $ avec une couleur d’arrière-plan jaune.

Étape 7 : Affichage des informations sur le produit dans un GridView

Ajoutez un GridView sous le FormView de l'exemple précédent et définissez sa propriété ID à HighlightCheapProducts. Étant donné que nous avons déjà un ObjectDataSource qui retourne tous les produits de la page, liez GridView à cela. Enfin, modifiez boundFields de GridView pour inclure uniquement les noms, catégories et prix des produits. Une fois ces modifications modifiées, le balisage de GridView doit ressembler à ceci :

<asp:GridView ID="HighlightCheapProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

La figure 9 montre notre progression jusqu’à ce point lorsqu’elle est vue par le biais d’un navigateur.

Figure 9 : GridView répertorie le nom, la catégorie et le prix de chaque produit (cliquez pour afficher l’image de taille complète)

Étape 8 : Détermination par programmation de la valeur des données dans le gestionnaire d’événements RowDataBound

Lorsque l'objet ProductsDataTable est lié à GridView, les instances de ProductsRow sont énumérées et pour chacune d'entre elles, un ProductsRow est créé pour GridViewRow. La propriété GridViewRow de DataItem est assignée à l'élément particulier ProductRow, après quoi le gestionnaire d'événements RowDataBound du GridView est déclenché. Pour déterminer la UnitPrice valeur de chaque produit lié à GridView, nous devons ensuite créer un gestionnaire d’événements pour l’événement RowDataBound gridView. Dans ce gestionnaire d’événements, nous pouvons inspecter la UnitPrice valeur de l’élément actif GridViewRow et prendre une décision de mise en forme pour cette ligne.

Ce gestionnaire d’événements peut être créé à l’aide de la même série d’étapes qu’avec FormView et DetailsView.

Figure 10 : Créer un gestionnaire d’événements pour l’événement RowDataBound gridView

La création du gestionnaire d’événements de cette manière entraîne l’ajout automatique du code suivant à la partie de code de la page ASP.NET :

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

End Sub

Lorsque l’événement RowDataBound se déclenche, le gestionnaire d’événements accepte comme deuxième paramètre un objet de type GridViewRowEventArgs, lequel a une propriété nommée Row. Cette propriété retourne une référence à celle GridViewRow qui était uniquement liée aux données. Pour accéder à l'instance ProductsRow qui est liée à GridViewRow, nous utilisons la propriété DataItem de la manière suivante :

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
    End If
End Sub

Lorsque vous travaillez avec le RowDataBound gestionnaire d’événements, il est important de garder à l’esprit que GridView est composé de différents types de lignes et que cet événement est déclenché pour tous les types de lignes. Un GridViewRowtype peut être déterminé par sa RowType propriété et peut avoir l’une des valeurs possibles :

• DataRow une ligne liée à un enregistrement dans le GridView DataSource
• EmptyDataRow la ligne affichée si le GridView est DataSource vide
• Footer la ligne du pied de page ; affichée si la propriété de ShowFooter GridView est définie sur True
• Header ligne d’en-tête ; s’affiche si la propriété ShowHeader de GridView est définie True sur (la valeur par défaut)
• Pager pour GridView qui implémente la pagination, la ligne qui affiche l’interface de pagination
• Separator non utilisé pour GridView, mais utilisé par les RowType propriétés des contrôles DataList et Repeater, deux contrôles Web de données que nous aborderons dans les prochains didacticiels

Étant donné que les lignes EmptyDataRow, Header, Footer, et Pager ne sont pas associées à un enregistrement DataSource, elles auront toujours une valeur de Nothing pour leur propriété DataItem. Pour cette raison, avant d’essayer d’utiliser la propriété actuelle de GridViewRowDataItem, nous devons d’abord nous assurer que l'on a affaire à un DataRow. Pour ce faire, vérifiez la propriété GridViewRow de RowType comme suit :

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
        End If
    End If
End Sub

Étape 9 : Mise en surbrillance de la ligne jaune lorsque la valeur UnitPrice est inférieure à 10,00 $

La dernière étape consiste à mettre en surbrillance l’intégralité GridViewRow par programmation si la UnitPrice valeur de cette ligne est inférieure à 10,00 $. La syntaxe d’accès aux lignes ou cellules d’un GridView est identique à celle de DetailsView GridViewID.Rows(index) pour accéder à la ligne entière, GridViewID.Rows(index).Cells(index) pour accéder à une cellule particulière. Toutefois, lorsque le gestionnaire d’événements déclenche, la liaison des données RowDataBound n’a pas encore été ajoutée à la collection de GridViewRow du GridView. Par conséquent, à partir du gestionnaire d’événements, vous ne pouvez pas accéder à l’instance actuelle GridViewRow à l’aide de la collection Rows RowDataBound.

Au lieu de GridViewID.Rows(index), nous pouvons référencer l'instance actuelle GridViewRow dans le gestionnaire d'événements RowDataBound à l'aide de e.Row. Autrement dit, pour mettre en évidence l’instance actuelle GridViewRow à partir du RowDataBound gestionnaire d’événements, nous allons utiliser :

e.Row.BackColor = System.Drawing.Color.Yellow

Au lieu de définir directement la propriété de GridViewRow, restons sur l'utilisation des classes CSS. J’ai créé une classe CSS nommée AffordablePriceEmphasis qui définit la couleur d’arrière-plan sur jaune. Le gestionnaire d’événements complet RowDataBound suit :

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
            e.Row.CssClass = "AffordablePriceEmphasis"
        End If
    End If
End Sub

Figure 11 : Les produits les plus abordables sont mis en surbrillance jaune (cliquez pour afficher l’image de taille complète)

Résumé

Dans ce tutoriel, nous avons vu comment mettre en forme gridView, DetailsView et FormView en fonction des données liées au contrôle. Pour ce faire, nous avons créé un gestionnaire pour les événements DataBound ou RowDataBound, où les données de base ont été examinées et la mise en forme modifiée si nécessaire. Pour accéder aux données liées à un DetailsView ou FormView, nous utilisons la DataItem propriété dans le DataBound gestionnaire d’événements ; pour un GridView, la propriété de GridViewRow chaque DataItem instance contient les données liées à cette ligne, qui est disponible dans le RowDataBound gestionnaire d’événements.

La syntaxe permettant d’ajuster par programmation la mise en forme du contrôle Web de données dépend du contrôle Web et de la façon dont les données à mettre en forme sont affichées. Pour les contrôles DetailsView et GridView, les lignes et les cellules sont accessibles par un index ordinal. Pour FormView, qui utilise des modèles, la FindControl("controlID") méthode est couramment utilisée pour localiser un contrôle Web à partir du modèle.

Dans le tutoriel suivant, nous allons examiner comment utiliser des modèles avec GridView et DetailsView. En outre, nous verrons une autre technique pour personnaliser la mise en forme en fonction des données sous-jacentes.

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. Les réviseurs principaux de ce didacticiel étaient E.R. Gilmore, Dennis Patterson et Dan Jagers. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.

Précédent Suivant