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

Installer une base de donnée et un client de base de donnée

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 dossier Home d'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.cshtml et Erros.cshtml : vous pouvez les supprimer, ce sont des exemples du projet
- _ViewImports.cshtml : Imports des namespaces dans les templates. Comme on a vider le namespace Models, son import ne compile plus, vous pouvez le commenter pour l'instant (la syntaxe pour les commenaire ici est @* commenaire *@
- _ViewStart.cshtml est le point d'entrée de vos template
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.