PRÉSENTATION D'ASP.NET WEB PAGES

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.

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

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

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.

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.

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.)

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.

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.

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▲

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

VIII-B. Structured Query Langage (SQL)▲

Select * From Movies

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

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

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

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 » :

 

Sélectionnez

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

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

 

Sélectionnez

<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).

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 :

 

Sélectionnez

@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 :

 

Sélectionnez

<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 :

 

Sélectionnez

@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 :

 

Sélectionnez

<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.

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 :

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.

Introduction to ASP.NET Web Programming Using the Razor Syntax

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-A. Remerciements▲

XV-B. Sources▲