@ViewData["Title"]

Dans cet article, nous allons apprendre les opérations CRUD (Create Read Update Delete) sur ASP.NET Core MVC (V 5.0). Nous utiliserons un Data Seed pour générer des fakes data et aussi nous utiliserons Entity Framework Core pour interagir avec la base de données MYSQL. À la fin du tutorial le code sera disponible sur mon repo gitlab : [https://gitlab.com/eroamba/crud-dotnet-core-mvc-avec-mysql](https://gitlab.com/eroamba/crud-dotnet-core-mvc-avec-mysql) Avant de continuer, je vais vous donner une brève introduction à .NET 5.0 MVC. Attention avant de commencer ne pas confondre ASP.NET MVC et ASP.NET Core MVC il y a une différence et je vous explique D'abord Asp.net Core est une nouvelle version d'Asp.net publiée par Microsoft. C'est un framework open-source et peut être exécuté sur différent système comme Windows, Mac ou Linux. Il a été lancé à l'origine en tant qu'ASP.NET 5, mais il a ensuite été renommé ASP.NET Core et porte toujours le même nom. Donc ASP.NET CORE est multi plateforme (Windows, Linux, MAC) par contre ASP.NET était que pour environnement windows. Pour plus d'information voici [un lien complet ici](https://www.ifourtechnolab.com/blog/differences-between-asp-net-and-asp-net-core-asp-net-vs-asp-net-core). ASP.NET Core MVC est un framework qui permet de concevoir des applications web en utilisant le design pattern MVC(Model-View-Controller) ![Structure du projet](https://lh7-us.googleusercontent.com/6WTV2xzZIrui7uaDBTnhbtNGqN0yiqDNAQy7mxykFQT9XewdoipZyMPlrk7It8u4hxRGR91MsS-LyuFgisKSr5iddBpkwBHuWEPyg6E4lQynKvdlg8zfreo9O9o-nIvmba0oYe98lt9Kxb_QaQZosS0) Pour ce tutoriel on utilisera une table Contact avec les différents champs suivants : ![Table Contact](https://lh7-us.googleusercontent.com/IVkZ48AxzYLuSBufopef3sM0CnGyPwflnIeh_LTEzQMppiZJphYm2cengrxYgjpKhB08JscYGn-n70Apgy_Y5n9dj4yURLpPBoFLkELOoIBsq1lqdLoCpCX1FLKEPsosbfJoUa261DOtUh00-T9U_9U) ## Création du projet Pour débuter nous allons créer notre Solution (projet) avec Visual studio 2019 pour faire plus simple. Mais je montrerai aussi dans un autre tutoriel comment créer une solution .net core mvc avec Visual Studio Code qui est différent de Visual studio. ![Création du projet](https://lh7-us.googleusercontent.com/pbhmeCn_bOzLjGJaBKgd2TrY6Cbx7_kY4BQKrOaD-SbqMgSzlwvb3LRPp1TiDE_KTjfMh3kOTffLz9O6LEeYNEQMAV_VWH_hvXVwbBY5RNTH4EuwdGPdo88YBkwuME8k7iaVSwwyXOPccxbVCIiClLk) Choisissons notre type de projet qui ASP.NET Core (Model-View-Controller) ![Type de projet](https://lh7-us.googleusercontent.com/FTUC4HSbDR7kLDk9woMITQsS4aKL3tfQ8t1ThtKyWWb2eeRtKwweiiPhqzTcww_iJsXcnY5ATAStbSPnuGA4lOR9ktQZSkuvDlvzMNJuy31VWHFpXQEIifAFdfE-dj4n0hnb2b8vVsfAERxEXHsgElU) Suivons les étapes et choisissons un nom pour notre projet **CRUD MVC** ![Configuration du projet](https://lh7-us.googleusercontent.com/fsVNmxhb4HPb3aHP5z3ibpOOjV6oqC2dEF02gWCmFZLt6b8wLBEUTa3l89i8kFaes9WHFqm2F5vAvhq-8V9YHvlyod-PBq6Lyz_6wdaT-6DoAJlR8oqZ8ROniIQPZvUywrn26Elow0VXs1xMBRrxXLw) Super notre solution est créée avec les différents éléments du projet. ![Projet créé](https://lh5.googleusercontent.com/NyxwnpCUKrT_Q-qbEcyEnzTlk7ivcqk4ZLJksn0iX64buYD6Mj6TLW-5zBhFkQeljFaKN78MABa43frKcSxzMl6yd0IXmxM9Gm1B15OfWVr4FhO_PaB9k5BKlKBLAc1QQ41Jp4L0H3IGdeDUotUSdtZp9dctVbMlfV4CA8E7rXZcEPpY9fryMAc1_v98Rg) ## Installation des packages Installons les packages nécessaires pour notre projet : ![Installation packages](https://lh5.googleusercontent.com/Kj3v1it7CdmbCcAzis530CYj7xX54RQJQ5uSKMLd7VuntndX2vkddeANVH5U_O1idM7HL-Gkbp6WVqHa7e39apLJHe3BWPZlY9BNFyTDL9OJ30n9kT7Z408cLf4EkeZEWUV5f8xc0BdrdcaOcHwhdIhvNbFK5iHDUySDtsHp0-OL3sBoP68BNxnnqBEJgw) ## Création du modèle Contact Créons notre modèle Contact dans le dossier Models : ```csharp public int Id { get; set; } [Required(ErrorMessage = "Le nom est requis.")] public string FirstName { get; set; } [Required(ErrorMessage = "Le prénom est requis.")] public string LastName { get; set; } [Required(ErrorMessage = "Le numéro de téléphone est requis.")] public string Phone { get; set; } public string Email { get; set; } ``` ![Modèle Contact](https://lh5.googleusercontent.com/pYiASkwIk8hQ9EREJv45I-8hm69F3N6DAHbfOLIY9ShKtLXzt0Lrsr0kBNod6eMPqnMXp_aS5E1l5BzDdtBLUu1qbtsklN3cjUZCAyRFGSoJlzS4FqC_nlisnuYUWBrnlaG0TPGJQ3xzfqLiYMDuiqkp4DskK3TB7LP7qUYRjEqLhNkkynolfBjlXbM9ow) ## Configuration de la base de données ### DataContext Créons notre DataContext : ```csharp public DataContext(DbContextOptions options) : base(options) { } public DbSet Contacts { get; set; } protected override void OnModelCreating(ModelBuilder builder) { base.OnModelCreating(builder); builder.Entity(); } ``` ### Seed Data Créons aussi notre classe Seed pour générer des données de test : ```csharp public static async Task SeedData(DataContext context) { var contacts = new List{ new Contact{ Id=1, FirstName="Roamba", LastName="Windlassida Epaphras", Phone="+225 0103601135", Email="eroamba@yahoo.fr", }, new Contact{ Id=2, FirstName="Djama", LastName="Lemec", Phone="+225 0779157835", Email="djama@gmail.com", }, }; foreach (var item in contacts ) { context.Contacts.Add(item); } await context.SaveChangesAsync(); } } ``` ![DataContext et Seed](https://lh6.googleusercontent.com/Eij4u66_LxsQJ-TeJRF4V9PusUhpgRA_zdDgU9_WW4RTcMgyTsjHz-WTFibbN3g5nZ1F60uSjTaFmQeCTfEuaOh_AiSf0Z1Ulx6P_GN3pr15zxqNPACedIwJZFBQHq4NtnYYtMvzjCbXzCb_taH_N9XgbyrMj3WlO7o-ddrFHSSHzbXgDRwJxv7zC6kbYg) ## Configuration de la connexion MySQL Dans le fichier `appsettings.json`, ajoutons notre chaîne de connexion : ```json "ConnectionStrings": { "DefaultConnection": "server=localhost; port=3306; database=crud_mvc; user=root;" }, ``` Dans `Startup.cs`, configurons Entity Framework avec MySQL : ```csharp string mySqlConnectionStr = Configuration.GetConnectionString("DefaultConnection"); services.AddDbContext(opt => opt.UseMySql(mySqlConnectionStr, ServerVersion.AutoDetect(mySqlConnectionStr))); ``` ![Configuration MySQL](https://lh5.googleusercontent.com/iDMA9MBbOzBDPGiCsVeSwLl48MgCL4J5c4406M3j4uw5E0pj032Fravf6_0QdMYGcgNpMxO0GkynTfkdW6IIsHOh-dFY4-o9FwMX0usonzNcyC9yaLd82Y8dtdR_ADonx_AeDEu9rpRdIi9Jcfkb2p4tJl2PNS0R5tnfEL6GFkpXl8kvay5oMSvQFPO6ng) ## Configuration du Program.cs Modifions `Program.cs` pour initialiser la base de données : ```csharp public static async Task Main(string[] args) { var host = CreateHostBuilder(args).Build(); using var scope = host.Services.CreateScope(); var services = scope.ServiceProvider; try { var context = services.GetRequiredService(); await context.Database.MigrateAsync(); await Seed.SeedData(context); } catch (Exception ex) { var logger = services.GetRequiredService>(); logger.LogError(ex, "An error occurred during migration"); } await host.RunAsync(); } ``` ![Configuration Program.cs](https://lh5.googleusercontent.com/Kj3v1it7CdmbCcAzis530CYj7xX54RQJQ5uSKMLd7VuntndX2vkddeANVH5U_O1idM7HL-Gkbp6WVqHa7e39apLJHe3BWPZlY9BNFyTDL9OJ30n9kT7Z408cLf4EkeZEWUV5f8xc0BdrdcaOcHwhdIhvNbFK5iHDUySDtsHp0-OL3sBoP68BNxnnqBEJgw) ## Migration de la base de données Créons notre première migration : ![Migration](https://lh5.googleusercontent.com/NyxwnpCUKrT_Q-qbEcyEnzTlk7ivcqk4ZLJksn0iX64buYD6Mj6TLW-5zBhFkQeljFaKN78MABa43frKcSxzMl6yd0IXmxM9Gm1B15OfWVr4FhO_PaB9k5BKlKBLAc1QQ41Jp4L0H3IGdeDUotUSdtZp9dctVbMlfV4CA8E7rXZcEPpY9fryMAc1_v98Rg) ![Table créée](https://lh5.googleusercontent.com/iDMA9MBbOzBDPGiCsVeSwLl48MgCL4J5c4406M3j4uw5E0pj032Fravf6_0QdMYGcgNpMxO0GkynTfkdW6IIsHOh-dFY4-o9FwMX0usonzNcyC9yaLd82Y8dtdR_ADonx_AeDEu9rpRdIi9Jcfkb2p4tJl2PNS0R5tnfEL6GFkpXl8kvay5oMSvQFPO6ng) ## Contrôleur Contact Créons notre contrôleur avec toutes les opérations CRUD : ![Contrôleur](https://lh5.googleusercontent.com/pYiASkwIk8hQ9EREJv45I-8hm69F3N6DAHbfOLIY9ShKtLXzt0Lrsr0kBNod6eMPqnMXp_aS5E1l5BzDdtBLUu1qbtsklN3cjUZCAyRFGSoJlzS4FqC_nlisnuYUWBrnlaG0TPGJQ3xzfqLiYMDuiqkp4DskK3TB7LP7qUYRjEqLhNkkynolfBjlXbM9ow) ![Code contrôleur](https://lh6.googleusercontent.com/Eij4u66_LxsQJ-TeJRF4V9PusUhpgRA_zdDgU9_WW4RTcMgyTsjHz-WTFibbN3g5nZ1F60uSjTaFmQeCTfEuaOh_AiSf0Z1Ulx6P_GN3pr15zxqNPACedIwJZFBQHq4NtnYYtMvzjCbXzCb_taH_N9XgbyrMj3WlO7o-ddrFHSSHzbXgDRwJxv7zC6kbYg) ```csharp public class ContactController : Controller { private readonly ILogger _logger; private readonly DataContext _db; public ContactController(ILogger logger, DataContext db) { _db = db; _logger = logger; } public async Task Index() { var result = await _db.Contacts.ToListAsync(); return View(result); } public IActionResult Create() { return View(); } [HttpPost] [ValidateAntiForgeryToken] public async Task Create(Contact contact) { if (ModelState.IsValid) { _db.Contacts.Add(contact); await _db.SaveChangesAsync(); TempData["success"] = "Création effectuée avec succès"; return RedirectToAction("Index"); } return View(contact); } public async Task Edit(int? id) { if (id == null || id == 0) { return NotFound(); } var contact = await _db.Contacts.FindAsync(id); if (contact == null) { return NotFound(); } return View(contact); } [HttpPost] [ValidateAntiForgeryToken] public async Task Edit(Contact contact, int id) { if (id != contact.Id) { return NotFound(); } if (ModelState.IsValid) { _db.Contacts.Update(contact); await _db.SaveChangesAsync(); TempData["success"] = "Mise à jour effectuée avec succès"; return RedirectToAction("Index"); } return View(contact); } public async Task Delete(int? id) { if (id == null || id == 0) { return NotFound(); } var contact = await _db.Contacts.FindAsync(id); if (contact == null) { return NotFound(); } _db.Contacts.Remove(contact); await _db.SaveChangesAsync(); TempData["success"] = "Suppresson effectuée avec succès"; return RedirectToAction("Index"); } } ``` ## Vues Razor ### Layout principal Modifions le layout principal pour inclure Bootstrap Icons : ```html ``` ```html @ViewData["Title"] - CRUD_MVC

@RenderBody()

@await RenderSectionAsync("Scripts", required: false) ``` ### Configuration de la route par défaut ```csharp app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Contact}/{action=Index}/{id?}"); }); ``` ![Configuration route](https://lh5.googleusercontent.com/iDMA9MBbOzBDPGiCsVeSwLl48MgCL4J5c4406M3j4uw5E0pj032Fravf6_0QdMYGcgNpMxO0GkynTfkdW6IIsHOh-dFY4-o9FwMX0usonzNcyC9yaLd82Y8dtdR_ADonx_AeDEu9rpRdIi9Jcfkb2p4tJl2PNS0R5tnfEL6GFkpXl8kvay5oMSvQFPO6ng) ## Vue Create.cshtml ```html @model Contact; @{ ViewData["Title"] = "Create"; } @section Scripts{ @{ } } ``` ![Vue Create](https://lh5.googleusercontent.com/Kj3v1it7CdmbCcAzis530CYj7xX54RQJQ5uSKMLd7VuntndX2vkddeANVH5U_O1idM7HL-Gkbp6WVqHa7e39apLJHe3BWPZlY9BNFyTDL9OJ30n9kT7Z408cLf4EkeZEWUV5f8xc0BdrdcaOcHwhdIhvNbFK5iHDUySDtsHp0-OL3sBoP68BNxnnqBEJgw) ## Vue Edit.cshtml ```html @model Contact; @{ ViewData["Title"] = "Edit"; } @section Scripts{ @{ } } ``` ![Vue Edit](https://lh5.googleusercontent.com/Kj3v1it7CdmbCcAzis530CYj7xX54RQJQ5uSKMLd7VuntndX2vkddeANVH5U_O1idM7HL-Gkbp6WVqHa7e39apLJHe3BWPZlY9BNFyTDL9OJ30n9kT7Z408cLf4EkeZEWUV5f8xc0BdrdcaOcHwhdIhvNb ## Test de l'application ![Application fonctionnelle](https://lh5.googleusercontent.com/iDMA9MBbOzBDPGiCsVeSwLl48MgCL4J5c4406M3j4uw5E0pj032Fravf6_0QdMYGcgNpMxO0GkynTfkdW6IIsHOh-dFY4-o9FwMX0usonzNcyC9yaLd82Y8dtdR_ADonx_AeDEu9rpRdIi9Jcfkb2p4tJl2PNS0R5tnfEL6GFkpXl8kvay5oMSvQFPO6ng) ![Interface de l'application](https://lh5.googleusercontent.com/pYiASkwIk8hQ9EREJv45I-8hm69F3N6DAHbfOLIY9ShKtLXzt0Lrsr0kBNod6eMPqnMXp_aS5E1l5BzDdtBLUu1qbtsklN3cjUZCAyRFGSoJlzS4FqC_nlisnuYUWBrnlaG0TPGJQ3xzfqLiYMDuiqkp4DskK3TB7LP7qUYRjEqLhNkkynolfBjlXbM9ow) ## Déploiement en production ### Configuration pour la production Pour le déploiement en production, nous devons modifier certaines configurations : ```csharp public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseRouting(); app.UseForwardedHeaders(new ForwardedHeadersOptions { ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto }); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Contact}/{action=Index}/{id?}"); }); } ``` ### Configuration appsettings.json pour production ```json "ConnectionStrings": { "DefaultConnection": "server=***host***; port=3306; database=*******; user=******; password=*******;" }, "Kestrel": { "Endpoints": { "Http": { "Url": "http://testlinode.com:5002" }, "Https": { "Url": "https://testlinode.com:5000" } } }, ``` ### Configuration Nginx ```nginx server { listen 80; server_name testlinode.com; return 301 https://$host$request_uri; } server { listen 443; server_name testlinode.com; ssl_certificate /etc/letsencrypt/live/www.testlinode.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/www.testlinode.com/privkey.pem; ssl on; ssl_session_cache builtin:1000 shared:SSL:10m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4; ssl_prefer_server_ciphers on; gzip on; gzip_http_version 1.1; gzip_vary on; gzip_comp_level 6; gzip_proxied any; gzip_buffers 16 8k; gzip_disable "MSIE [1-6].(?!.*SV1)"; location / { proxy_pass https://178.79.168.173:5000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection keep-alive; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } ``` ![Application en production](https://lh5.googleusercontent.com/Kj3v1it7CdmbCcAzis530CYj7xX54RQJQ5uSKMLd7VuntndX2vkddeANVH5U_O1idM7HL-Gkbp6WVqHa7e39apLJHe3BWPZlY9BNFyTDL9OJ30n9kT7Z408cLf4EkeZEWUV5f8xc0BdrdcaOcHwhdIhvNbFK5iHDUySDtsHp0-OL3sBoP68BNxnnqBEJgw) ### Service systemd Configuration du service pour maintenir l'application en vie : ```ini [Unit] Description=Example .NET Web API App running on Ubuntu [Service] WorkingDirectory=/home/epa/crudmvc ExecStart=/usr/bin/dotnet /home/epa/crudmvc/'CRUD MVC.dll' Restart=always # Restart service after 10 seconds if the dotnet service crashes: RestartSec=10 SyslogIdentifier=CRUDMVC User=root Environment=ASPNETCORE_ENVIRONMENT=Production [Install] WantedBy=multi-user.target ``` ![Service en production](https://lh5.googleusercontent.com/iDMA9MBbOzBDPGiCsVeSwLl48MgCL4J5c4406M3j4uw5E0pj032Fravf6_0QdMYGcgNpMxO0GkynTfkdW6IIsHOh-dFY4-o9FwMX0usonzNcyC9yaLd82Y8dtdR_ADonx_AeDEu9rpRdIi9Jcfkb2p4tJl2PNS0R5tnfEL6GFkpXl8kvay5oMSvQFPO6ng) ![Application déployée](https://lh5.googleusercontent.com/Kj3v1it7CdmbCcAzis530CYj7xX54RQJQ5uSKMLd7VuntndX2vkddeANVH5U_O1idM7HL-Gkbp6WVqHa7e39apLJHe3BWPZlY9BNFyTDL9OJ30n9kT7Z408cLf4EkeZEWUV5f8xc0BdrdcaOcHwhdIhvNbFK5iHDUySDtsHp0-OL3sBoP68BNxnnqBEJgw) ## Test en production Testons notre application déployée sur [https://testlinode.com](https://testlinode.com) Pour plus de détails sur le déploiement, consultez l'article : [Comment déployer .net 5 api sur linux](../comment-deployer-net-5-api/) ## Conclusion Nous avons créé une application CRUD complète avec ASP.NET Core MVC et MySQL incluant : ✅ **Modèle Contact** avec validations ✅ **Entity Framework Core** pour l'accès aux données ✅ **CRUD complet** (Create, Read, Update, Delete) ✅ **Interface Bootstrap** responsive ✅ **Data Seed** pour les données de test ✅ **Migration automatique** de la base de données ✅ **Déploiement en production** avec Nginx et SSL Cette application constitue une base solide pour des projets plus complexes utilisant ASP.NET Core MVC. Le code complet est disponible sur [GitLab](https://gitlab.com/eroamba/crud-dotnet-core-mvc-avec-mysql). --- *#AspNetCore #MVC #CRUD #MySQL #EntityFramework #DotNet #CSharp #VisualStudio*