PRÉSENTATION D'ASP.NET WEB PAGES

Affichage des données

Mike Pope, Tom fitzMacken

Traducteur

Hervé Taraveau

Ce tutoriel vous montre comment créer une base de données dans WebMatrix et comment afficher les données de celle-ci dans une page lorsque vous utilisez ASP.NET Web Pages (Razor).

Commentez

- Titre : PRÉSENTATION D'ASP.NET WEB PAGES

- Auteur : Mike Pope, Tom fitzMacken

- Traducteur : Hervé Taraveau

- Parution : 29 novembre 2018

- Public visé :

- Licence : Copyright ® 2014 Hervé Taraveau. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Préface

- II-A. Qu'est-ce que vous allez apprendre ?

- II-B. Fonctionnalités/technologies abordées :

- III. Qu'est-ce que vous allez construire ?

- IV. Une très brève introduction sur les bases de données

- V. Création d'une base de données

- VI. Création d'une table

- VII. Ajout de quelques exemples de données

- VIII. Affichage des données dans une page en utilisant WebGrid Helper

- VIII-A. Écrire le code de requête de données

- VIII-B. Structured Query Langage (SQL)

- VIII-C. Ajout de balises pour l'affichage de données

- IX. Modifier l'apparence de la grille

- IX-A. Spécifier les colonnes à afficher

- IX-B. Changer l'apparence de la grille

- X. Ajouter une page

- XI. Prochainement

- XII. Listing complet de Movies Page

- XIII. Ressources supplémentaires

- XIV. Information sur les auteurs

- XV. Postface

- XV-A. Remerciements

- XV-B. Sources

I - Introduction

Ce tutoriel vous montre comment créer une base de données dans WebMatrix et comment afficher les données de celle-ci dans une page lorsque vous utilisez ASP.NET Web Pages (Razor). Nous supposons que vous avez lu le tutoriel précédant Présentation d'ASP.NET Web Pages – Notions de base de programmation.

Note de la rédaction Développez.com :

- ce tutoriel est basé sur la technologie ASP.NET Web Pages. Si elle est toujours d’actualité et peut continuer d’être utilisée sans aucun souci pour des projets existants, Microsoft recommande l’usage d’ASP.NET Core Razor Pages pour de nouveaux projets ;

- de plus, ce tutoriel est basé sur l’utilisation de WebMatrix comme environnement de développement. Aujourd’hui, cet environnement est considéré comme obsolète et il est préférable d’utiliser un environnement de développement récent comme Visual Studio ou Visual Studio Code. Néanmoins, cela ne devrait pas gêner la lecture de ce tutoriel ;

- précision vis-à-vis de la version anglaise : les liens invalides ont été retirés de la traduction.

II - Préface

II-A - Qu'est-ce que vous allez apprendre ?

- comment utiliser les outils WebMatrix pour créer une base de données et des tables ;

- comment utiliser les outils WebMatrix pour ajouter des données dans une base de données ;

- comment afficher les données d'une base de données sur une page ;

- comment exécuter des commandes SQL dans ASP.NET Web Pages ;

- comment personnaliser le WebGrid helper pour changer l'affichage des données, paginer et trier.

II-B - Fonctionnalités/technologies abordées :

- les outils de base de données WebMatrix ;

- le WebGrid helper.

III - Qu'est-ce que vous allez construire ?

Dans le tutoriel précédant, les bases de la syntaxe Razor et les assistants vous ont été présentés pour ASP.NET Web Pages (fichiers .cshtml). Dans ce tutoriel, vous allez commencer à créer l'application web que vous allez utiliser tout au long de cette série. C'est une simple application de gestion de films qui vous permettra d'afficher, d'ajouter, de changer, et de supprimer des informations sur les films.

Lorsque vous aurez fini avec ce tutoriel, vous serez capable d'afficher une liste de films qui ressemblera à cette page :

Mais pour commencer, vous devez créer une base de données.

IV - Une très brève introduction sur les bases de données

Ce tutoriel fournira seulement une brève introduction sur les bases de données. Si vous avez une expérience sur celles-ci, vous pouvez passer cette courte section.

Une base de données contient une ou plusieurs tables qui contiennent des informations — par exemples les tables pour les clients, les commandes, et les vendeurs, ou pour les étudiants, les professeurs, les classes et les rangs. Structurellement, une table de base de données ressemble à une feuille de calcul. Imaginez un carnet d'adresses typique. Pour chaque entrée dans le carnet d'adresses (c'est-à-dire, pour chaque personne) vous avez plusieurs éléments d'informations comme le nom, le prénom, l'adresse, l'adresse email et le numéro de téléphone.

Les lignes sont parfois appelées enregistrements, et les colonnes sont parfois appelées champs.

Pour la plupart des tables de la base de données, une table doit avoir une colonne qui contient une valeur unique, comme un numéro de client, numéro de compte…. Cette valeur est connue comme la clé primaire de la table, et vous l'utilisez pour identifier chaque ligne de celle-ci. Dans l'exemple, la colonne ID est la clé primaire pour le carnet d'adresses montré dans l'exemple précédent.

Une grande partie du travail que vous faites dans le développement d'applications web consiste à lire des informations dans une base de données et à les afficher sur une page. Souvent aussi, vous recueillez des informations auprès des utilisateurs et les ajoutez dans une base de données, ou vous modifiez les lignes déjà présentes dans celle-ci. Ensemble, nous allons couvrir toutes ces opérations dans le cadre de ce tutoriel.

Le travail sur les bases de données peut être très complexe et peut nécessiter des connaissances spécialisées. Cependant, pour l'ensemble de ce tutoriel vous avez seulement besoin de comprendre les notions fondamentales, qui seront toutes expliquées à mesure que vous avancerez.

V - Création d'une base de données

WebMatrix inclut des outils qui facilitent la création de bases de données et de tables (la structure d'une base de données est appelée un schéma de base de données). Pour cette série de tutoriels, vous allez créer un base de données qui contient une seule table — Movies.

Ouvrez WebMatrix si vous ne l'avez pas déjà fait, et ouvrez le site WebPagesMovies que vous avez créé dans le tutoriel précédant.

Dans le volet de gauche, cliquez sur l'espace de travail Database.

Le ruban change pour montrer les tâches relatives aux bases de données. Dans le ruban, cliquez sur New Database.

WebMatrix crée une base de données SQL Server CE(1) (un fichier .sdf) qui a le même nom que votre site — WebPagesMovies.sdf. (Vous n'allez pas le faire ici, mais vous pouvez renommer le fichier comme vous le souhaitez, tant qu'il a une extention .sdf.)

VI - Création d'une table

Dans le ruban, cliquez sur New Table. WebMatrix ouvre le concepteur de table dans un nouvel onglet (si l'option New Table n'est pas disponible, assurez-vous que la nouvelle base de données est sélectionnée dans l'arborescence sur la gauche).

Dans la zone de saisie (Text Box) en haut (où le texte affiche « Enter Table Name »), entrez « Movies ».

Le volet sous le nom de la table est l'endroit où vous définissez les colonnes individuellement. Pour la table Movies, pour ce tutoriel, vous allez créer quelques colonnes : ID, Title, Genre et Year.

Dans la zone Name entrez « ID ». En entrant une valeur ici, cela active les zones des contrôles pour la nouvelle colonne.

Allez dans la liste Data Type et choisissez int. Cette valeur spécifie que la colonne ID contiendra des données de type entier (nombre).

Note : nous ne l'indiquerons plus ici, mais vous pouvez utiliser les touches standards de Windows pour vous déplacer dans cette grille. Par exemple, vous pouvez utiliser la touche Tabulation entre les champs, vous pouvez commencer à saisir des lettres dans une liste pour sélectionner un élément, et ainsi de suite.

Tabulez pour passer la saisie Default Value (c'est-à-dire, laisser vide). Tabulez sur la case à cocher Is Primary Key et sélectionnez-la. Cette option indique à la base de données que la colonne ID contiendra une donnée qui identifiera les lignes individuellement (NdT : clé primaire). Ainsi, chaque ligne aura une valeur unique dans la colonne ID que vous pourrez utiliser pour la retrouver.

Choisissez l'option Is Identity. Cette option indique à la base de données qu'elle doit automatiquement générer le nombre séquentiel suivant pour chaque nouvelle ligne. L'option Is Identity fonctionne seulement si vous avez sélectionné l'option Is Primary Key.

Cliquez dans la ligne suivante ou appuyez deux fois sur tabulation pour valider la ligne courante. Cette manipulation sauvegarde la ligne courante et prépare la saisie de la ligne suivante. Notez que la colonne Default Value affiche maintenant Null. (Pour ainsi dire, Null est la valeur par défaut pour la colonne Default Value.)

Lorsque vous avez fini la définition de la nouvelle colonne ID, le concepteur ressemblera à cette illustration :

Pour créer la colonne suivante, cliquez dans la zone de saisie dans la colonne Name. Entrez « Title » pour la colonne et sélectionnez nvarchar pour la valeur Data Type. La partie « var » de nvarchar indique à la base de données que les données de cette colonne seront des chaînes de caractères dont la taille pourra varier d'un enregistrement à un autre (le préfixe « n » représente « national », lequel indique que le champ peut contenir des données de type caractère pour n'importe quel alphabet — c'est-à-dire, le champ contient des données Unicode).

Lorsque vous choisissez nvarchar, une autre zone de saisie apparaît où vous pouvez saisir la longueur maximale du champ. Entrez 50, en supposant qu'aucun titre de film avec lesquels vous allez travailler dans ce tutoriel ne dépassera les 50 caractères.

Passez Default Value et effacez l'option Allows Null. Vous ne voulez pas que la base de données permette l'enregistrement de films qui n'ont pas de titre.

Lorsque vous avez fini et passé à la ligne suivante, le concepteur ressemblera à cette illustration :

Répétez ces opérations pour créer une colonne « Genre », sauf pour la longueur, placez-la juste à 30.

Créez une autre colonne nommée « Year ». Pour le type de données, choisissez nchar (pas nvarchar) et placer une longueur de 4(2). Pour l'année, vous allez utiliser un nombre à quatre chiffres comme « 1995 » ou « 2010 », aussi vous n'avez pas besoin d'une colonne à taille variable.

Voici à quoi ressemble la conception à la fin :

Appuyez sur Ctrl+S ou cliquez le bouton Save dans la barre d'outils d'accès rapide. Fermez le concepteur de base de données par la fermeture de l'onglet.

VII - Ajout de quelques exemples de données

Plus tard dans cette série de tutoriels vous créerez une page où vous pourrez saisir de nouveaux films dans un formulaire. Pour l'instant, cependant, vous pouvez ajouter quelques exemples de données que vous pouvez afficher sur une page.

Dans l'espace de travail Database de WebMatrix, notez que vous avez une arborescence vous montrant le fichier .sdf créé auparavant.

Faites un clic-droit sur le nœud Movies et choisissez Data. WebMatrix ouvre une grille où vous pouvez saisir des données dans la table Movies :

Cliquez sur la colonne Title et saisissez « When Harry Met Sally ». Passer à la colonne Genre (vous pouvez utiliser la touche Tabulation) et saisissez « Romantic Comedy ». Passez à la colonne Year et saisissez « 1989 » :

Appuyez sur Entrée et WebMatrix sauvegarde la nouvelle entrée. Notez que la colonne ID a été renseignée.

Saisissez un autre film (par exemple, « Gone with the Wind », « Drama », « 1939 »). La colonne ID est de nouveau remplie.

Saisissez un troisième film (par exemple, « Ghostbuster », « Comedy »). À titre expérimental, laissez la colonne Year vide et appuyez sur Entrée. Parce que vous avez déselectionné l'option Allow Nulls, la base de données affiche une erreur :

Cliquez sur OK pour revenir en arrière et saisir la valeur (l'année pour « Ghostbuster » est 1984), et appuyez sur Entrée.

Saisissez plusieurs films jusqu'à ce que vous en ayez huit ou plus Avec huit éléments il sera plus facile de travailler avec la pagination plus tard. Mais si cela est trop, entrez-en juste quelques-uns pour l'instant. Le nombre de données importe peu.

Si vous avez saisi tous les films sans aucune erreur, les valeurs ID sont séquentielles. Si vous avez essayé de sauvegarder un enregistrement de film incomplet, les nombres ID ne seront pas séquentiels. C’est tout à fait normal. Les nombres n'ont aucune signification inhérente, et la seule chose importante c'est qu'ils sont uniques dans la table Movies.

Fermer l'onglet qui contient le concepteur de bases de données.

Maintenant vous pouvez activer l'affichage de ces données sur une page Web.

VIII - Affichage des données dans une page en utilisant WebGrid Helper

Pour afficher des données dans une page, vous allez utiliser le WebGrid Helper. Cet assistant produit un affichage dans une grille ou tableau (lignes et colonnes). Comme vous le verrez, vous serez capable de définir la grille avec des mises en forme et d'autres fonctionnalités.

Pour utiliser la grille, vous devrez écrire quelques lignes de code qui serviront de modèle pour la plupart des accès aux données que vous ferez dans ce tutoriel.

Note : vous avez actuellement plusieurs options pour afficher des données dans une page ; le WebGrid Helper en est juste une. Nous l'avons choisi pour ce tutoriel parce que c'est la façon la plus simple pour afficher des données et qu'il est raisonnablement flexible. Dans le prochain tutoriel de la série, vous verrez comment utiliser les données d'une manière plus « manuelle » pour travailler avec celles-ci dans une page, ce qui permet un contrôle plus direct de l'affichage des données.

Dans le volet de gauche de WebMatrix, cliquez sur l'espace de travail Files.

La nouvelle base de données que vous avez créé est dans le dossier App_Data. Si le dossier n'existe pas, WebMatrix le crée pour votre nouvelle base de données (le dossier aurait pu exister si vous aviez préalablement installé l'assistant).

Dans l'arborescence, sélectionnez la racine de votre site Web. Vous devez sélectionner la racine de votre site Web, sinon le nouveau fichier sera ajouté dans le dossier App_Data.

Dans le ruban, cliquez sur New. Dans la boîte Choose a file Type, choisissez CSHTML.

Dans la zone de saisie Name, nommez la nouvelle page « Movies.cshtml » :

Cliquez sur le bouton OK. WebMatrix ouvre un nouveau fichier avec un squelette d'élément. Premièrement vous allez écrire du code pour aller chercher des données dans la base de données, ensuite vous allez ajouter du balisage à la page pour vraiment afficher les données.

VIII-A - Écrire le code de requête de données

En haut de la page, entre les caractères @{ et }, entrez le code suivant (assurez-vous de placer ce code entre les accolades ouvrantes et fermantes) :

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

La première ligne ouvre la base de données que vous avez créée précédemment, ce qui est toujours la première chose à faire lorsque vous travaillez avec la base de données. Vous appelez une méthode nommée Database.Open pour la base de données à ouvrir. Notez que vous n'incluez pas .sdf dans le nom. La méthode Open suppose que l'on cherche un fichier .sdf (c'est-à-dire, WebPagesMovies.sdf) et que ce fichier .sdf est dans le dossier App_Data. Auparavant, notons que le dossier App_Data est réservé ; c'est un des scénario où ASP.NET fait des suppositions sur le nom.)

Lorsque la base de données est ouverte, elle est référencée avec la variable nommée db (elle pourrait avoir un autre nom). La variable db vous sert pour les interactions avec la base de données.

La seconde ligne lit réellement les données de la base de données en utilisant la méthode Query. Notez comment le code travaille : la variable db a une référence sur la base de données ouverte, et vous appelez la méthode Query en utilisant la variable db (db.Query).

La requête est une instruction SQL Select (pour un petit rappel sur SQL, regardez les explications plus loin). Dans l'instruction, Movies identifie la table concernée par la requête. Le caractère * spécifie que toutes les colonnes de la table seront renvoyées (vous pourriez aussi indiquer chaque colonne, séparée par une virgule).

Le résultat de la requête, le cas échéant, est renvoyé et mis à disposition dans la variable selectData. Là encore, la variable pourrait être nommée autrement.

Enfin, la troisième ligne indique à ASP.NET que vous voulez utiliser une instance de WebGrid Helper. Vous créez (instanciez) l'objet helper en utilisant le mot clé New et transmettez le résultat de la requête via la variable selectData. Le nouvel objet WebGrid, ainsi que le résultat de la requête de base de données, sont disponibles dans la variable Grid. Vous aurez besoin de ces résultats par la suite pour actualiser les affichages des données dans la page.

À ce stade, la base de données est ouverte, vous avez obtenu les données que vous vouliez, et vous avez préparé le WebGrid helper avec les données. La suite consiste à créer le balisage dans la page.

VIII-B - Structured Query Langage (SQL)

SQL est un langage qui est utilisé dans beaucoup de base de données relationnelles pour gérer les données dans celles-ci. Il inclut des commandes qui vous permettent de récupérer des données, de les mettre à jour, et qui vous permettent de créer, modifier et gérer les données dans les tables de la base de données. SQL est différent d'un langage de programmation (comme C#). Avec SQL, vous interrogez la base de données quand vous voulez. Le travail de celle-ci est de comprendre comment obtenir les données ou effectuer la tâche. Voici un exemple de quelques commandes SQL et ce qu'elles font :

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

La première instruction Select obtient toutes les colonnes (spécifiés par *) de la table Movies.

La deuxième instruction Select extrait les colonnes ID, Name, et Price des enregistrements de la table Product dont la valeur de la colonne Price est supérieure à dix. La commande retourne le résultat dans l'ordre alphabétique basé sur les valeurs de la colonne Name. Si aucun enregistrement ne correspond aux critères de prix, la commande renvoie un jeu vide.

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

Cette commande insère un nouvel enregistrement dans la table Product, plaçant « Croissant » dans la colonne Name, « A flaky delight » dans la colonne Description et 1,99 dans la colonne Price.

Notez que lorsque vous spécifiez une valeur non numérique, la valeur est incluse dans des « simples cotes » (pas des guillemets, comme en C#). Vous utilisez ces « simples cotes » autour des valeurs textes ou dates, mais pas autours des nombres.

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

Cette commande détruit des enregistrements dans la table Product dont les valeurs de la colonne Date est antérieure au 1er janvier 2008 (la commande suppose que la table possède une telle colonne, bien sûr). Ici, la date est entrée dans le format MM/DD/YYYY, mais elle doit être entrée dans le format utilisé pour vos paramètres régionaux.

Les commandes Insert et Delete ne retournent pas de jeu de résultat. À la place, elles retournent un nombre qui vous indique combien d'enregistrements sont affectés par la commande.

Pour certaines de ces opérations (comme insérer et supprimer des enregistrements), le processus qui requiert ces opérations doit avoir les permissions appropriées dans la base de données. C'est pourquoi sur les bases de données de production vous devez fournir un nom et un mot de passe lorsque vous vous connectez.

Il y a une douzaine de commandes SQL, mais elles suivent toutes un modèle comme les commandes que vous venez de voir. Vous pouvez utiliser les commandes SQL pour créer des tables, compter le nombre d'enregistrements d'une table, calculer des prix et exécuter de nombreuses autres opérations.

VIII-C - Ajout de balises pour l'affichage de données

À l'intérieur de l'élément <head>, définissez le contenu de l'élément <title> à « Movies » :

<head>
<meta charset="utf-8" />
<title>Movies</title>
</head>

À l'intérieur de l'élément <body> de la page, ajoutez ce qui suit :

<h1>Movies</h1>
<div>
@grid.GetHtml()
</div>

C'est tout. La variable Grid est la valeur que vous avez créée lorsque vous avez créé l'objet WebGrid dans le code auparavant.

Dans l'arborescence WebMatrix, faites un clic-droit sur la page et sélectionnez Launch in browser. Vous verrez quelque chose comme cette page :

Cliquez sur un lien d'en-tête de colonne pour trier sur celle-ci. Être capable de trier en cliquant sur un en-tête de colonne est une fonctionnalité intégrée dans WebGrid helper.

La méthode GetHtml, comme son nom le suggère, génère le balisage qui affiche les données. Par défaut, la méthode GetHtml génère un élément <table> (si vous voulez, vous pouvez afficher le rendu en affichant la source de la page dans votre navigateur).

IX - Modifier l'apparence de la grille

Il est facile d'utiliser le WebGrid helper comme vous le faisiez, et le résultat affiché est clair. Le WebGrid helper a toutes sortes d'options qui vous permettent de contrôler l'affichage des données. Il y en a beaucoup trop pour toutes les explorer dans ce tutoriel, mais cette partie vous donnera quelques idées de certaines de ces options. Quelques options supplémentaires seront étudiées plus tard dans cette série de tutoriels.

IX-A - Spécifier les colonnes à afficher

Pour commencer, vous pouvez spécifier que vous voulez afficher seulement certaines colonnes. Par défaut, comme vous avez vu, la grille affiche les quatre colonnes de la table Movies.

Dans le fichier Movies.cshtml, remplacez le balisage @grid.GetHtml() que vous venez d'ajouter par ce qui suit :

@grid.GetHtml(
columns: grid.Columns(
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year")
)
)

Pour indiquer au helper quelles colonnes afficher, vous incluez un paramètre columns à la méthode GetHtml et l'ajoutez à la collection de colonnes. Dans la collection, vous pouvez spécifier chaque colonne à inclure. Vous spécifiez une colonne à afficher en incluant un objet grid.Column, et en passant le nom de la colonne que vous souhaitez (ces colonnes doivent être incluses dans le résultat de la requête SQL — le WebGrid helper ne peut pas afficher une colonne qui n'est pas retournée par la requête).

Lancer de nouveau la page Movies.cshtml dans le navigateur, et cette fois vous obtenez un affichage qui ressemble au suivant (notez qu'il n'y a pas de colonne ID affichée) :

IX-B - Changer l'apparence de la grille

Il y a un peu plus d'options pour l'affichage des colonnes, quelques-unes seront étudiées plus tard dans cette série de tutoriels. Pour l'instant, cette partie va vous apprendre les façons dont vous pouvez utiliser un style sur l'ensemble de la grille.

À l'intérieur de la section <head> de la page, juste avant la balise de fermeture </head>, ajouter l'élément <style> suivant :

<style type="text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.alt { background-color: #E8E8E8; color: #000; }
</style>

Cette balise CSS définit les classes nommées grid, head, et ainsi de suite. Vous pourriez aussi mettre ces définitions de style dans un fichier .css séparé et le lier à la page (en fait, vous le ferez plus loin dans cette série de tutoriels). Mais pour faire simple ici, il est à l'intérieur même de la page qui affiche les données.

Maintenant vous pouvez obtenir du WebGrid helper qu'il utilise ces classes de style. Le helper a un nombre de propriétés (par exemple, tableStyle) juste pour cette raison — vous leur assignez un nom de classe de style CSS, et ce nom de classe est rendu comme une partie du balisage restitué par le helper.

Changez le balisage grid.GetHtml afin qu'il ressemble maintenant à ce code :

@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year")
)
)

Ce qui est nouveau ici c'est que vous avez ajouté les paramètres de style tableStyle, headerStyle, et alternatingRowStyle à la méthode GetHtml. Ces paramètres ont été définis avec les noms de style CSS que vous avez ajouté avant.

Exécutez la page, et cette fois vous voyez une grille moins simple qu'avant :

Pour voir ce que la méthode GetHtml génère, vous pouvez regarder la source de la page dans le navigateur. Nous n'irons pas plus loin dans les détails, mais le point important c'est qu'en spécifiant des paramètres tels que tableStyle, vous obligez la grille à générer des balisages HTML comme suit :

<table class="grid">

Le balisage <table> a un attribut class ajouté qui référence l'une des règles CSS que vous avez ajoutée précédemment. Ce code vous montre le modèle de base — les différents paramètres pour la méthode GetHtml vous permettent de référencer des classes CSS que la méthode génère alors avec le balisage. Ce que vous faites avec les classes CSS vous appartient.

X - Ajouter une page

Comme dernière tâche dans ce tutoriel, vous allez ajouter la pagination à la grille. Pour le moment l'affichage de tous les films n'est pas un problème. Mais si vous ajoutez des centaines de films, la page affichée obtenue serait longue.

Dans le code de la page, changez la ligne qui crée l'objet Webgrid par le code suivant :

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

La seule différence par rapport à avant est que vous avez ajouté un paramètre rowsPerPage qui est défini à trois.

Exécutez la page. La grille affiche trois lignes à un moment, plus des liens de navigation qui permettent d'utiliser la pagination avec les films de votre base de données :

XI - Prochainement

Dans le prochain tutoriel, vous apprendrez comment utiliser le code Razor et C# pour obtenir les saisies utilisateurs dans un formulaire. Vous allez ajouter une zone de recherche sur la page des films afin que vous puissiez trouver les films par titre ou par genre.

XII - Listing complet de Movies Page

@{
var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Movies</title>
<style type="text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.alt { background-color: #E8E8E8; color: #000; }
</style>
</head>
<body>
<h1>Movies</h1>
<div>
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year")
)
)
</div>
</body>
</html>

XIII - Ressources supplémentaires

Introduction to ASP.NET Web Programming Using the Razor Syntax

XIV - Information sur les auteurs

Mike Pope — Mike Pope est un programmeur, créateur de l'équipe chargée du suivi du contenu sur la plate-forme Web et Outils Microsoft.

Tom FitzMacken — Tom FitzMacken est un auteur senior dans la programmation, créateur et membre de l'équipe chargée du du contenu sur la plate-forme Web et Outils.

XV - Postface

XV-A - Remerciements

Nous remercions rv26t pour la traduction, François DORIN pour la relecture et la validation technique et jacques_jean pour la relecture orthographique.

XV-B - Sources

Traduction de l'article de l'équipe de Microsoft ASP.NET — Introducing ASP.NET Web Pages - Displaying Data

(1)NdT : SQL Server CE a été déprécié par Microsoft en février 2013. Pour de nouveaux projets, il est donc recommandé d’utiliser des alternatives, comme SQLite ou LocalDB.

(2)NdT : il est étonnant que l’auteur ait choisi de représenter l’année comme une chaîne de quatre caractères au lieu d’utiliser un entier !