Création d'une application Web avec ASP.NET Core Razor Pages et Visual Studio Code

Hinault Romaric

Avec la version 2.0 de ASP.NET Core, Microsoft a offert une nouvelle technologie pour le développement d'applications Web. Il s'agit de Razor Pages. Dans ce tutoriel, nous verrons en détail comment mettre en place une application ASP.NET Core Razor Pages en utilisant Visual Studio Code et Entity Framework.

Commentez

- Titre : Création d'une application Web avec ASP.NET Core Razor Pages et Visual Studio Code

- Auteur : Hinault Romaric

- Parution : 13 novembre 2017

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2017 Hinault Romaric. 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. Droits de diffusion permanents accordés à Developpez LLC.

Sommaire

- I. Introduction

- II. Prérequis

- III. Description des outils utilisés

- III-A. Présentation de .NET Core

- III-B. Présentation de ASP.NET Core

- III-C. Visual Studio Code

- III-D. SQLite

- III-E. Entity Framework Core

- IV. Création du projet de démarrage

- V. Débogage avec Visual Studio Code

- VI. Structure d'une application Razor Pages

- VII. Description d'une page Razor

- VII-A. PageModel

- VIII. Routage pour Razor Pages

- IX. Opérations CRUD avec Entity Framework Core

- IX-A. Ajout du modèle

- IX-B. Création du DBContext

- IX-C. Enregistrement du DBContext

- IX-D. Génération de la base de données

- IX-E. Génération des pages CRUD

- IX-E-1. Configuration du Scaffold

- IX-E-2. Scaffold du model Student

- IX-E-3. Test de l'application

- X. Description des pages générées

- X-A. La page Index

- X-B. La page Create

- XI. Conclusion

- XII. Remerciements

- XIII. Références

I - Introduction

Au lancement de ASP.NET Core, ce dernier offrait la possibilité de créer des applications Web en utilisant uniquement le pattern MVC. Le recours à MVC impose l'utilisation de nombreux fichiers. Pour une petite application, l'utilisation du modèle MVC entraîne plus d'effort et impose la maîtrise d'ASP.NET Core MVC.

Pour les développeurs qui veulent mettre en place de petites applications Web sans avoir à faire face aux contraintes architecturales qu'impose MVC, Razor Pages est désormais offert avec ASP.NET Core 2.0. Razor Pages peut également être pratique pour les débutants ou les développeurs qui ont précédemment utilisé ASP.NET WebForms.

Razor Pages offre un modèle de programmation permettant d'inclure dans un fichier .cshtml du code HTML, CSS, JavaScript et C# pour produire une page Web, sans avoir recours à un contrôleur comme avec MVC.

Toutefois, ce dernier vient avec des concepts qui lui sont propres. Dans ce tutoriel, nous verrons comment mettre en place une application Web en utilisant ASP.NET Core Razor Pages.

II - Prérequis

Pour la bonne compréhension de cet article, vous devez avoir des connaissances de base en développement Web et en programmation avec le langage C#.

III - Description des outils utilisés

L'exemple présenté dans ce tutoriel est développé sous le système d'exploitation Windows 10 en utilisant les outils suivants :

- .NET Core 2.0 ;

- ASP.NET Core 2.0 ;

- Visual Studio Code ;

- Entity Framework 2.0 ;

- SQLite.

Vous ne devriez avoir aucune difficulté à reproduire ce qui sera présenté dans ce tutoriel sur un système d'exploitation autre supporté par .NET Core et Visual Studio Code, dont OS X et Ubuntu.

III-A - Présentation de .NET Core

.NET Core est la jeune implémentation de la plateforme .NET. Il s'agit d'une plateforme de développement permettant de créer divers types d'applications (Web, Console, etc.). Contrairement au Framework .NET, .NET Core est multiplateforme (peut être exécuté sur Windows, Linux et OS X) et est développé en open source par Microsoft et la communauté. Son code source est disponible sur GitHub.

Pour plus de détails sur .NET Core, je vous invite à consulter la documentation suivante : https://docs.microsoft.com/en-us/dotnet/core/

Pour développer toute application ASP.NET Core, vous devez installer au préalable .NET Core avec son kit de développement (SDK). Le package d'installation et le guide d'installation en fonction de votre système d'exploitation sont disponibles sur la page suivante : https://www.microsoft.com/net/core

III-B - Présentation de ASP.NET Core

ASP.NET Core est une jeune plateforme de développement Web, dont la première version stable a vu le jour en juin 2016. Elle a été créée pour répondre aux besoins des développeurs dans la mise en place d'applications Web modernes multiplateformes pouvant cibler le cloud et le mobile.

ASP.NET Core a donc été développé avec à l'esprit l'ouverture, les performances et la légèreté :

- le Framework est développé en open source avec la participation de la communauté. Son code source est disponible sur GitHub ;

- il est multiplateforme et peut fonctionner sur Windows, Linux et Mac ;

- il est indépendant de tout environnement de développement. Pas besoin de Visual Studio pour créer une application ASP.NET Core ;

- il est développé autour de la modularité. De ce fait, une application ASP.NET Core est publiée uniquement avec le nécessaire pour son fonctionnement. Ce qui rend la plateforme un candidat de choix pour le cloud, où l'espace de stockage utilisé est facturé.

Une fois .NET Core installé, vous n'avez besoin d'aucune autre installation supplémentaire pour créer une application ASP.NET Core. Les bibliothèques du Framework sont disponibles à travers des packages NuGet que vous devez référencer dans votre projet.

III-C - Visual Studio Code

Visual Studio Code est développé en open source par Microsoft et offre aux développeurs le nécessaire (coloration syntaxique, IntelliSence, débogage, etc.) pour créer des applications en utilisant l'OS de leur choix (Windows, Linux ou Mac).

Visual Studio Code supporte de nombreux langages de programmation. Celui-ci évolue assez rapidement avec des mises à jour fréquentes. De plus, le support de la communauté permet à sa galerie d'extensions d'offrir une panoplie d'outils pour étendre les fonctionnalités de l'EDI.

Vous pouvez télécharger le package d'installation de Visual Studio Code (VS Code) en fonction de votre système d'exploitation à l'adresse suivante : https://code.visualstudio.com/

VS Code est à la base un éditeur de code. De ce fait, ce dernier ne dispose pas de nombreuses fonctionnalités d'un environnement de développement. Pour créer une application ASP.NET Core avec la plateforme, vous devez installer l'extension C# et configurer le débogage. Pour plus de détails, veuillez consulter mon billet de blog suivant :

https://www.developpez.net/forums/blogs/137868-hinault-romaric/b3002/configurer-visual-studio-code-deboguer-application-asp-net-core/

III-D - SQLite

SQLite est un léger moteur de base de données relationnelle qui est accessible par SQL. La particularité de ce dernier est le fait qu'il ne repose pas sur un serveur de base de données comme SQL Server ou encore MySQL. De ce fait, ce dernier ne nécessite aucune configuration, administration ou maintenance. La base de données se résume en un seul fichier qui est directement incorporé au programme. Ce dernier est indépendant de la plateforme. Donc, nous pouvons l'utiliser autant sur Linux que sur Windows. SQLite est open source. C'est le moteur de base de données le plus utilisé à travers le monde.

III-E - Entity Framework Core

Pour l'accès aux données, nous allons utiliser Entity Framework Core. Ce dernier est la référence pour l'accès aux données dans une application .NET.

Entity Framework Core est un ORM (Object/Relational Mapping) open source maintenu par Microsoft. Entity Framework Core permet aux développeurs de travailler avec des données relationnelles comme des objets, sans nécessiter le recours à des requêtes SQL.

Ce dernier s'occupe du mappage et de la persistance entre vos objets et votre base de données. Couramment, un objet (une classe entitée) sera représenté par une table. C'est Entitty Framework Core qui se chargera de la liaison entre la table de la base de données et l'objet.

Avec Entity Framework Core, les requêtes sont effectuées en utilisant LINQ, et les données sont manipulées sous forme d'objets fortement typés. Les fonctionnalités qu'offre l'ORM permettent aux développeurs de se concentrer sur la logique métier de leur application, plutôt que sur les fondamentaux de l'accès à la base de données.

IV - Création du projet de démarrage

ASP.NET Core 2.0 offre de nombreux modèles de projet permettant de créer des applications Web MVC, Razor Pages, Web API et SPA (Single Page Application). Les modèles sont intégrés directement au SDK de l'outil. La création d'un nouveau projet se fait en invite de commande en utilisant la commande dotnet new, suivi du nom du modèle de projet.

Pour créer le projet de démarrage en utilisant le modèle offert par défaut, vous allez lancer VS Code et ouvrir le terminal intégré en cliquant sur le menu Afficher, puis sur Terminal Intégré.

Positionnez-vous sur le dossier dans le lequel vous souhaitez créer votre application, puis exécutez la commande :

Dotnet new razor -n « nomduprojet »

La commande dotnet new va procéder à la création du projet, à la restauration des packages, puis à la génération de votre projet. Il ne reste plus qu'à exécuter celui-ci pour obtenir un aperçu dans votre navigateur.

Pour cela, vous devez vous positionner sur le dossier de votre application (en utilisant la commande cd « nomduprojet »), puis exécuter la commande dotnet run.

En cliquant sur le lien dans la console (http://localhost:5000), vous obtenez un aperçu de votre application dans votre navigateur par défaut.

V - Débogage avec Visual Studio Code

Ouvrez votre projet dans Visual Studio Code, en cliquant sur le menu Fichier, puis sur Ouvrir un dossier, et sélectionnez le dossier contenant votre application. Cette dernière va s'afficher dans l'explorateur de fichiers :

Vous verrez également afficher un message vous invitant à créer les assets qui sont nécessaires pour générer et déboguer votre application avec VS Code . Cliquez sur Yes.

Un dossier .vscode sera ajouté à votre projet avec les fichiers tasks.json et launch.js :

- le fichier tasks.json est utilisé pour configurer les commandes qui seront exécutées au lancement du débogage de votre application. L'unique commande qui est configurée par défaut est la commande Dotnet Build ;

- le fichier launch.json, quant à lui, configure le type de débogueur que vous allez utiliser, ainsi que le programme (msbuild) qui sera exécuté dans le débogueur. Ce dernier configure également VS Code pour exécuter les tâches qui sont configurées dans le tasks.json.

La touche F5 du clavier va permettre de lancer l'application en mode debug et afficher cette dernière dans votre navigateur par défaut. Vous pourrez mettre des points d'arrêt, effectuer une exécution pas à pas, etc.

Pour arrêter le débogueur, cliquez sur le carré rouge dans la barre d'outils affichée au centre.

VI - Structure d'une application Razor Pages

L'utilisation du modèle Razor crée un ensemble de dossiers et fichiers. Avant de procéder à des modifications, il est important de comprendre l'utilité de certains de ces éléments. Les fichiers et dossiers clés à maîtriser sont les suivants :

- le dossier Pages contient toutes les pages Razor de votre application. Par défaut, ce dossier contient les pages Index, Contact, About et Error ;

- le dossier Properties contient un fichier launchSettings.json, qui sera utilisé pour définir les paramètres pour vos différents environnements de travail (environnement de développement, de test, de production, etc.). Il faut noter toutefois que ce fichier est beaucoup plus utilisé par Visual Studio ;

- le dossier wwwroot est l'emplacement de sauvegarde du contenu statique (images, css, fichiers JavaScript, etc.) ;

- le fichier appsettings.json est utilisé pour l'enregistrement des paramètres, notamment la chaîne de connexion ;

- le fichier bundleconfig.json est l'emplacement où seront définis les paramètres pour le regroupement et la minification des fichiers JavaScript et CSS ;

- Program.cs est le fichier contenant la méthode Main ;

- RazorDemo.csproj est le fichier qui contient l'ensemble des packages de l'application ;

- startup.cs est le fichier de démarrage de l'application qui est utilisé pour enregistrer les services et injecter des modules dans le pipeline HTTP.

VII - Description d'une page Razor

Une page Razor est un fichier .cshtml pouvant contenir du code HTML, C#, JavaScript et CSS. La première instruction dans un fichier Razor Page est :

@Page

Pour séparer le contenu de présentation de la logique métier, Razor Pages offre l'instruction @functions :

@page

@functions{

public string Message { get; set; }

public void OnGet()
{
Message = "Your application description page.";
}

}

@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@Message</h3>

<p>Use this area to provide additional information.</p>

Le code ci-dessus, avant le rendu de la page, va exécuter au préalable la méthode OnGet().

VII-A - PageModel

Pour permettre une meilleure séparation du code, Razor Pages introduit la notion de PageModel. Au lieu d'avoir une seule page About.cshtml, nous aurons également une page About.cshtml.cs, qui va contenir la classe AboutModel, qui hérite de PageModel.

Dans cette page, nous aurons le code-behind de notre page :

public class AboutModel: PageModel
{
public string Message { get; set; }

public void OnGet()
{
Message = "Your application description page.";
}
}

Une convention a été définie par Razor Pages pour identifier le code qui doit être exécuté au chargement d'une page, en fonction de la requête HTTP :

- pour une requête HTTP Get, la méthode OnGet() dans le code métier sera exécutée. Si cette méthode contient du code asynchrone, elle doit avoir pour nom OnGetAsync();

- pour une requête HTTP Post, la méthode OnPost() dans le code métier sera exécutée. Si cette méthode contient du code asynchrone, elle doit avoir pour nom OnPostAsync().

Et le contenu de la page About.cshtml devient ceci :

@page
@model AboutModel
@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@Model.Message</h3>
<p>Use this area to provide additional information.</p>

Le fichier About.cshtml.cs doit être dans le même dossier que le fichier About.cshtml. Par convention, ces deux fichiers seront liés. D'ailleurs dans l'EDI Visual Studio, vous ne verrez qu'un seul fichier dans l'Explorateur de solutions.

VIII - Routage pour Razor Pages

Dans une application Web traditionnelle, une adresse URL fait référence à un fichier dans le dossier d'hébergement de l'application. Par exemple l'adresse suivante http://monapplication/clients.aspx, sera mappée avec un fichier client.aspx sur le serveur d'hébergement de l'application, qui contient du code permettant de retourner une réponse au navigateur (ça peut être la liste des clients).

Dans une application ASP.NET Core Razor Pages, nos pages Web sont contenues dans un dossier Pages. La convention de routage qui est implémentée par ASP.NET core va permettre de matcher une URL avec le fichier .cshtml correspondant dans le dossier Pages :

- l'URL http://monapplication affichera le contenu du fichier /Pages/Index.cshtml ;

- l'URL http://monapplication/about.cshtml affichera le contenu du fichier Contact.cshtml dans le dossier Pages ;

- l'URL http://monapplication/admin/ affichera le fichier index.chstml contenu dans le dossier admin du dossier Pages (Pages/admin/index.cshtml) ;

- l'URL http://monapplication/admin/adduser affichera le fichier Pages/admin/adduser.cshtml.

La convention de routage de Razor Page vient se greffer au système de routage existant pour MVC. Dans la classe Startup, le routage par défaut pour MVC est implémenté dans le template RazorPages :

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action=Index}/{id?}");
});

Cela peut être confondant, mais Razor Pages, MVC et WebAPI sont fusionnés dans ASP.NET Core. Dans un même projet, vous pouvez faire du MVC, WebAPI et Razor Pages.

IX - Opérations CRUD avec Entity Framework Core

Dans cette partie, nous verrons comment manipuler une base de données en utilisant Entity Framework Core. Nous allons mettre en place le code nécessaire pour générer la base de données, enregistrer des données, afficher, modifier et supprimer.

IX-A - Ajout du modèle

Vous allez créer un nouveau dossier Models, et y ajouter un fichier Student.cs. avec le contenu suivant :

using System;
using System.ComponentModel.DataAnnotations;

namespace RazorDemo.Models
{

public class Student
{
public int Id { get; set; }

[Required]
[Display(Name="First Name")]
[StringLength(50)]
public string FirstName { get; set; }

[Required]
[Display(Name="Last Name")]
[StringLength(50)]
public string LastName { get; set; }

[Required]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
}

}

L'espace de nom System.ComponentModel.DataAnnotations offre un ensemble d'attributs pouvant être appliqué à une classe ou une propriété pour la validation des données. Ci-dessous la description des attributs que nous avons utilisés :

- [Required] permet de spécifier qu'un champ est obligatoire ;

- [Display(Name = "")] est utilisé pour spécifier le nom a afficher pour remplacer le nom de la propriété à l'affichage ;

- [StringLenght()] permet de définir la taille maximale d'un champ ;

- [DataType()] permet de définir le format de données qui doit être respecté pour le champ. Il prend en paramètre le type du format de données.

IX-B - Création du DBContext

Vous venez de définir une table de votre base de données. Maintenant, vous allez créer le DbContext. Pour cela, vous devez ajouter un nouveau fichier RazorDemoContext.cs au dossier Models de votre projet. Dans ce dernier, ajoutez le code suivant :

using System;
using Microsoft.EntityFrameworkCore;

namespace RazorDemo.Models
{
public class RazorDemoContext : DbContext
{
public RazorDemoContext(DbContextOptions<RazorDemoContext> options)
: base(options)
{
}

public DbSet<Student> Student { get; set; }
}
}

La classe RazorDemoContext est un élément clé dans l'utilisation d'Entity Framework. Ce dernier sert de pont entre vos entités et votre base de données. Le DbContext va être utilisé pour toutes les interactions avec la base de données (sélection des données, enregistrement, mise à jour, suppression, etc.)

IX-C - Enregistrement du DBContext

Vous allez utiliser l'injection des dépendances qu'offre ASP.NET Core pour enregistrer votre DbContext. Pour cela, ouvrez le fichier Startup.cs de votre projet. Ajoutez dans un premier temps les références suivantes :

using RazorDemo.Models;
using Microsoft.EntityFrameworkCore;

Dans la méthode ConfigureServices, ajoutez la ligne de code suivante :

services.AddDbContext<RazorDemoContext>(options =>
options.UseSqlite(Configuration.GetConnectionString("SqliteConnectionString")));

Le code complet de cette méthode est le suivant :

public void ConfigureServices(IServiceCollection services)
{

services.AddDbContext<RazorDemoContext>(options =>
options.UseSqlite(Configuration.GetConnectionString("SqliteConnectionString")));

services.AddMvc();
}

La méthode Configuration.GetConnectionString("SqliteConnectionString") va permettre d'obtenir la chaîne de connexion dans le fichier de configuration appsettings.json

Vous devez donc éditer ce fichier et y ajouter la chaîne de connexion à votre base de données :

"ConnectionStrings": {
"SqliteConnectionString": "Data Source=RazorDemo.db"
}

Le code complet de ce fichier devrait ressembler à ceci :

{
"Logging": {
"IncludeScopes": false,
"LogLevel": {
"Default": "Warning"
}
},
"ConnectionStrings": {
"SqliteConnectionString": "Data Source=RazorDemo.db"
}
}

Enregistrez les modifications et compilez votre application en utilisant la commande suivante, pour vous assurer que tout est correct :

Dotnet build

IX-D - Génération de la base de données

Entity Framework Core offre de nombreux outils pouvant être utilisés en ligne de commande pour notamment générer une base de données, mettre à jour cette dernière en appliquant les modifications qui ont été apportées au modèle de données, etc.

Mais, avant de pouvoir les utiliser, vous devez dans un premier temps ajouter une référence au package Microsoft.EntityFrameworkCore.Tools.DotNet. Pour installer ce package, vous allez éditer le fichier .csproj et ajouter une balise DotNetCliToolReference pour Microsoft.EntityFrameworkCore.Tools.Dotnet, dans la section ItemGroup.

<DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />

Le code complet de votre fichier .csproj devrait ressembler à ceci :

<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp2.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
</ItemGroup>
<ItemGroup>
<DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />
</ItemGroup>
</Project>

Pour générer la base de données, exécutez successivement les deux commandes suivantes :

dotnet ef migrations add Initial
Dotnet ef database update

La première commande va permettre de générer le code permettant de créer la base de données avec la table Student. La seconde commande va exécuter ce code et procéder à la création de la base de données.

Vous allez donc remarquer la présence du dossier Migrations avec des fichiers de code c# et la base de données RazorDemo.db dans le dossier racine de votre application :

IX-E - Génération des pages CRUD

IX-E-1 - Configuration du Scaffold

Maintenant que nous disposons du nécessaire pour manipuler notre base de données à partir de notre application, nous devons écrire le code permettant d'afficher, créer, modifier et supprimer des étudiants à partir des pages Web.

L'un des principes connus en programmation est le DRY (Dont Repeat Yourselft). Ce dernier encourage l'exploitation des outils existants pour mettre en place son application, afin d'éviter de mettre de gros efforts dans de nouveau développement. De ce fait, nous allons utiliser les outils existants pour générer le code permettant d'effectuer des opérations CRUD sur la table Student. Par la suite, nous verrons comment modifier le code généré pour l'adapter à nos besoins.

La première chose à faire sera l'ajout des packages nécessaires pour la prise en charge de la génération du code en invite de commande. Vous devez donc éditer le fichier .csproj et ajouter le package Microsoft.VisualStudio.Web.CodeGeneration.Tools.

<ItemGroup>
<DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />
<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
</ItemGroup>

Ensuite, vous allez exécuter successivement les commandes suivantes :

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet restore

IX-E-2 - Scaffold du model Student

Nous allons utiliser la commande dotnet aspnet-codegenerator razorpage, pour générer le code des pages Razor. Nous devons renseigner les options suivantes :

- -m pour le modèle : Student ;

- -dc pour le DataContext : RazorDemoContext ;

- -outDir pour le dossier de destination : Pages/Student ;

- -udl (use default layout) pour utiliser le Layout par défaut ;

- -scripts permet de spécifier que l'on souhaite que les scripts soient référencés dans les pages qui seront générées. Ces scripts serviront surtout à la validation des données des champs des formulaires.

La commande complète que vous devez exécuter est la suivante :

dotnet aspnet-codegenerator razorpage -m Student -dc RazorDemoContext -udl -outDir Pages\Students - scripts

IX-E-3 - Test de l'application

Appuyez sur F5 pour lancer le débogage de votre application. Saisissez dans votre navigateur le lien suivant : http://localhost:5000/Students/Create.

La page de création d'un nouvel étudiant va s'afficher :

X - Description des pages générées

X-A - La page Index

Examinons les fichiers Index.cshtml et Index.cshtml.cs du dossier Pages/Students. Ouvrez le fichier Index.cshtml.cs. Ce dernier contient le code suivant :

public class IndexModel : PageModel
{
private readonly RazorDemo.Models.RazorDemoContext _context;

public IndexModel(RazorDemo.Models.RazorDemoContext context)
{
_context = context;
}

public IList<Student> Student { get;set; }

public async Task OnGetAsync()
{
Student = await _context.Student.ToListAsync();
}
}

La page Index permet d'afficher la liste des étudiants. Le code métier contient la logique permettant d'afficher la liste des étudiants.

Son constructeur doit prendre en paramètre le DbContext, qui sera initialisé via l'injection de dépendances :

public IndexModel(RazorDemo.Models.RazorDemoContext context)
{
_context = context;
}

Tout le code métier qui a été généré suit ce Patern.

La méthode OnGetAsync() qui sera exécutée au chargement de la page va permettre de retourner la liste des étudiants. Le traitement de cette liste est effectué dans le fichier Index.cshtml, dont le code est le suivant :

@page
@model RazorDemo.Pages.Students.IndexModel

@{
ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>
<a asp-page="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Student[0].FirstName)
</th>
<th>
@Html.DisplayNameFor(model => model.Student[0].LastName)
</th>
<th>
@Html.DisplayNameFor(model => model.Student[0].Email)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Student) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
<a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
<a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
<a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>
</td>
</tr>
}
</tbody>
</table>

Pour manipuler des données du code métier dans la vue, cette dernière doit disposer de la directive @Model, suivi du nom complet (vous devez tenir compte du namespace) de la classe qui hérite de PageModel :

@model RazorDemo.Pages.Students.IndexModel

Pour utiliser les propriétés de cette classe dans la vue, vous devez désormais utiliser la directive model. Par exemple, pour afficher le LastName du premier étudiant dans la liste, on va procéder comme suit :

model.Student[0].LastName

La suite du code utilise les HTML Helper pour afficher la liste des étudiants comme il se doit. Pour en savoir plus sur les HTML Helper. Vous pouvez consulter mon tutoriel sur Razor.

Pour afficher la page Index du dossier Students, vous devez saisir l'URL suivante dans le navigateur, pendant que votre application est en cours d'exécution :

http://localhost:5000/Students. Ce qui donne le résultat suivant :

X-B - La page Create

Examinons maintenant les fichiers Create.cshtml et Create.cshtml.cs du dossier Pages/Students. Ouvrez le fichier Create.cshtml.cs. Ce dernier contient le code suivant

public class CreateModel : PageModel
{
private readonly RazorDemo.Models.RazorDemoContext _context;

public CreateModel(RazorDemo.Models.RazorDemoContext context)
{
_context = context;
}

public IActionResult OnGet()
{
return Page();
}

[BindProperty]
public Student Student { get; set; }

public async Task<IActionResult> OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}

_context.Student.Add(Student);
await _context.SaveChangesAsync();

return RedirectToPage("./Index");
}
}

Vous remarquez la présence de deux méthodes. La première (OnGet) sera appelée suite à une requête Get et permettra d'afficher le formulaire d'insertion.

La seconde (OnPostAsync) sera appelée suite à une requête Post et permettra d'enregistrer les informations contenues dans le formulaire. Une fois les données sauvegardées, l'utilisateur sera redirigé vers la page Students/index, qui affichera la liste des étudiants avec la nouvelle entrée. Mais, avant, les DataAnnotations que nous avons définis dans le modèle seront utilisés pour valider les données. En cas d'incohérence, le formulaire de création sera de nouveau affiché avec les messages d'erreurs de validation :

La propriété Student est décorée avec l'attribut [BindProperty].

[BindProperty]
public Student Student { get; set; }

Cela va permettre lors de l'envoi des informations contenues dans le formulaire via la requête HTTP Post, au framework ASP.NET Core de binder automatiquement celles-ci avec cette propriété.

Passons au fichier Create.cshtml :

@page
@model RazorDemo.Pages.Students.CreateModel

@{
ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Student</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Student.FirstName" class="control-label"></label>
<input asp-for="Student.FirstName" class="form-control" />
<span asp-validation-for="Student.FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Student.LastName" class="control-label"></label>
<input asp-for="Student.LastName" class="form-control" />
<span asp-validation-for="Student.LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Student.Email" class="control-label"></label>
<input asp-for="Student.Email" class="form-control" />
<span asp-validation-for="Student.Email" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>

<div>
<a asp-page="Index">Back to List</a>
</div>

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Des Tag Helpers sont utilisés pour mettre en place le formulaire. Pour en savoir plus sur les Tag Helpers vous pouvez consulter le billet de blog suivant : Introduction aux Tag Helpers.

Les dernières lignes de code de cette page permettent de référencer une vue partielle :

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Cette vue partielle permet de charger les scripts (css et js) qui seront utilisés pour valider les informations du formulaire. Par exemple, le nom et le prénom qui doivent être obligatoires, ou encore le format de l'adresse email.

Les pages Details et Edit sont conçues en suivant le même principe que pour les pages Index et Create. Je ne vais donc pas entrer dans le détail de leur implémentation.

XI - Conclusion

Ce tutoriel, vous donne le minimum nécessaire pour vous lancer dans la création d'applications Web en utilisant Razor Pages, Visual Studio Code, Entity Framework Core et les outils du CLI. Laissez place à votre créativité pour aller plus loin et en apprendre davantage sur le sujet.

Je vous invite également à consulter mon billet de blog sur la mise en place des tests unitaires pour une application ASP.NET Core Razor Pages.

XII - Remerciements

Je tiens à remercier Claude Leloup pour sa relecture orthographique.

XIII - Références

- Les nouveautés de ASP.NET Core 2.0 ;

- Mettre en place les tests unitaires pour une application ASP.NET Core Razor Pages ;

- Announcing ASP.NET Core 2.0 ;

- ASP.NET Core 2.0 release notes.