Apprendre à créer une application CRUD avec ASP.NET Core Razor Pages sous Visual Studio Code et Entity Framework Core,

Un tutoriel d'Hinault Romaric

1
2
Dotnet new razor -n «[nbsp][/nbsp]nomduprojet[nbsp][/nbsp]»

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
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; }
   }
 
}
[/CODE]
 
[B]Création du DBContext[/B]
 
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[nbsp][/nbsp]:
 
[CODE=c#]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; }
}
}[/CODE]
 
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.)
 
[B]Enregistrement du DBContext[/B]
 
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[nbsp][/nbsp]:
 
[CODE=c#]using RazorDemo.Models;
using Microsoft.EntityFrameworkCore;
[/CODE]
 
Dans la méthode ConfigureServices, ajoutez la ligne de code suivante[nbsp][/nbsp]:
 
[CODE=c#]services.AddDbContext<RazorDemoContext>(options =>
        options.UseSqlite(Configuration.GetConnectionString("SqliteConnectionString")));
[/CODE]
 
Le code complet de cette méthode est le suivant[nbsp][/nbsp]:
 
[CODE=c#]public void ConfigureServices(IServiceCollection services)
      {
 
            services.AddDbContext<RazorDemoContext>(options =>
                    options.UseSqlite(Configuration.GetConnectionString("SqliteConnectionString")));
 
            services.AddMvc();
       }
[/CODE]
 
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[nbsp][/nbsp]:
 
"ConnectionStrings": {
       "SqliteConnectionString": "Data Source=RazorDemo.db"
  }
 
 
Le code complet de ce fichier devrait ressembler à ceci[nbsp][/nbsp]:
 
[CODE=c#] "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  },
    "ConnectionStrings": {
       "SqliteConnectionString": "Data Source=RazorDemo.db"
  }
}
[/CODE]
 
Enregistrez les modifications et compilez votre application en utilisant la commande suivante, pour vous assurer que tout est correct[nbsp][/nbsp]:
 
[CODE]Dotnet build[/CODE]
 
[B]Génération de la base de données[/B]
 
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.
 
 
[CODE=xml]<DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />[/CODE]
 
Le code complet de votre fichier .csproj devrait ressembler à ceci[nbsp][/nbsp]:
 
[CODE=xml]<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>
[/CODE]
 
Pour générer la base de données, exécutez successivement les deux commandes suivantes[nbsp][/nbsp]:
 
[CODE]dotnet ef migrations add Initial
Dotnet ef database update[/CODE]
 
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[nbsp][/nbsp]:
 
[CENTER][ATTACH=CONFIG]327204[/ATTACH][/CENTER]
 
[B]Configuration du Scaffold[/B]
 
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.
 
[CODE=xml]<ItemGroup>
    <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
  </ItemGroup>[/CODE]
 
 
Ensuite, vous allez exécuter successivement les commandes suivantes[nbsp][/nbsp]:
 
[CODE]dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet restore[/CODE]
 
[B]Scaffold du model Student [/B]
 
Nous allons utiliser la commande dotnet aspnet-codegenerator razorpage, pour générer le code des pages Razor. Nous devons renseigner les options suivantes[nbsp][/nbsp]:
 
[LIST]
[*]m pour le modèle : Student[nbsp][/nbsp];
[*]dc pour le DataContext : RazorDemoContext[nbsp][/nbsp];
[*]outDir pour le dossier de destination : Pages/Student[nbsp][/nbsp];
[*]udl (use default layout) pour utiliser le Layout par defaut[nbsp][/nbsp];
[*]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.
[/LIST]
 
 
La commande complète que vous devez exécuter est la suivante[nbsp][/nbsp]:
 
[CODE]dotnet aspnet-codegenerator razorpage -m Student -dc RazorDemoContext -udl -outDir Pages\Students - scripts[/CODE]
 
[CENTER][ATTACH=CONFIG]327206[/ATTACH][/CENTER]
 
[B]Test de l’application[/B]
 
Appuyez sur F5 pour lancer le débogage de votre application. Saisissez dans votre navigateur le lien suivant [url]http://localhost:5000/Students/Create[/url]. La page de création d’un nouvel étudiant va s’afficher[nbsp][/nbsp]:
 
[CENTER][ATTACH=CONFIG]327209[/ATTACH][/CENTER]
 
[B]Description des pages générées[/B]
 
[B]La page Index[/B]
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[nbsp][/nbsp]:
 
[CODE=c#]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();
        }
    }
[/CODE]
 
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[nbsp][/nbsp]:
 
[CODE=c#]public IndexModel(RazorDemo.Models.RazorDemoContext context)
        {
            _context = context;
        }
[/CODE]
 
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[nbsp][/nbsp]:
 
[CODE=c#]@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>

@model RazorDemo.Pages.Students.IndexModel

model.Student[0].LastName

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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");
        }
    }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@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");}
}