Utilisation des modèles de FormView (C#)

par Scott Mitchell

Télécharger le PDF

Contrairement à DetailsView, FormView n’est pas composé de champs. Au lieu de cela, FormView est rendu à l’aide de modèles. Dans ce tutoriel, nous allons examiner l’utilisation du contrôle FormView pour présenter un affichage moins rigide des données.

Présentation

Dans les deux derniers didacticiels, nous avons vu comment personnaliser les sorties des contrôles GridView et DetailsView à l’aide de TemplateFields. TemplateFields permettent de personnaliser le contenu d'un champ spécifique de manière très détaillée, mais en fin de compte, GridView et DetailsView ont une apparence plutôt carrée, de type grille. Pour de nombreux scénarios, une disposition semblable à la grille est idéale, mais parfois un affichage plus fluide et moins rigide est nécessaire. Lors de l’affichage d’un enregistrement unique, une telle disposition fluide est possible à l’aide du contrôle FormView.

Contrairement à DetailsView, FormView n’est pas composé de champs. Vous ne pouvez pas ajouter un Objet BoundField ou TemplateField à un FormView. Au lieu de cela, FormView est rendu à l’aide de modèles. Considérez FormView comme un contrôle DetailsView qui contient un seul TemplateField. FormView prend en charge les modèles suivants :

• ItemTemplate utilisé pour afficher l’enregistrement particulier affiché dans FormView
• HeaderTemplate utilisé pour spécifier une ligne d’en-tête facultative
• FooterTemplate utilisé pour spécifier une ligne de pied de page facultative
• EmptyDataTemplate lorsque l'objet FormView n’a pas d’enregistrements, DataSource est utilisé à la place de EmptyDataTemplate pour rendre le balisage du contrôle
• PagerTemplate peut être utilisé pour personnaliser l’interface de pagination pour les FormViews qui ont activé la pagination
• EditItemTemplate / InsertItemTemplate utilisé pour personnaliser l’interface d’édition ou l'interface d'insertion pour les FormViews qui prennent en charge cette fonctionnalité

Dans ce tutoriel, nous allons examiner l’utilisation du contrôle FormView pour présenter un affichage moins rigide des produits. Au lieu d’avoir des champs pour le nom, la catégorie, le fournisseur, etc., les formView affichent ces valeurs à l’aide d’une combinaison d’un élément d’en-tête ItemTemplate et d’un <table> (voir la figure 1).

Figure 1 : FormView se détache de la disposition Grid-Like vue dans DetailsView (Cliquez pour afficher l’image en taille réelle)

Étape 1 : Liaison des données à FormView

Ouvrez la page FormView.aspx et faites glisser un FormView à partir de la boîte à outils sur la surface de conception. Lors du premier ajout de FormView, il apparaît sous la forme d’une zone grise, nous indiquant qu'un ItemTemplate est nécessaire.

Figure 2 : Impossible de rendre FormView dans l'environnement de design tant qu'un ItemTemplate n’est pas fourni (cliquez pour voir l'image en taille réelle)

ItemTemplate peut être créé manuellement (par le biais de la syntaxe déclarative) ou automatiquement en liant FormView à un contrôle de source de données via le mode Designer. Cette création ItemTemplate automatique contient du code HTML qui répertorie le nom de chaque champ et un contrôle Label dont Text la propriété est liée à la valeur du champ. Cette approche crée également automatiquement un InsertItemTemplate et EditItemTemplate, tous deux sont remplis avec des contrôles de saisie pour chacun des champs de données retournés par le contrôle de la source de données.

Si vous souhaitez créer automatiquement le modèle, depuis la balise intelligente de FormView, ajoutez un nouveau contrôle ObjectDataSource qui appelle la méthode ProductsBLL de la classe GetProducts(). Cela crée un FormView avec un ItemTemplate, InsertItemTemplateet EditItemTemplate. Dans la vue Source, supprimez les balises InsertItemTemplate et EditItemTemplate car nous ne sommes pas intéressés par la création d’un FormView qui prend en charge la modification ou l’insertion pour l'instant. Ensuite, effacez le balisage dans le ItemTemplate afin d'avoir une base propre sur laquelle travailler.

Si vous préférez créer le ItemTemplate fichier manuellement, vous pouvez ajouter et configurer ObjectDataSource en le faisant glisser de la boîte à outils vers le Concepteur. Toutefois, ne définissez pas la source de données de FormView à partir du Concepteur. Au lieu de cela, accédez à la vue Source et définissez manuellement la propriété de FormView DataSourceID sur la ID valeur de ObjectDataSource. Ensuite, ajoutez manuellement le ItemTemplate.

Quelle que soit l’approche que vous avez décidé de prendre, à ce stade, le balisage déclaratif de FormView doit ressembler à ceci :

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

Prenez un moment pour cocher la case Activer la pagination dans la balise active de FormView ; Cela ajoute l’attribut AllowPaging="True" à la syntaxe déclarative de FormView. Définissez également la EnableViewState propriété sur False.

Étape 2 : Définition du balisage de ItemTemplate

Avec FormView lié au contrôle ObjectDataSource et configuré pour prendre en charge la pagination, nous sommes prêts à spécifier le contenu pour le ItemTemplate. Pour ce tutoriel, nous allons afficher le nom du produit dans un <h3> titre. Ensuite, utilisons un code HTML <table> pour afficher les propriétés de produit restantes dans une table à quatre colonnes où les premières et troisième colonnes répertorient les noms de propriétés et la deuxième et la quatrième listent leurs valeurs.

Ce balisage peut être entré via l’interface de modification de modèle de FormView dans le Concepteur ou entrée manuellement par le biais de la syntaxe déclarative. Lorsque je travaille avec des modèles, il est généralement plus rapide de travailler directement avec la syntaxe déclarative, mais n’hésitez pas à utiliser la technique avec laquelle vous êtes le plus à l’aise.

Le balisage suivant montre le balisage déclaratif FormView une fois la ItemTemplatestructure terminée :

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <hr />
        <h3><%# Eval("ProductName") %></h3>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("CategoryName") %></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("SupplierName")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Price:</td>
                <td class="ProductPropertyValue"><%# Eval("UnitPrice",
                  "{0:C}") %></td>
                <td class="ProductPropertyLabel">Units In Stock:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsInStock")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Units On Order:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsOnOrder") %></td>
                <td class="ProductPropertyLabel">Reorder Level:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("ReorderLevel")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit</td>
                <td class="ProductPropertyValue">
                  <%# Eval("QuantityPerUnit") %></td>
                <td class="ProductPropertyLabel">Discontinued:</td>
                <td class="ProductPropertyValue">
                    <asp:CheckBox runat="server" Enabled="false"
                      Checked='<%# Eval("Discontinued") %>' />
                </td>
            </tr>
        </table>
        <hr />
    </ItemTemplate>
</asp:FormView>

Notez que la syntaxe de liaison de données , <%# Eval("ProductName") %>par exemple, peut être injectée directement dans la sortie du modèle. Autrement dit, il n'est pas nécessaire de l'affecter à la propriété d'un contrôle d'étiquette Text. Par exemple, nous avons la ProductName valeur affichée dans un <h3> élément utilisant <h3><%# Eval("ProductName") %></h3>, qui pour le produit Chai s’affiche comme <h3>Chai</h3>.

Les classes CSS ProductPropertyLabel et ProductPropertyValue sont utilisées pour spécifier le style des noms et des valeurs des propriétés du produit dans le <table>. Ces classes CSS sont définies dans Styles.css et entraînent les noms de propriétés soient en gras et alignés à droite et ajoutent une marge intérieure à droite aux valeurs de propriété.

Étant donné qu’il n’existe aucun CheckBoxFields disponible avec FormView, pour afficher la Discontinued valeur sous la forme d’une case à cocher, nous devons ajouter notre propre contrôle CheckBox. La propriété Enabled est définie sur False, ce qui la rend en mode lecture seule, et la propriété Checked du CheckBox est liée à la valeur du champ de données Discontinued.

Avec l’intégralité ItemTemplate , les informations sur le produit sont affichées de manière beaucoup plus fluide. Comparez la sortie DetailsView du dernier didacticiel (Figure 3) avec la sortie générée par FormView dans ce didacticiel (Figure 4).

Figure 3 : Sortie de DetailsView rigide (cliquez pour afficher l’image de taille complète)

Figure 4 : Sortie Fluid FormView (cliquez pour afficher l’image de taille complète)

Résumé

Bien que les contrôles GridView et DetailsView puissent avoir leur sortie personnalisée à l’aide de TemplateFields, les deux continuent de présenter leurs données dans un format de grille, en forme de boîte. Pour ces moments où un enregistrement unique doit être affiché à l’aide d’une disposition moins rigide, FormView est un choix idéal. Comme DetailsView, FormView restitue un enregistrement unique à partir de celui-ci DataSource, mais contrairement à DetailsView, il est composé uniquement de modèles et ne prend pas en charge les champs.

Comme nous l’avons vu dans ce tutoriel, FormView permet une disposition plus flexible lors de l’affichage d’un enregistrement unique. Dans les prochains didacticiels, nous allons examiner les contrôles DataList et Repeater, qui fournissent le même niveau de flexibilité que FormsView, mais sont en mesure d’afficher plusieurs enregistrements (comme GridView).

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

PrécédentSuivant