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

.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

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.

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/

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.

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.

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.

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.

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

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

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-1. Configuration du Scaffold▲

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

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 :

 

Sélectionnez

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 :

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 :

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.