A quoi sert le framework JavaScript React avec ASP.NET MVC ?

C'est vrai ça, je ne me suis pas encore posé la question, parmi tous ces Frameworks JavaScripts à quoi servent-ils ? En fait elle est trop dure cette question, trop vaste, je vais plutôt me poser la question de savoir à Quoi sert React ?

Et tout de suite la vraie question c'est à quoi sert un framework fron-end ? Et une partie de la réponse, c'est à nous isoler des différences techniques entre les navigateurs. Tient mais je connais cette problématique depuis le début du développement des applications web.

Merde ! Tout ça pour ça. Plus j'étudie les Applications Web et plus j'ai l'impression de tourner en rond et parfois même de retourner en arrière.

En ce qui concerne React il faut se colter avec JSX bon encore un intermédiaire et on dit qu'il utilise virtual.DOM au lieu de DOM ...

React c'est le framework de Facebook pour créer des interfaces utilisateurs "stateful".

Concept d'Amélioration Progressive : Progressive Enhancement

ASP.NET - Amélioration progressive avec ASP.NET et React
Qui nous parle du projet TodoMVC qui est un "total délire", ce projet c'est l'implémentation d'une Todo List avec tous les types de framework JavaScripts possibles :


TodoMVC

Pour choisir son framework JavaScript ... incroyable, il y a toutes les implémentations de tous les framework JavaScript connus ... je suis dubitatif ...

Advantages of using React as view layer in ASP.NET MVC applications
Franchement pas convainquant

Beaucoup de blabla, on dirait que tout le monde veut une réponse à la question à quoi sert le framework JavaScript React mais personne n'a vraiment de réponse.

Par l'exemple :

ASP.NET Core: CRUD With React.js and Entity Framework Core
Ici on créé des fichiers .tsx qui n'existent pas dans mon Template, probablement supprimé au profit de fichiers .js en SPA (Single Page Application).

Si je prends mon Visual Studio 2017 Community que je créé une application ASP.NET Core avec React.js je n'obtiens pas ce Template d'application.



Application ASP.NET Core with React.js

Et la structure de mon projet diffère de la façon suivante :

FetchData.js au lieu de FetchData.tsx

Ce n'est peut être pas aussi abouti que cela, finalement le développement d'applications Web avec ASP.NET Core et l'intégration de React se fait ... au petit bonheur la chance. Je n'aime pas trop ça.

Non seulement je ne trouve aucune raison d'utiliser React franchement, en plus les façons de faire sont si différentes à chacun sa sauce, c'est une vraie galère ! Pour rester poli ...

Je poursuis mes recherches :

ReactJS.NET - Tutorial (ASP.NET Core)
Ici on est avec Visual Studio 2015 et le gars commence par supprimer des parties du Template Visual Studio, on connait bien cette façon de faire Pfff !

Delete the following files:
• Controllers\HomeController.cs
• Views\Home and Views\Shared folders
• bundleconfig.json
• Project_Readme.html

Pour installer par dessus ReactJS donc c'est ancien, très ancien ! Je le note quand même car vous verrez souvent ce genre de technique en ASP.NET MVC + JS.

Ca sent le gars qui développe un framework complet en parallèle et qui s'est fait absorber par le Main Stream, on y trouve quand même une release en mars 2019 donc le gars n'en à pas fini d'en baver.

DEV - Setting up a React Environment for ASP.NET MVC
Encore un bel exemple d'installation de React par dessus ASP.NET MVC une prise de tête, je ne vous raconte pas mais on voit ce qu'il fallait faire et l'intégration du template dans Visual Studio 2017 Community avec MVC et React et c'est une vraie galère.

Voilà, on est en Octobre 2018, on se rapproche mais on n'a toujours pas répondu à la question "à quoi ça sert React dans tout ça".

Et sinon il y aurait bien une question plus large c'est à quoi sert un framework JavaScript et la réponse serait dans le Guide :

The Ultimate Guide to JavaScript Frameworks
C'est en anglais mais très complet donc entre Angular et React ...

à vous de choisir MDR!

Visual Studio Community 2017 - PowerShell version 2.0 not supported Upgrade to version 3.0

J'ai cette erreur bien pourrie, que PowerShell 2.0 n'est plus supporté et que je devrais faire la mise à jour vers PowerShelle 3.0. Cette erreur se produit au moment où je tente d'ouvrir un projet dont la base de données ne peut être créé avec PowerShell 2.0. Grrrr, alors comment upgrader vers PowerShell 3.0 ?

Et c'est encore StackOverFlow qui gagne le référencement Google :

stackoverflow - How to upgrade PowerShell version from 2.0 to 3.0

Mais on est salement renvoyé sur la page de  Microsoft :

Microsoft - Windows Management Framework 5.1



Windows Management Framework 5.1

Je télécharge le zip : Win7-KB3191566-x86.zip
Moi je dis que cela ne sent pas très bon ... l'intuition cette mise à jour n'est pas celle qu'il me faut.

Je clique sur l'install et BOUM !


Update Microsoft PowerShell 2.0 to 3.0 Impossible

Et puis, je tombe sur une de ces vidéos débiles, vous savez c'est gens qui perdent leur temps à s'enregistrer en Vidéo cela prend 3 heures à enregistrer et 3 heures à regarder, une perte de temps quoi mais le gars me dit comment connaitre la version de mon PowerShell sur ma machine.

Alors j'essaye ;

Menu Demarrer -> Cmd -> PowerShell -> Exécuter en tant qu'admin et la commande :

PS > $PSVersionTable



PowerShell Version sur ma machine

Puis finalement il semble que les mots clefs soient : Windows Management Framework 3.0

Cet article décrit les nouvelles fonctionnalités de gestion de Windows Management Framework 3.0, qui est disponible pour Windows 7 Service Pack 1 (SP1) et Windows Server 2008 R2 SP1. Cette mise à jour vous permet d’utiliser les fonctionnalités suivantes sur un ordinateur qui exécute Windows 7 SP1 ou Windows Server 2008 R2 SP1 :

• Windows PowerShell 3.0
• Windows Management Instrumentation (WMI)
• Windows Remote Management (WinRM)
• Extension d’OData IIS de gestion
• Le Gestionnaire de serveur CIM fournisseur

 Le lien pour Windows 7 :

Mise à jour est disponible pour Windows Management Framework 3.0 dans Windows Server 2008 SP2, Windows 7 SP1 ou Windows Server 2008 R2 SP1

Quand même, un intérêt de cette vidéo c'est qu'il le numéro de la version qu'il faut télécharger.

Windows6.1-KB2823180-x64.msu

Et BOUM !!!

Cette mise à jour ne s'applique pas à mon ordinateur !

J'ai bien l'impression que mon système Windows 7 64 bits est mort, ils ont réussi à le rendre obsolète ...

Not fun :-((

Persévérance et Pugnacité, finalement je trouve une mise à jours que je peux installé sur ma machine Windows 7 pour mettre à jour PowerShell 3.0 son nom c'est :

Windows6.1-KB2506143-x64.msu

Et voici la vérification de la version de PowerShell installée sur mon ordinateur :




Mise à Jour de PowerShell 3.0 sur Windows 7

La difficulté majeure fur de trouver la bonne mise à jour. Le reste du temps sur le site MSDN de Microsoft c'est bien plus facile de trouver la "bonne mise à jour" là j'ai bien cru que je ne la trouverais pas.

Enfin !

Que penser de ASP.NET Core et React ?

Parmi tous les Framework JavaScript lequel choisir ? C'est la question à un millions d'euros car elle implique un fort investissement par la suite dans le maitrise et l'appropriation de ce framework alors lequel choisir entre AngularJS, Angular 6, React, on me parle de VueJS, Ember, Meteor mais pas seulement.


Foisonnement des Frameworks JavaScripts

alsaCréations - Les frameworks JavaScript en 2018
Voilà une très belle comparaison des Frameworks JavaScript, une chose est sûr, je peux m'investir dans React ... un des plus plébiscité par la communauté.

Le Blog Inteam - TOP 5 des Frameworks JavaScript 2017
D'autres Frameworks évoqués Meteor, Ember, leurs avantages, leurs inconvénients.

Mais bon, ces articles datent un peu déjà.

J'en ai trouvé un autre :

https://2017.stateofjs.com/2017/front-end/results/

Concernant les critères de choix d'un framework JavaSCript :

IPPON - Aide au choix d’un framework JavaScript
L'énoncé des critères de choix d'un Framework oui la courbe d'apprentissage est importante c'est un des défaut d'Angular qui est très difficile au début.

Une très bonne idée de ce site c'est d'aller voir la communauté GitHub, leur nombre et leurs activités.

Ainsi pour React nous obtenons :

Communauté open source React sous GitHub

Et aller voir dans les Insights, les Pulses ce qui donne une idée si la communauté est importante et active.

Et pour Angular nous obtenons :

Communauté open source Angular sous GitHub

Le leader de la communauté Angular Pete Bacon Darwing semble plus actif que pour React. Vous pouvez aller visiter toute la communauté pour vous faire une idée assez précise de ses activités.

Et je me rends compte que Ember ou Vue sont bien plus modeste voir inexistant à côté.

Je trouve aussi plein d'informations techniques sur les différents frameworks ici :

codeur mag - React, Angular, Vue : quel framework JavaScript choisir ?
Il faut savoir que ReactJs ne gère que l’interface d’une application web, et peut donc être utilisée avec un framework MVC tel qu’Angular.

Vous en voulez encore, encore plus de Javascripts, vous avez ceci mais c'est en anglais :

Raygun - 9 Popular JavaScript Frameworks for 2019

C'est amusant mais tous utilisent Github pour comparer la popularité et l'acceptation par les communautés de ces différents framework JavaScript. Aux vues de tout ceci React est en très bonne position voir le premier.

On ne parle plus de NodeJS de Knockout ! Donc maintenant essayons de bosser avec ASP.NET et le framework JavaScript React.

Intégration de ASP.NET Core et de React

On vient de lire que React ne gère que l'interface ça tombe bien j'aimerais utilisé React au dessus d'ASP.NET MVC alors ASP.NET Core MVC ?

Il me semble que la meilleur page pour ça c'est celle ci :

Microsoft ASP.NET Core - Utiliser le modèle de projet React avec ASP.NET Core

Quand il est écrit "console" il s'agit en fait bien sûr de la "console du gestionnaire de packages". Je tape la commande suivante :

PM>dotnet --info


Qu'elle version du ASP.NET Core est installée ?

Puisque l'on me demande de savoir qu'elle version est installée :

SDK .NET Core (reflétant tous les global.json) :
 Version:   2.1.505

et que pour pouvoir taper la commande :

PM>dotnet new react -o my-new-app
cd my-new-app


il faut que ASP.NET Core 2.1 soit installé. Ici c'est Ok je peut y aller. Oups petit souci nous sommes dans la partie "Applications monopages".

Création d'une application ASP.NET Core et React

Après l'exécution de la commande PM>dir je suis dans Users/UserName je créé un Répertoire VisualStudio je fais PM>cd VisualStudio puis :



Visual Studio création d'une application ASP.NET Core et React

Je vais voir dans le répertoire D:\Users\Braby\VisualStudio\my-react-app une application est bien là ... Je prends mon Visual Studio et je vais ouvrir le fichier projet my-react-app.csproj

Au moment de l'ouverture :

Ouverture de mon application ASP.NET Core et React

PowerShell version 2.0 is not supported. Upgrade to PowerShell 3.0

Solution à ce problème Ici

Alors que je viens d'installer Visual Studio Community il y a seulement quelques jours, c'est infernal c'est mise à jour incessantes.

Sinon, on a bien sous les yeux une application ASP.NET Core et si on regarde dans le fichier : \\ClientApp\package.json



my-react-app\ClientApp\package.json

le version de React est 16.0.0.

Exécution de l'application ASP.NET Core & React

D'abord un petit build, npm se charge de tout pour restaurer les dépendance du projet :

Application ASP.NET Core React - Build

Ca prend du temps en effet quelques minutes mais à la fin : Génération Réussie.

Exécution avec IIS Express :


Application ASP.NET Core 2.1 avec React

Je suis bluffé on est quand même avec la version community de Visual Studio et ça fonctionne j'ai même un exemple sympathique de bouton compteur que je peux incrémenter et même des données.

Je peux débuter le développement de ma nouvelle application SPA ASP.NET Core MVC avec React.

Conclusion

Il semble que l'on arrive à une certaine maturité, l'emploi des scripts dans la console package manager simplifie des tâches complexes d'installation et de configuration des frameworks. On arrive assez vite à une application qui fonctionne.

Have fun!

ASP.NET Core Activer le suport de Docker qu'est ce que cela change ?

Vous êtes en train de créer une application ASP.NET Core et vous voyez la case à cocher "Activer le support de Docker" au moment de configurer le Template de votre application (le squelette que va créer Visual Studio pour vous) alors qu'est ce que cela implique ?


ASP.NET Core Activation du support pour Docker

Documentation Microsoft & Docker en ligne

On trouve les liens directement dans la dialogue box de configuration. Pour pouvoir utiliser le support de Docker il faut "Docker pour Windows" c'est à dire :

Install Docker for Windows

System Requirements

• Windows 10 64bit: Pro, Enterprise or Education (1607 Anniversary Update, Build 14393 or later).
• Virtualization is enabled in BIOS. Typically, virtualization is enabled by default. This is different from having Hyper-V enabled. For more detail see Virtualization must be enabled in Troubleshooting.
• CPU SLAT-capable feature.
• At least 4GB of RAM.

Il faut certainement également déjà lire :

Get started with Docker for Windows



Les Containers et les Machines Virtuelles

Sur ce schéma, on voit bien où intervient Docker et le rôle qu'il joue dans la virtualisation des ressources qui permettent à votre application de s'exécuter.

Comparaison des solutions générées par Visual Studio

Je vais simplement comparer les deux solutions générées par Visual Studio, l'une sans la case cochée "Activer le support de Docker" et l'autre avec l'activation du support de Docker.


ASP.NET Core - Support de Docker

.dockerignore

Il existe à gauche un fichier .dockerignore qui ressemble fort au fichier .gitignore que l'on connait avec le gestionnaires de sources "Git". C'est de la gestion de fichiers, simplement indiquer à Docker quels fichiers ne sont pas à prendre en compte.



ASP.NET Core Activer Docker .dockerignore

Les extension de fichiers à ignorer sont donc les suivantes
.env, .git, .gitignore, .vs, .vscode, */bin, */obj, **/.toolstarget


ASP.NET Core Activer Docker - Solution

launchSettings.json

ASP.NET Core Activer Docker - launchSettings.json

Comparaison des fichiers de la solution ASP.NET Core avec et sans activation du Container Docker.

WebApplication1.csproj

C'est le fichier projet de la solution.


ASP.NET Core Activer Docker - WebApplication1.csproj

Le tag "DockerTargetOS" indique que l'on a fait le choix de Windows au moment de la création de la Solution, on aurait pu choisir Linux.

On voit également que Docker utilise le package : Microsoft.VisualStudio.Azure.Containers.Tools.Targets

Dockerfile

N'existe que pour la solution avec support de Docker. On dirait des commandes DOS, c'est l'équivalent d'un lien de lancement de l'exécutable qui sera généré : WebApplication1.dll


ASP.NET Core Activer Docker - Dockerfile

Conclusion sur la comparaison des solutions générées

Il y a vraiment peu de choses dans le code source pour qu'une application ASP.NET Core soit activable pour le support de Docker.

Il reste maintenant à passer à l'installation de Docker pour Windows et là moi je ne peux pas encore vous aider car je suis actuellement encore avec Windows 7 ;-)

Let's have fun!

Comment est utilisé le Design Pattern Pipeline dans ASP.NET Core ?

Nous avons appris que pour ASP.NET Core vs ASP.NET Framework, le fichier Global.asax a disparu. Il est remplacé au profit du pattern Pipeline fournit par OWIN. Alors c'est quoi le Pattern Pipeline et comment est-il utilisé dans ASP.NET Core pour remplacer le fichier Global.asax.

Je vais essayer de répondre et d'abord en effet l'utilisation du fichier Global.asax couple l'application au serveur sur lequel elle est déployée. Autrement dit c'est alors compliqué de faire du multiplateforme comme on souhaite le faire ASP.NET Core.

La difficulté de l'exercice ici, c'est bien de reconnaitre à la fois le design Pattern Pipeline dans les design patterns reconnus et décris. Et en plus de le reconnaitre dans le code de l'application ASP.NET Core qu'il est donnée d'étudier.

Design Pattern Pipeline dans le code C#

Le Design Pattern Pipeline est évoqué ici :

Remplacement du fichier Global.asax

Le Pipeline est fournit par OWIN dans la fonction Startup au démarrage de l'application :

Démarrage d’une application dans ASP.NET Core

Dans la méthode Configure le pipeline de requêtes HTTP est configué en ajoutant des composants d'intergiciel (middleware) à une instance de l'interface IApplicationBuilder.

Ca calme légèrement nos ardeurs ! Au niveau de notre application ASP.NET Core, on est dans le fichier startup.cs, on peut voir l'interface IApplicationBuilder :


Design Pattern Pipeline au sein d'une application ASP.NET Core

Voilà donc l'endroit où l'on peut trouver le Design Pattern Pipeline d'OWIN, utilisé au démarrage de l'application par ASP.NET Core.



Créer un pipeline de middleware avec IApplicationBuilder

Design Pattern Pipeline, est-ce la Chaine de Responsabilités ?

Au début il y a la définition : Wikipedia - Pipeline (software)
In software engineering, a pipeline consists of a chain of processing elements (processes, threads, coroutines, functions, etc.), arranged so that the output of each element is the input of the next; the name is by analogy to a physical pipeline.

Le problème c'est que je ne trouve pas ce Design Pattern dans la documentation classique :

DoFactory - .NET Design Patterns

Il y a bien un pattern qui s'en approche ? Et encore :

DoFactory - Chain of Responsibility
Définition : Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it.



Design Pattern - Chain of Responsabilities

Pour éviter les couplages cela semble en effet un but du pattern. Et là je ne sais pas dire si ces deux patterns sont bien les même ...

Ici on se pose encore la question :

StackoverFlow :  Would this be a pipeline, a chain of responsibility, or something else?

Là le Hojjet enfonce le clou :

Hojjat Khodabakhsh - CHAIN OF RESPONSIBILITY (PIPELINE) DESIGN PATTERN



Le fameux Design Pattern - Pïpeline

Bon, ça y ressemble assez bien quand même.

Je vous avais dit que cela n'était pas si simple, il me faut continuer cette étude.

To Be Continued, en attendant je vous propose :

Merci de faire un don.

Have fun!

Comment utiliser JQuery.UI with ASP.NET Core 2.0 ?

Vous cherchez une réponse à cette question toute simple dont on a déjà trouvé la réponse avec ASP.NET et vous allez découvrir npm encore un petit jeux avec les packages, y'en a pas un peu marre de tous ces systèmes de gestion de packages ?

Donc c'est étonnant mais la seule non réponse à cette question se trouve là :

https://stackoverflow.com/questions/48457567/how-to-add-jquery-ui-to-asp-net-core-vs2017

C'est une non réponse car une partie de la solution est donnée pour ASP.NET Core 2.1 ... et cette solution parle d'ajouter l'utilisation de LibMan avec ASP.NET Core ce qui nous éloigne encore plus du sujet.



Use LibMan with ASP.NET Core in Visual Studio

En cliquant sur le bouton Upload ...

Il y en a qui se complique la vie

View or download sample code (how to download)
En cliquant sur le lien (how to download) on télécharge un zip.

Dézippe :
\\Visual Studio\Samples\ASP.NET Core\AspNetCore.Docs-master\AspNetCore.Docs-master\aspnetcore\client-side\libman\samples\LibManSample

Il y a un fichier projet :
LibManSample.csproj

Que j'ouvre avec mon Visual Studio 2017 Community :


Use LibMan with ASP.NET Core in Visual Studio

Un petit coup de build ...

Use LibMan with ASP.NET Core in Visual Studio - MSB4018

Et BOUM !

Ah oui avec ASP.NET Core les Nuget sont "par user" dans le répertoire des Users :

ASP.NET Core in Visual Studio - Nuget Packages

Ah mince, ça ne fonctionnera jamais ... en plus imaginez un peu j'ai changé de version de Visual Studio je vois ici d'anciens packages concernant Xamarins ...

Not fun ;-(

J'essaye de renommer le répertoire "package" en "package OLD" évidemment Windows me dit que ce n'est pas possible. Je quitte  donc Visual Studio, je renomme, je rebuild :

Use LibMan with ASP.NET Core in Visual Studio - Packages

Et REBOUM !!

Arg !!! Au secours même erreur MSB4018

A priori, il se plante dans la tâche de construction de build de la librairie Microsoft.Web.LibraryManager.Build.

Erreur MSB4018 Échec inattendu de la tâche "Microsoft.Web.LibraryManager.Build.RestoreTask".

Bon mon propos n'est pas de builder LibraryManager mais c'était d'utiliser JQuery avec ASP.NET Core, l'objectif n'est pas atteint mais on va voir que c'est de plus en plus difficile de travailler avec ASP.NET car les Frameworks se multiplient à gauche à droite.

De qui Angular JS, Angular 2, 3, 4, 5, 6 oui oui si si on en est à 6 ...

React, bref ... on va essayer de faire un peu de ménage dans tout ça.

ASP.NET Core 2.0 c'est quoi ?

Et bien c'est bien plus clean qu'avant, bien plus clean qu'ASP.NET Core 1.0. Est ce que l'on arrive enfin à un réel environnement de développement multiplateforme ? Nous allons voir que le chemin est encore long comme le disait le petit padaoine.

ASP.NET Core dans l'Azure

Je ne vais pas aller très loin. J'ai fais simplement les mises à jour de mon Visual Studio 2017 Community et me voilà avec mes nouveaux templates pour travailler avec ASP.NET Core :



Visual Studio 2017 Community ASP.NET Core Templates

On peut dire une chose déjà, c'est plus simple, je cherche alors de la littérature sur le sujet :

Présentation d'ASP.NET Core

Didacticiels ASP.NET Core

Voilà, c'est ce que j'ai trouvé de mieux. Par la suite, je vais m'intéresser à la structure d'un projet ASP.NET Core 2.0 et à la gestion des packages NuGet, là c'est une autre histoire que j'ai développée Page Suivante.

Voilà la structure de mon projet ASP.NET Core 2.0 :




ASP.NET Core 2.0 Structure

J'ai installé le NuGet JQuery.UI.Combined. On voit que la structure de ce projet est de celle décrite en Janvier 2017 par Jonathan ABRAHAM de Supinfo Ici.

On peut dire qu'avec ASP.NET Core tout va très vite ... ;)

Personnellement je plaints ceux qui se sont lancés trop tôt car avant de montrer une application qui fonctionne à leur client ils ont du batailler.

En effet le  temps que je revienne continuer cet article on est passé au .NET Core 2.1. Les différences notables sont importantes.

Gestion des packages NuGets

On l'a vu, ils ont disparu de la proximité de l'application, il n'y a plus de répertoire App_Data et c'est bien dommage ! Ils sont transférés au niveau du User dans le répertoire suivant :

C:\\Users\UserName\.nuget\packages

C'est stupéfiant, on pense alors au déploiement des applications, maintenant on est plutôt dans une philosophie user : les mêmes NuGets pour toute les applications.

Astuce : Si vous développez plusieurs application sur la même machine de développement. Comme la restauration de NuGets est scripté dans le prébuild de l'application, vous pouvez très bien vous rendre dans le répertoire ".nuget" et renommer le répertoire "packages" en "old packages" par exemple et vous allez voir les nouveaux Nugets pour votre nouvelle application.

Connexion string

On a vu l'utilisation des commandes dans la Console du Gestionnaire de package pour utiliser un le répertoire "Migrations" et générer automatique la Base de données correspondante à l'application.

Là encore en tapant la commande "upate-database" qu'elle ne fut pas ma surprise de constater que la BD ainsi créé se trouve dans :

C:\\Users\UserName\WebApp1.mdf

C'est pas joli joli, en tous je me demande comment on déploie. Les fichiers XML ont été abandonnés au profit de fichiers .json c'est ainsi que la "connection string" se retrouve dans le fichier :

\\Samples\ASP.NET Core\Sample-2.1\appsettings.json



ASP.NET Core - Connection String

 "WebApp1ContextConnection": "Server=(localdb)\\mssqllocaldb;Database=WebApp1;Trusted_Connection=True;MultipleActiveResultSets=true"

Voilà c'est tout pour l'instant ! Mais je reviendrai surement.

IIS Express - Configuration - Ou comment configurer ce Serveur Internet ?

Voici les éléments essentiels de la configuration du serveur Internet "IIS Express", ce que j'ai mis pas mal de temps à trouver car maintenant sur Internet la mauvaise information cache souvent la meilleure. Ben oui, il n'y a plus de modérateur alors ... Heureusement ici que l'essentiel.

Je ne pensais même pas qu'il faillait configurer IIS Expres cette version de développement d'IIS jusqu'à ce que je tombe sur un projet qui s'en servait et qui avait eu du mal à passer de http à https. Vous pourrez lire la littérature sur IIS vs IIS Express bref il ne faudrait pas l'utiliser mais sur ce projet, on se servait d'IIS pour déployer en prod, par conséquent IIS Express était utilisé et dédié au dev.

Ce foutu IIS Express s'installe dans le "systray" de votre ordi, vous savez tout en bas à droite, à côté de l'heure dans la barre des tâches et c'est le SEUL MOYEN d'accès :

Il faut cliquer droit sur l'icône dans le systray :

IIS Express

Pour afficher toutes les applications :

Systray d'IIS Express pour afficher toutes les application

Voici la fenêtre ISS Express qui apparait :

Fenêtre IIS Express de gestion des Sites Web

Configuration d'IIS Express

C'est là que c'est fort car nous n'avons toujours pas accès à la configuration d'IIS Express pour l'instant, il faut encore faire un clique c'est là que tout apparait :

Accès au fichier de configuration d'IIS Express

Donc, j'ai eu du mal à obtenir cette information essentielle pour la configuration d'IIS Express, le fichier de configuration s'appelle le applicationhost.config.

Un partie de la configuration se trouve également dans le .csproj du site web :



Je ne suis pas certain que l'on puisse configurer tout ça à l'aide des Propriétés du projet ...

Utiliser IIS Express au sein du projet de Site Web

Où est par exemple l'option "UseClassicPipelineMode" ? Il me semble qu'on ne la trouve pas dans la page des Propriétés du projet.

Pour rendre à César ... voici de plus amples explications, en anglais, Ici.

ASP.NET Web API - Créer une véritable application - #2

Vous souhaitez  utiliser une Web API pour fournir un service RESTful (autrement dit API REST) vers un Client ASP.NET et ce n'est pas si facile. En effet cette techno est faite pour fournir une API vers le poste de travail, la tablette, le mobile. Mais pour afficher des données en provenance d'une Web API dans une application ASP.NET, il va falloir écrire pas mal de javascript et oui ... alors allons-y.

Démarrons avec une bonne application de départ, un bon Template, je vous conseille BookService de Mike Wasson qui s'illustre en écrivant la série d'articles suivants :

Using Web API 2 with Entity Framework 6



https://docs.microsoft.com/en-us/aspnet/web-api/overview/data/using-web-api-with-entity-framework/part-1

Voilà, on est en plein dans le vif du sujet, la plus part des sujets sont résolus dans cette série d'articles seulement maintenant, comment aller plus loin. En effet, le CRUD (Create Read Update Delete) n'est pas complet. On ne peut en définitive pas faire grand chose avec cette simple application.

Je vais adapter les codes sources de ce sample pour en faire une Filmothèque, et vous permettre de gérer vos films favoris.

Eviter un premier écueil, le piège du cache

Il ne faut pas oublier le cache de votre navigateur. Pour développer, ici on est en JavaScripts et donc si vous devez modifier les scripts associés à votre projet, comme par exemple le script "app.js" vous devrez supprimer les données du cache de votre navigateur sinon vous restez avec l'ancien script et vous ne verrez pas vos modifications :



JavaScripts de mon application ASP.NET WebAPI

Vous trouverez pour chaque navigateur le moyen de supprimer les données du cache :

Supprimer les données du cache de votre navigateur !

Plus pratique, le raccourcis :

Ctrl + F5 : démarrer et vider le cache

 

Qui démarre le navigateur en supprimant les données du cache.

Gestion des données avec le Package Manager et "Code First Migrations"

Je ne connaissais pas, alors je prends des notes d'un truc assez cool. C'est l'utilisation de "Code First Migrations" avec Entity Framework. C'est à dire d'écrire du code C# pour remplir la BD avec des données en utilisant la fonction Configuration.Seed.

Puis simplement avec les commandes :

PM> Enable-Migrations
PM> Update-Database

Le plus difficile, c'est de trouver comment afficher la Console du Gestionnaire de packages, c'est ici :



Outils->Gestionnaire de packages NuGet->Console du Gestionnaire de package

Dans cet exemple :
On va apprendre à maitriser le script app.js qui est le ViewModel de notre vue sur le service WebAPI
On fera également du bootstrap Framework CSS
On ajoutera un bouton "Delete" pour pouvoir supprimer une entité et ainsi réaliser le CRUD complet.

Architecture de l'application WebAPI

Il s'agit bien entendu d'une architecture MVC (Model View Controller). Avec un contrôleur sécifique dédié aux WebApi.

Model

Le Model est calqué sur la base de donnée grâce à l'utilisation de "Code First". Le modèle peut être modifier dans le code et la base mise à jour.

Le fichier Configuration.cs du répertoire Migrations permet en utilisant la fonction Seed de créer des enregistrements dans la BD.



Utilisation de Code first et création d'éléments dans la Base de Données

Controller

Il s'agit d'une WebAPI le contrôleur dérive donc d'un ApiController

La fonction GetFilm de l'ApiController qui permet de retourner le film demandé par "id" :


GetFilm FilmsController : ApiController

View

La View Index.cshtml est posée sur un ViewModel définit dans le JavaScript app.js que l'on a vu au dessus. C'est à la fois la difficulté et la simplicité de de ce choix d'application.

Simplicité car l'application est fluide et toutes les opérations sur les objets découlent de ce choix d'architecture, difficulté car il faut modifier le JavaScript pour l'adapter au besoin de lapplication.

On va ajouter une table pour nous permettre d'afficher nos données et de les manipuler : afficher la Vue détails de notre objet film.



Ajouter une légende

Et on ajoute un href deleteFilm qui va déclencher la fonction JavaScript :

app.js function deleteFilm

Voici donc le CRUD de mon application FilmService

Démonstration rapide du CRUD par quelques copies d'écrans. Au démarrage de l'application nous avons dans le navigateur la page suivante :



Home/Index

J'ajoute mon film, je choisi comme Author : Cédric clapich, je clique sur le bouton Submit.

Add Film

Le nouveau film apparait dans la liste des Films :

Je peux alors choisir d'afficher les détails du film ou de le supprimer. Je choisis d'afficher les détails en cliquant sur Details :

La partie détails apparait

Je choisis en suite de supprimer ce film, je clique sur Delete.

Suppression du film

Si je reclique sur "Delete" un message "Not Found" apparait...



Voilà, c'est un CRUD avec une Application ASP.NET qui utilise knockout.js pour fabriquer le ViewModel du pattern MVC.

Pour ajouter un film, j'ai utilisé un POST. Il faudrait utiliser un PUT pour effectuer une mise à jour mais l'Update du CRUD peut toujours être vu comme une suppression suivi d'une recréation. Nous avons donc une application complète qui résous quelques petits soucis laissés en suspend par M. Wasson.

Vous êtes intéressé par des détails supplémentaires... n'hésitez pas, faites moi signe, laissez moi un commentaire. Je vous expliquerai la partie qu'il vous manque.

Voilà on vient de débuter un vrai projet d'API REST.

To Be Continued ...

Download Source Code

Je vous livre les sources, je reviendrais les commenter de façon plus approfondi une prochaine fois. A l'intérieur du .zip il y a un petit fichier readme.txt qui vous permet d'installer la BD de l'application.

Download Source Code ASP.NET WebAPI FilmLibrary in C#

Je dois partir faire du "ASP.NET Core" multiplateforme ...

Don't forget to Have fun!