ASP.NET Core & Entity Framework & Angular - Architecture d'une application professionnelle

Voici une stack stable ASP.NET Core & Angular et bien sûr Entity Framework Core pour l'accès aux données. Une stack avec laquelle on peut développer durablement des applications webs. Dans ce post j'aborde les solutions pour réaliser une vraie application ASP.NET Core & Angular (full stack).

Après la mise en bouche de l'article 1 :

ASP.NET Core & Angular Template - 1
Apprendre à installer et à exécuter une Application ASP.NET Core & Angular

Suivi de l'article 2 :

ASP.NET Core & Angular Template - 2
Apprendre à lancer le Server Angular CLI depuis Visual Studio Code indépendamment du processus ASP.NET Core.

Je définis l'architecture d'une véritable application du monde réel avec des vraies données.

ASP.NET Core et Visual Studio Community 2019 nous donne maintenant accès à un Template d'application Angular. Angular c'est du langage TypeScript, ce langage développé par Miscrosoft et adoubé par Google, alors allons y.

Etude de faisabilité et architecture

Les Design Patterns de notre Application :

Microsoft - Implémenter la couche de persistance de l’infrastructure avec Entity Framework Core

Le schéma suivant est intéressant :



Utilisation de dépôts personnalisés par rapport à un simple DbContext

Voici les deux Patterns principaux de notre Application ASP.NET Core & Angular, le "Repository" et le "UnitOfWork" qui rassemblent les objets récupérés depuis la base de donnée.

Ce projet est du type SPA (Single Page Application) ce qui implique cette organisation avec un Repository pour tout charger au lancement de l'application. Cela donne une bien meilleure réactivité à l'interface utilisateur.

Voici un peu de code avec la page suivante :

Micorsoft - Tom Dykstra - Implementing the Repository and Unit of Work Patterns in an ASP.NET MVC Application

Pattern IoC, Repository and Unit Of Woks sont des mots clefs qui sonnent bons dans le cadre de ce projet. Alors allons y défrichons !

Il s'agit donc du DDD (Domain Driven Design).

Je regarde les travaux de Tugberk Ugurlu

Tugberk Ugurlu - Generic Repository Pattern - Entity Framework, ASP.NET MVC and Unit Testing Triangle

Ce sont les travaux les plus avancés en matière de "Repository Pattern" mais dans sa "Best approach" à mon sens il va trop loin en générifiant également le contexte dans la classe abstraite suivante :

public abstract class GenericRepository<C, T> :
    IGenericRepository<T> where T : class where C : DbContext, new() {

Autres liens utiles pour travailler avec ASP.NET Core EF et Angular

Arch - UnitOfWork
Joli projet à étudier, bel exemple de pattern Repository et Unit Of Work

CODE MAZE - Implementing Asynchronous Generic Repository in ASP.NET Core
Le modèle Repository augmente le niveau d'abstraction dans votre code. Cela peut rendre le code plus difficile à comprendre pour les développeurs qui ne sont pas familiarisés avec ce pattern. Mais une fois que vous en aurez pris connaissance, cela réduira la quantité de code redondant et facilitera la maintenance de la logique.

Et encore Ici :

.NET Entity Framework Core Generic Async Operations With Unit Of Work Generic Repository

Voilà, avec tous ces éléments, nous sommes en mesure de réaliser le projet d'un Dashboard Universel qu'il suffirait de brancher sur une base de données pour en connaitre les éléments essentiels et afficher dans une interface Web en Angular leurs évolutions dans le temps.

Spécifications du projet

Je souhaite utiliser au maximum les possibilités d'Angular et le rafraichissement des datas en provenance d'une base de données afin de réaliser un Dashboard Universel (un Tableau de bord) afin de maitriser le SI (Système d'Information de l'entreprise).

Mon projet réalise du Monitoring de données et permet à l'utilisateur de positionner des indicateurs, des "vue mètres", des gauges, des graphiques afin de permettre l'observation des données en fonction du temps (en temps réel ;-).

Exemple : J'ai à traiter 1000 tickets sur ma plateforme de Call Center. Tout au long de la journée des opérateurs interviennent pour traiter ces tickets, ils mettent à jour la case "NbTicket" dont la valeur augmente d'heure en heure.

Voici le graphique que j'obtiens à la fin de la journée :

Le Graphe de mon Data Monitor sur les tickets traités

Les opérateurs démarrent à 8 h et terminent à 19 h.

Voici encore quelques exemples de projets Dashboard desquels s'inspirer :

Dashing - The exceptionally handsome dashboard framework

Et ceux qui en parlent le mieux, ce sont eux :

Agile Tribu - DASHING DEUX EN UN : POUR UN DASHBOARD ÉTINCELANT !

Je sais ça fait des dizaines d'années que l'on cherche à faire un "Dashboard" pour ma part, j'ai débuté en 2011 avec Silverlight ce fut un fiasco. Je crois qu'avec Angular, on peut faire quelque choses de bien.

Ici c'est magique
Attention cela ne fonctionne pas pour le navigateur IE !

Mon projet, c'est donc de faire un Shopify/dashing en C#.NET

dashing.net is a direct .net port of the dashing framework originally created by Shopify/dashing

De faire du monitoring de données et le meilleur site pour en parler que j'ai trouvé c'est ici :

Informatica - What is Data Monitoring?

Un autre site avec des acteurs du "Data Monitoring"

solarwinds - Server & Application Monitor

Et là, il y de superbes graphiques :

https://solutionsreview.com/network-monitoring/

IHM ou Front

C'est une application Angular CLI que l'on ouvre avec Visual Studio Code pour y lancer la commande du type :

>ng serve

Exemple de Dashboard :

DevExpress - Sales & Revenue Dashboard

Application ASP.NET Core & Angular

Le répertoire ClientApp héberge l'application Angular au sein du répertoire src autour de l'application Angular pour qu'elle fonctionne il y a plein de trucs "Windows".

Autour du Répertoire "ClientApp" nous avons :

Le fichier Startup.cs

Avec ASP.NET Core contrairement à ASP.NET Framework, il y a plus d'ouvertures vers des extensions "libres" et donc plus de choses à configurer à travers le fichier Startup.cs.

J'ai une erreur du type :

Severity Code Description Project File Line Suppression State
Error CS1929 'CompatibilityVersion' does not contain a definition for 'SetCompatibilityVersion' and the best extension method overload 'MvcCoreMvcBuilderExtensions.SetCompatibilityVersion(IMvcBuilder, CompatibilityVersion)' requires a receiver of type 'IMvcBuilder'

Heureusement il y a StackOverFlow :

StackOverflow - How to fix 'IMvcBuilder' doesn't contain a definition for 'AddXmlDataContractSerializerFormatters'

>PM Install-Package Microsoft.AspNetCore.Mvc.Formatters.Xml

Mais je croyais que les Packages Nugets étaient réinstallés automatiquement !

IConfigurationSection

IServiceCollection.Configure

Fichier de configuration appsettings.json

D'où viennent les paramètres de configuration ? Il n'y a plus de fichier Web.Config mais il y a ce code :

var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");

var config = new ConfigurationBuilder()
                .SetBasePath(pathToContentRoot)
                .AddJsonFile("appSettings.json", optional: true, reloadOnChange: true)
                .AddJsonFile($"appsettings.{environment}.json", optional: true)
                .Build();

Alors d'où vient la variable d'environnement : ASPNETCORE_ENVIRONMENT

ASPNETCORE_ENVIRONMENT value = Development

MSDN - Utiliser plusieurs environnements dans ASP.NET Core 

Dependency Injection

Un sujet à travailler autour de la fonction AddMvc : MVC services to the specified Microsoft.Extensions.DependencyInjection.IServiceCollection

AddMvc Extensions.DependencyInjection AddJsonOptions

Localisation

Localization de l'application c'est un sujet qu'il faut prendre en compte au début du développement. Le meilleur site que j'ai trouvé pour ça :

Blog of Joonas W. - ASP.NET Core Localization Deep Dive

Couche Model

Implémentation des Models de base de données avec EF Core, c'est un jeu d'enfant.

Couche Business

Autour de l'objet DbContext elle crée les services de l'application liés au métier, du type :

ObjetQueryBusiness
ObjetDefinitionBusiness

Implémente le Pattern UnitOfWork

Implémente l'interface de l'ensemble des données du projet : MyProject

IMyProjectBusiness

Création d'un objet SQL Server Connector

Il s'agit de créer un Multiconnectors pour gérer les liaisons aux bases de données, il faut être capable de se connecter à tout type de base données c'est prévu de base par EF Core.

Ca me rappelle mes bonnes vielles applications webs asp.net avec des connecteurs multiples à des bases multiples et puis à maintenir, c'était tellement compliqué qu'à la fin on finissait par ne choisir plus qu'un seul modèle de connecteur : SQLServer !

ASP.NET Core SqlServeur Connector

Entity Framework - Fournisseurs de base de données

GetQueryResultJsonAsync
  ReceiveToJsonAsync
    Exécution d'une query et retour en Json
    REST services with ASP.NET Core and SQL Database
    syed-afraz-ali/SqlDataReaderExtensions.cs
    Mais aussi par ici : blog4rami - SqlDataReader to JSON string

EntityDatabaseTransaction

On regardera également du côté de :

GitHub - EntityFramework.SqlServerCompact

Couche Data Access Layer (DAL)

On doit y Implémenter le Pattern Repository
Possède le répertoire "Migrations" et les éléments nécessaires à l'accès aux base de données.

Implémente la Class MyProjectDbContext qui dérive de DbContext.

Question : Quelles différences entre les fonctions DbSet et Set() dans Entity Framework Core ? Avec la réponse sur ce site intéressant :

Entity Framework Core Tutorial
Vous utilisez DbSet lorsque vous connaissez le type d'entité avec lequel vous souhaitez jouer. Vous utilisez Set<> lorsque vous ne connaissez pas le type d'entité avec lequel vous voulez jouer.

Les Widgets

L'avantage avec l'utilisation de JavaScripts, c'est qu'il existe bon nombre de librairies graphiques de contrôles utilisateurs prêts à être utilisés. Pour n'en citer qu'une je prendrai ZingChart :

Zingchart - Gauge Chart Type Demos
De magnifiques Gauges


Zingchart - Your First JavaScript Chart



Conclusion

L'architecture des applications ASP.NET Core est complexe avec de nombreuses possibilités de configuration grâce à l'Injection des Dépendances et des modules tiers. Nous allons aborder chacun de ces morceaux pour créer l'architecture d'une Véritable application ASP.NET Core & Angular.

Pour terminer l'étude de ce projet de "Dashboard Universel", encore un peu de lecture au sujet des Widgets, je vous laisse avec la lecture de la page suivante :

BFM Business - Le standard Universal Widget API

Et maintenant notre produit final, une solution Open Source : 

Dashboard Universel

ASP.NET Core & Angular - Dashboard Universel

Come and visit us you'll be always welcome !

Have great fun!


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!

MVC5 Angular2 - Structure de l'application Todolist Template

Détaillons un peu plus la structure de l'application Sample Angular 2 RC1 and Mvc 5 application. Dont nous avons vu comment installer et faire fonctionner l'application avec Visual Studio Community 2015 Ici.

En partant de la documentation du projet, c'est un peu plus simple, on voit par exemple que Visual Studio 2015 Update3 est préconisé. Mais c'est toujours l'enfer toutes c'est versions par exemple il existe une sample : Angular2 Mvc6 sample application

MVC 6 !?

Compilateur open source Roslyn

J'en découvre encore, pour l'instant je note :

en ouvrant le répertoire Bin, je tombe sur Roslyn : "Open source compiler for C# and VB"

Microsoft Visual Studio - compilateur Roslyn

Est-ce à dire que ce template embarque un compilateur spécifique ? On dirait bien qui oui.

Angular2 Qu'est ce que cela signifie par rapport à AngularJS ?

Oui après tout, on croit savoir mais est ce que l'on sait vraiment ? Je lis un truc sur Angular2 déjà on me dit que ce n'est pas un upgrade d'AngularJS mais que Google à totalement réécrit AngularJS en créant Angular2. Nous voilà bien.

Un peu de lecture : Introduction à Angular 2 comparatif entre AngularJS et Angular2

On dirait bien que vous aviez appris plein de chose avec Angular JS et bien il faut tout recommencer Apple et Google même combat rien n'est compatible.

AngularJS c'est :

• Architecture MVC (Modèle-Vue-Contrôleur
• Data Binding
• Injection de dépendances
• La manipulation du DOM

Et allons y, pendant qu'on y est, si on apprenait un nouveau langage de programmation, il y avait bien longtemps que cela ne m'était pas arrivé, je vous propose maintenant TypeScript

Vous l'aurez compris tout, absolument tout change avec Angular2.

Débuter avec Angular2

Pour bien débuter avec Angular2, il y a 3 points importants :

TypeScript
Is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.

Node.JS
Interpréteur JavaScript côté serveur

Connaître les objets JavaScript

TypeScript dans l'application Todolist

Dans le répertoire \bin on remarque une DLL TypeLite.dll, elle est installée par le package TypeLite

Ce package permet de générer du TypeScript à partir des classes .NET.

Au sein d'ASP.NET MVC TypeLite génère du TypeScipt à partir de classes C#

Un outil qui génère du TypeScript à partir de modèle .tt et de fichier .ts très différent de ce que l'on a l'habitude de voir et très lié à Angular2.

Modèle .tt du projet : TypeLite.Net4.tt

Quoi d'autre avec TypeScript ?

Dans les propriétés du projet Angular2Mvc5Application1.csproj Onglet -> Build TypeScript un petit message : "Un ou plusieurs fichiers tsconfig.json détectés. Les propriétés du projet sont désactivée."

Ok, je cherche donc "tsconfig.json" dans l'arborescence des répertoires du projet :

tsconfig.json dans un projet ASP.NET Angular2 MVC5

C'est impressionnant non ?

On trouve un fichier tsconfig.json dans le répertoires :

\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\node_modules\reflect-metadata\test

Mais également à la racine du projet :

\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\

Dans le fichier projet : Angular2Mvc5Application1.csproj

se trouve un directive :

<Content Include="tsconfig.json" />

Le fichier tsconfig.json fait donc bien partie de la solution.

Compilation des fichiers .ts

Au sein du fichier projet on trouve une directive : TypeScriptCompile 

  <ItemGroup>

    <TypeScriptCompile Include="app\boottodolist.ts" />

    <TypeScriptCompile Include="app\components\todolist\todolist.component.ts" />

    <TypeScriptCompile Include="app\services\app.service.todolist.ts" />

    <TypeScriptCompile Include="app\utils\HttpHelpers.ts" />

    <TypeScriptCompile Include="Scripts\Enums.ts">

      <DependentUpon>TypeLite.Net4.tt</DependentUpon>

    </TypeScriptCompile>

    <TypeScriptCompile Include="Scripts\TypeLite.Net4.d.ts">

      <AutoGen>True</AutoGen>

      <DesignTime>True</DesignTime>

      <DependentUpon>TypeLite.Net4.tt</DependentUpon>

    </TypeScriptCompile>

  </ItemGroup>

Il y a toute une arborescence de répertoires sous la racine app 

NodeJS dans l'application Angular2 MVC 5 ToDoList

En ce qui concerne Node.JS, on a vu dans l'Installation de l'application comment installer Node.JS au sein d'une application ASP.NET MVC. 

On se retouve avec un répertoire à la racine du projet : 

\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\node_modules

Tous ces fichiers sont installés par >npm ...

En faisant bouton-droit-> Propriétés du répertoire on obtient :

node_modules - 6739 Fichiers pour 38,5 Mo

Impressionnants, j'entendais une remarque à propos de Node.JS que je note ici : "Toutes les questions que l'on se posait avec JQuery sont résolues dans Node.JS".

Bas alors ! C'est parfait si tout est résolut avec Node.JS ...

Angular2 MVC JavaScripts

Encore une petite chose comparons les répertoires Scripts d'une application ASP.NET MVC 4.6.1 et notre nouvelle application Angular2 :

Scripts MVC 4.6.1 vs Scripts MVC5 Angular2

On a vu l'utilisation du Modèle TT dans TypeScript. On voit qu'une partie de JQuery est encore là.

Conclusion sur Angular2 MVC5

On vient de voir à peu prêt tout ce qui caractérise une application ASP.NET MVC Angular2, c'est une somme considérable que l'on maintenant appréhender point par point.

Have fun!

Microsoft Visual Studio Community 2015 - Angular 2 - MVC 5

A priori, on peut faire du ASP.NET MVC 5 Angular 2 avec Visual Studio Community 2015 ... ? Vous n'êtes pas convaincu ? Alors suivez-moi. Il faut un peu de patience mais on y arrive.

ASP.NET MVC 5 Angular2

Voici la version de mon Visual Studio 2015 Community :

A propos de Microsoft Visual Studio

En cherchant dans les Templates en ligne, je trouve le template Angular2 Mvc5 sample application à installer :

Templates En ligne - Angular 2 MVC 5 sample application

En cliquant sur Informations vous trouvez : Sample Angular 2 RC1 and Mvc 5 application

On clique sur Ok, une Boite de dialogue apparaît :

Installer Angular Mvc5 sample application

En cliquant sur Installer, voici le projet que je retrouve dans mon Visual Studio :

Projet Visual Studio 2015 Community Angular 2 MVC 5

La fenêtre de sortie JS :



Java Scripts

Certains Java Scripts se sont pas enregistrés ? ... angular2 n'est pas enregistré ...

Structure du projet Angular2Mvc5Application1.csproj

Alors qu'est ce qu'il y a dans ce projet ? Comment va t-on le décortiquer que va t-on y trouver ? C'est incroyable toutes ces version d'ASP.NET MVC ça va tellement vite que l'on dirait qu'il faut attendre. A peine on commençait à travailler avec JQuery que c'est Angular JS qu'il aurait fallu installer, à peine on faisait du MVC 2 que 5 était sur le marché.

Et là encore, on est en train de se plonger dans ASP.NET MVC 5 - Angular2 - sous Visual Studo 2015 Community alors que l'on parle déjà de VS 2017 et ASP.NET Core ...

Références du projet

Qu'est ce qu'il y a dans les références de mon projet ? C'est toujours instructif de voir la part des DLL qui sont dans le Framework.NET et la part des DLL qui sont les packages.

Références du projet

Et la suite :

Références du projet -  Suite

En pointant sur Microsoft.AspNet.Identity.Core je peux voir que cette DLL est installée comme un package :

 ...\Angular2Mvc5Application1\packages\Microsoft.AspNet.Identity.Core.2.2.1\lib\net45\Microsoft.AspNet.Identity.Core.dll

Tandis que System.Security fais parti du Framework 4.5

C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.Security.dll

Les NuGets Packages du projet

En regardant dans le répertoire Packages, on trouve ceci :

ASP.NET MVC 5 - Angular2 - Packages

C'est impressionnant non ? Et franchement vous savez quoi ? Ça m'étonnerait que cela fonctionne tel quel. D'ailleurs je lance un petit coup de Build et ça crash en effet :

Génération du projet ça crash !

Il semble qu'Angular2 ne soit pas correctement installé ou même qu'un certain nombre de choses ne soient pas installées correctement ... Bref encore tout un patacaisse.

J'ai la curiosité d'ouvrir le fichier readme.md à l'intérieur des infos sur l'installation, essayons de corriger ce projet.

Correction de l'installation

Ce n'est pas gagné ! Des choses sont nouvelles Angular2 comment cela s'installe t-il ? Pourquoi cela n'a pas été fait avec l'installe du Template ?

Pour tenter de corriger cette erreur d'installation, je reviens sur la fenêtre de Sortie : Bower/npm où il m'a bien semblé voir des messages un peu curieux :

Bower/npm install angular not found !

Stack Overflow What is the difference between bower and npm ?

Ça n'est pas prêt de fonctionner tout ça, npm c'est le Nuget Package Management et Bower connais pas encore ! Je connaissais Jack Bower mais ça, c'était avant.

J'adore le message : You should bug the author to publish it 

Bien sûr ! C'est moi qui vais essayer de contacter l'auteur pour lui reporter ce bug, je n'ai que ça à faire.

Dans la suite du rapport, on peut lire :

npm ERR! 404 'angular/platform-browser' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 It was specified as a dependency of 'aspnet'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.
npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\\\node\\node" "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! cwd D:\Mabyre\Visual Studio\Samples\ASP.NET MVC5\Angular2Mvc5Application2\Angular2Mvc5Application2
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.9
npm ERR! code E404

Allons je vais voir ce qu'il y a dans mon système à l'endroit suivant :
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node :

Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node\ node.exe

En vérité, il n'y a pas grand chose ...

Certains trucs ne sont pas installés au niveau de Node.js ... Curieux, moi je pensais que Angular remplaçait JQuery et qu'on avait pas besoin de Node, c'est un vrai fatras.

Visual Studio 2015 et Angular2 MVC

Il semble bien que ce Template ne puisse pas fonctionner sur la plateforme actuelle, il faut sans doute faire un update pour installer ce qu'il faut au niveau d'Angular ou Node.js ou les deux. J'ai fais une tentative pour double-cliquer sur l'exe : node.exe, c'est une console :

Console node.exe

Allez lire un peu de stackoverflow : C'est quoi la différence entre Bower et npm ? Et vous comprendrez qu'une fois de plus ces histoires de dépendances foutent le wilde ! C'est un scandale, au lieu de facilité la vie du dev les nugets  sont ingérables.

Not fun at all !

Dans le fichier readme.md, je lis :

Synchronize Node.JS Install Version with Visual Studio 2015

Il me faut donc installer Node.JS, il s'installe dans :
C:\Program Files\nodejs\

Installeur de NodeJS pour Windows

Puis on me dit de Synchroniser Node.JS et Visual Studio 2015

Ok ok, ras le bol ! En plus c'est à la création que tout se passe donc je supprime tout avant de récréé le projet mais rien n'y fait.

Visual Studio Community 2015 - Angular 2 - MVC 5 - La solution est proche

Je m'acharne encore un peu. Dans Node.JS : C:\Program Files\nodejs

Je vois une commande "npm" en cherchant : 'angular' is not in the npm registry

Stackoverflow me dit : angular' is not in the npm registry d'exécuter la commande >npm install dans le répertoire de mon .csproj. Alors que c'est la réponse la moins "côtée" de la page c'est pourtant ce que je vais faire. Je vois dans le path le bon chemin, je me dis que je dois pouvoir exécuter la commande :

>npm install 

Depuis une console dans le répertoire de mon projet .csproj ...

Il va alors se passer un tout un tas de trucs :

>npm install dans le répertoire de mon projet

Je n'avais jamais vu une telle procédure d'installe depuis un moment, je ne sais pas ce que j'ai installé avec Node.JS, on dirait une sorte de cache ... il semble que se soit npm !

npm est le gestionnaire de paquets officiel de Node.JS ...

on vit les modules angular ... s'installer où ? dans le cache ...

Puis cela fini par se terminer ...

Ajouter une légende

Un petit coup de Build :

Génération réussi 1

Et voici le résultat, l'application TodoList Sample Application s'exécute :

Angular2Mvc5Application Template

L'application TodoList à base d'un Template Visual Studio 2015 MVC 5 et Angular 2 fonctionne enfin. Au passage on a vu comment installer Node.JS et Angular2.

L'aspect des "cases à cocher" est tout à fait surprenant, plutôt joli, ce comportement c'est probablement de l'Angular2.

Have Fun !

ASP.NET Framework 4.5, 4.5.1, 4.5.2, 4.6, 4.6.1 - l'enfer du DotNET

Vous comprenez toutes ces versions du .NET Framework ? Moi pas encore. Alors essayons de découvrir ce qu'il se cache derrière tout ça.

https://msdn.microsoft.com/fr-fr/library/w0x726c2(v=vs.110).aspx
.NET Framework 4.6 et 4.5

http://getdotnet.azurewebsites.net/target-dotnet-platforms.html
A lire absolument, les versions du DotNET sont associées et expliquées avec celles de Visual Studio.

Problème et symptômes

Depuis peu j'ai des soucis avec mon Visual Studio 2013 et la mise à jour Service Pack 4. Je désinstalle les mises à jour, le SP4. Je réinstalle mon Visual Studio 2013 à partir du DVD d'installe.

Et boom !

ASP.NET 4.5 n'est pas enregistré sur le serveur Web.

Je tente un coups de :
C:\Windows\Microsoft.NET\Framework\v4.0.30319>aspnet_regiis -i puis avec l'option -ir.

Rien n'y fait ! Entre temps, je pense que les mise à jours de Windows avaient installées le Framework 4.6.1 et que mon Visual Studio 2013 n'est pas compatible avec cette version sans le SP4 !

Bienvenu dans l'enfer du DotNET !

Recherche d'une solution

Je regarde dans les programme installé, j'ai le Framework 4.5.2 :

Les différentes version du framework .NET, c'est lenfer !

Ah bon le 4.5.2 ? Moi je croyais que j'étais resté au 4.5... bref ça ne marche pas !

Sur cette machine, il y a aussi le 4.6.1 d'installé :

Framework 4.6.1

Je ne me dégonfle pas, je vire tout ça !

Par curiosité, je regarde dans le répertoire C:\Windows\Microsoft.NET\Framework\v4.0.30319,

Voici ce que j'y vois :

Framework 4.0.30319

Après ces désinstallations successives, je pensais que j'allais retrouver un FrameWork 4.5 ou 4.5.1 mais quand je vois le tête du répertoire 4.0.30319, une chose est sûr, ça va beaucoup moins bien marché maintenant ;-)

Pendant ce temps, évidemment, mon processus de mise à jour Windows Update est dans les choux complet depuis quelques heures...

Je pars chercher une solution et je reviens ...

Un peu de littérature :
https://blogs.msdn.microsoft.com/dotnet/2015/12/09/support-ending-for-the-net-framework-4-4-5-and-4-5-1/

Ça déprime un peu ! Ça pique même un peu également. Je crois que je vais choisir un des liens d'installation du 4.5.2 qui m'à l'air d'être supporté... par Windows et par Visual Studio à la fois.

https://www.microsoft.com/fr-FR/download/confirmation.aspx?id=42642
Installation de Microsoft.NET Framework 4.5.2

Bienvenu dans l'enfer du DotNET !

Allez une petite dernière pour la fin :

Mise à jour cliquez sur Oui

Voilà, malgré tout, ça fonctionne quand même, c'est du bidouillage le problème c'est que l'on a rien appris sur les différents frameworks et les différentes versions et que comme professionnel, je n'ai pas de temps à perdre avec tout ça !

Have fun!

ASP.NET MVC 4 Razor Html.Helpers functions samples

Vous cherchez des exemples d'utilisation des méthodes helpers, vous êtes comme moi. Je pratique ASP.NET MVC depuis des mois, je suis capable de développer de nouvelles fonctionnalités d'installer de déployer un site. Et puis je me rends compte qu'en fait je ne maîtrise même pas totalement une vulgaire liste de boutons radios.

Je suis stupéfait du peu d'exemples que l'on trouve sur Internet, je vais essayer ici, d'y remédier en vous donnant le mien. J'ai mis tu temps à trouver la page suivante dans MSDN :

Rendering a Form in ASP.NET MVC Using HTML Helpers

https://msdn.microsoft.com/en-us/library/dd410596(v=vs.100).aspx
Exemples, un peu intéressant d'utilisation des fonctions Html.Helpers même si ce n'est pas du Razor...

Les autres pages n'ont vraiment aucun intérêt ! Et pourtant, lorsque l'on cherche sur Internet, on retombe toujours dessus ! Par exemple la page :

https://msdn.microsoft.com/en-us/library/system.web.mvc.html.inputextensions.radiobutton(v=vs.100).aspx
ne vous apprendra aucunement à utiliser la fonction @Html.RadioButton. Elle n'a aucun intérêt. C'est assez incroyable !

Même le site de StackOverFlow est relativement muet :

http://stackoverflow.com/questions/14313475/how-to-add-a-htmlattributes-in-this-htmlhelper
Un exemple, pas très intéressant ...

http://stackoverflow.com/questions/23382612/set-a-radiobuttonfor-checked-by-default-within-a-foreach-loop
Là c'est intéressant, la remarque de "martennis" est la bonne : Si l'attribut "checked" est présent, peu importe ce qu'il y  dedans ! Le bouton sera coché ! Et comme c'est une radiolist, ce sera le dernier qui sera coché ! Incroyable à croire que cela n'intéresse personne ... ASP.NET MVC est mort et on ne m'a pas prévenu ???

ToBeContinued ...

Concernant la gestion des RadioButton, il y a plein de problèmes mais voici le début d'une solution :

J'ai donc passé un bon moment à triturer ces exemples, à essayer un tas choses qui n'ont pas fonctionnées, pour finalement trouver le début d'une solution.

RadioButton Html Helper Solution

Controller

        public ActionResult PageItems() 

        {

            var items = new List<SelectListItem>

            {

                new SelectListItem { Value = "1", Text = "Blue", Disabled = false },

                new SelectListItem { Value = "2", Text = "Red" },

                new SelectListItem { Value = "3", Text = "Green", Selected = true },

                new SelectListItem { Value = "4", Text = "Yellow", Selected = true },

                new SelectListItem { Value = "5", Text = "Black" }

            };

            return View( items  );

        }

View

@model List<SelectListItem>

<table style="margin:30px;">

@foreach ( var item in Model )

{

<tr>

<td>

@Html.RadioButtonFor( m => item.Text, "name_value" , item.Selected == true ? (object)new { @checked = "checked" } : new { } ) @item.Text

</td>

</tr>

}    

</table>

Voilà donc comment on utilise correctement la paramètre "Object htmlAttributes" pour sélectionner automatiquement le SelectListItem d'une list de Radiobox au démarrage de la page.

Voici le résultat de l'exécution

Enfin un RadioButton issue d'un @Html.Helper avec le bon item "selected"

L'élément "Yellow" de la RadioButton liste est sélectionné à l'init ! Enfin ! Razor c'est la lutte.