Développement web avec C#
Qu'est ce que le C#
C# ou csharp, est un langage développé par Microsoft pour concurrencé Java. Comme Java, c'est un langage semi-compilé et interprété par un environnement d'exécution. L'environnement d'exécution du C# est le .NET Runtime (prononcé dotnet), l'équivalent de la JVM de Java.
En Java, on compile les sources (fichiers .java) pour obtenir le bytecode (fichiers .class) que l'on package en exécutable (fichier .jar) pour les exécuter avec le Java Runtime Environnement.
En C#, oncompile les sources (fichiers .cs) pour obtenir le code en Intermediate Language (fichiers .il) que l'on package en exécutable (fichiers .dll - attention les DLL .NET n'ont rien à voir avec les DLL natives).
Contrairement à certaines idées reçues, C# et .NET sont :
- Entièrement gratuits et open-source (licences MIT)
- Cross-platforme (comme Java, write once, run anywhere)
Mettre en place son environnement de développement
Ce tutotial n'est pas dépendant d'un IDE particulier, il utilise la CLI .NET pour créer et exécuter les projets. Ainsi, vous pouvez utiliser n'importe quel IDE.
Installer .NET CLI
Avec Winget
winget install Microsoft.dotnet
Avec Chocolatey
choco install dotnet
Manuellement
Téléchargez et exécutez l'installer du .NET SDK via ce lient
Créer un projet web
Vous pouvez consulter les templates de projet en faisant :
dotnet new -l
Pour créer un nouveau projet d'application web :
dotnet new mvc -o "mon-projet"
Nous venons de créer une application web à page avec le framework ASP .NET Core MVC. Vous pouvez
Présentation de ASP .NET Core MVC
Le pattern MVC
Comme son nom l'indique, ce framework se base sur le pattern MVC, qui divise l'architecture de l'application en trois parties :
- Modèle : les données de l'application
- Vue : les pages web de l'application
- Controlleur : gestion des actions des utilisateurs, coordonne données et pages
Explication du layout du projet
- Dossier
Controllers: Contient les classes controlleurs de votre application. Vous pouvez supprimer le fichier d'exemple créé par le projet - Dossier
Models: Contient les classes de logique et de données de votre application. Vous pouvez supprimer le fichier d'exemple créé par le projet - Dossier
Views: Contient les templates HTML du projet. Vous pouvez supprimer le dossierHomed'exemple créé par le projet- Dossier
Shared: Contient les éléments de template ré-utilisables :-
_Layout.cshtml: Squelette de toutes vos pages, l'appel@RenderBody()rend le contenu de la page. Vous pouvez vider les<header>et<footer>d'exemple créés par le projet, et les remplacer par votre propre<header>et<footer>. Tout ce que vous mettrez dans ce template sera rendu sur toutes les pages de votre application -
_Layout.css: le CSS propre à votre squelette de pages -
_ValidationScriptsPartial.cshtmletErros.cshtml: vous pouvez les supprimer, ce sont des exemples du projet
-
-
_ViewImports.cshtml: Imports des namespaces dans les templates. Comme on a vider le namespaceModels, son import ne compile plus, vous pouvez le commenter pour l'instant (la syntaxe pour les commenaire ici est@* commenaire *@ -
_ViewStart.cshtmlest le point d'entrée de vos template
- Dossier
- Dossier
wwwroot: les fichiers statiquement servis par votre application-
css: le CSS de votre application -
js: le JS de votre application -
lib: les libraires JS et CSS téléchargées localement -
favicon.ico: l'icone de votre site
-
-
Program.cs: le point d'entré de votre application
Controllers & Routes
Pour créer un controlleur, créez une classe dont le nom finit par "Controller" dans le dossier Controllers. Par exemple, "HelloWorldController", qui étend la classe Controller, par exemple :
namespace net_web_tuto_2.Controllers
{
public class HelloWorldController : Controller
{
}
}
Pour ajouter un préfixe de route à votre controleur, mettez lui l'attribut [Route("maroute")], par exemple :
[Route("hello-world")]
public class HelloWorldController : Controller
{
}
Ensuite, vous pouvez créer une méthode endpoint, avec l'annotation [HttpGet] :
[HttpGet]
public string HelloWorld()
{
return "Hello world !";
}
La route de ce endpoint est dont GET /hello-world. On peut constater en lançant l'application avec un :
dotnet run
Et en en allant à https://localhost:7229/hello-world
On peut donner des suites de route particulières aux méthodes endpoint :
[HttpGet("fr")]
public string HelloWorldFr()
{
return "Bonjour, le monde";
}
[HttpGet("en")]
public string HelloWorldEn()
{
return "Hello, world";
}
On peut ensuite constater le résultat en redémarrant l'app (CTRL + C dans la console puis dotnet run). Et en allant à :
Paramètres de requête et endpoints
Paramètre de requête
Pour récupérer une paramètre de requête, il suffit de mettre un paramètre avec le même nom à la méthode endpoint :
[HttpGet]
public string HelloWorld(string name)
{
return $"Hello, {name}";
}
On peut ensuite constater le résultat en redémarrant l'app (CTRL + C dans la console puis dotnet run). Et en allant à https://localhost:7229/hello-world?name=Arsène.
Paramètre de chemin
Pour récupérer un paramètre de chemin, il suffit de mettre ce paramètre entre accolades dans la route du endpoint, puis ajouter n paramètre avec le même nom à la méthode endpoint :
[HttpGet("{id}")]
public string HelloWorld(int id)
{
return $"Id : {id}";
}
On peut ensuite constater le résultat en redémarrant l'app (CTRL + C dans la console puis dotnet run). Et en allant à https://localhost:7229/hello-world/1.
Vues
Retourner une vue
Avant de retourner une vue, il faut d'abord crée un dossier dans Views pour notre controleur qui correspond à son nom. Ici notre controleur s'appelle HelloWorldController, notre dossier va donc s'appeller HelloWorld.
On va ensuite créer dedans un fichier hello-world.cshtml, qui sera notre template :
<h1>Hello, world</h1>
Pour le retourner depuis une méthode endpoint, il faut utiliser la fonction View() du controleur :
[HttpGet]
public IActionResult HelloWorld()
{
return View("hello-world");
}
On peut ensuite constater le résultat en redémarrant l'app (CTRL + C dans la console puis dotnet run). Et en allant à https://localhost:7229/hello-world.
Templater une vue
Avec une classe modèle
On peut templater une vue avec un modèle de façon fortement typée, ce qui est pratique car cela permet de répérer d'eventuelles erreurs plus vites.
Soit la classe de modèle (dans le dossier modèle, et n'oublier pas de décomenter dans _ViewImports.cshtml) :
namespace net_web_tuto.Models {
public class Person {
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
Dans la méthode endpoint, on ajouter le modèle dans l'appel à View :
[HttpGet]
public IActionResult HelloWorld()
{
var person = new Person(){ FirstName = "John", LastName = "Shepard"};
return View("hello-world", person);
}
Et pour le template, la syntaxe est la suivante :
<h1>Hello, @Model.FirstName @Model.LastName</h1>
On peut ensuite constater le résultat en redémarrant l'app (CTRL + C dans la console puis dotnet run). Et en allant à https://localhost:7229/hello-world.
Avec d'autres données
Pour templater la vue avec d'autres infos que celles d'un modèle, on peut utiliser le ViewBag, exemple :
Dans la méthode endpoint, on ajouter le modèle dans l'appel à View :
[HttpGet]
public IActionResult HelloWorld()
{
var person = new Person(){ FirstName = "John", LastName = "Shepard"};
return View("hello-world", person);
}
<h1>Hello, @Model.FirstName @Model.LastName, The Date is : @ViewBag.Today</h1>
On peut ensuite constater le résultat en redémarrant l'app (CTRL + C dans la console puis dotnet run). Et en allant à https://localhost:7229/hello-world.
Rendu conditionnel
Pour faire du rendu conditionnel il faut utiliser @if :
@if((20 % 2) == 0) {
<p> 20 is even </p>
}
@if((21 % 2) == 0) {
<p> 21 is not even </p>
}
Seulement "20 is event sera rendu sur la page".
Boucles
Pour faire du rendu en boucle, il faut utiliser @foreach, exemple :
@foreach (var item in Model.Foos)
{
<div>@item.Bar</div>
}
Soumission de formulaire
Pour gérer une soumission de formulaire, il faut un modèle dont les noms des champs correspondent aux champs du formulaire, puis ajouter ce modèle en paramètre la méthode enpoint. La méthode endpoint doit également utiliser la méhotde HTTP POST, et donc l'attribut [HttpPost]. Exemple :
Les deux templates, pour le formulaire et le résultat :
hello-world-form.cshtml :
<form action="/hello-world/salute" method="post">
<input name="FirstName" type="text"/>
<input name="lastName" type="text"/>
<input type="submit" value="Say hello !"/>
</form>
hello-world.cshtml :
<h1>Hello, @Model.FirstName @Model.LastName</h1>
Les méthodes endpoint :
[HttpGet]
public IActionResult HelloWorldForm()
{
return View("hello-world-form");
}
[HttpPost("salute")]
public IActionResult SayHello(Person person)
{
return View("hello-world", person);
}
On peut ensuite constater le résultat en redémarrant l'app (CTRL + C dans la console puis dotnet run). Et en allant à https://localhost:7229/hello-world.
Interaction avec la base de donnée
L'interaction avec la base de donnée se fait via l'ORM (Object-Relationnal Mapper) officiel de Microsoft, Entity Framework Core.
Installer Entity Framework Core
Il faut installer les packages nugets via les commandes suivantes :
dotnet add package Microsoft.EntityFrameworkCore.Design --version 6.0.0
dotnet add package Pomelo.EntityFrameworkCore.MySql --version 6.0.0
Il faut également installer l'outil en ligne de commande d'EF Core pour gérer les migrations :
dotnet tool install --global dotnet-ef
Le DbContext
Il faut ensuite créer notre classe DbContext, point d'entrée de notre base de donnée. Créez un dossier Database et dans ce dossier une classe ApplicationDbContext qui étend DbContext:
using Microsoft.EntityFrameworkCore;
namespace net_web_tuto.Database {
public class ApplicationDbContext : DbContext {
public ApplicationDbContext(DbContextOptions options) : base(options) {
}
}
}
Il faut ensuite rattacher notre ApplicationDbContext à notre application, dans votre Program.cs, rajoutez à la ligne 7 :
// Database
builder.Services.AddDbContext<ApplicationDbContext>(options => {
string databaseHost = Environment.GetEnvironmentVariable("DATABSE_HOST");
string databaseName = Environment.GetEnvironmentVariable("DATABSE_NAME");
string databaseUsername = Environment.GetEnvironmentVariable("DATABASE_USERNAME");
string databasePassword = Environment.GetEnvironmentVariable("DATABSE_PASSWORD");
var connectionString = $"server={databaseHost};database={databaseName};user={databaseUsername};password={databasePassword}";
options.UseMySql(connectionString, ServerVersion.AutoDetect(connectionString));
});
On récupère les identifiant depuis des variables d'environnement, c'est plus projet que des les avoir dans le code.
Vous devriez aussi rajouter des using au début du fichier :
using Microsoft.EntityFrameworkCore;
using net_web_tuto.Database;
Définir les entités
Revenons à notre ApplicationDbContext auquel on va rajouter la méthode suivante pour définir nos entités :
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
}
Il faut aussi rajouter en attributs un DbSet qui va resprésenter notre table :
public DbSet<Person> Persons {get;set;}
Ensuite dans la méthode OnModelCreating, on peut définir notre entité (on a ajouté un champs Id de type Guid à la classe Person pour servir d'identifiant dans la base :
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
modelBuilder.Entity<Person>().HasKey(person => person.Id);
modelBuilder.Entity<Person>().Property(person => person.FirstName);
modelBuilder.Entity<Person>().Property(person => person.LastName);
}
Migrations
Après avoir défini notre modèle, il faut créer notre migration vers la base de donnée et l'exécuter. On va utiliser l'invite de commande EF Core pour ça.
Dans un premier temps on définit notre variables d'environnement (exemple avec Powershell, la syntaxe change selon votre shell):
$Env:DATABSE_HOST = "localhost"
$Env:DATABSE_NAME = "nomDeLaDb"
$Env:DATABASE_USERNAME = "userDeLaDb"
$Env:DATABSE_PASSWORD = "mdpDeLaDb"
Ensuite, exécutez la commande suivante pour créer la migrations :
dotnet ef migrations add maMigration
Enfin pour exécuter la migration sur votre base :
dotnet ef database update
Si vous vous connectez à votre base avec un client, vous deviez voir le schéma déployé.