jeudi 31 décembre 2015

Un site web ASP.NET MVC 5 de A à Z - Initiation au versionning avec Git (partie 2)

Dans notre article précédent, nous avions vu comment utiliser Git dans notre projet avec Visual Studio. Cette fois-ci nous allons voir comment mettre en place une STRATEGIE DE BRANCHES : il s'agit en réalité de mettre en place un vrai processus de gestion de branches qui s'inscrit dans une optique DevOps.


Pourquoi mettre en place une stratégie de branches ?

Pour répondre à cette questions, voici d'autres questions qui font office de réponse :

  • Comment travailler à plusieurs sur le projet sans collision ?
  • Comment je sais quelle version de mon application est en production ?
  • Comment je vois l'historique de mon application ?
  • Comment je reviens à une version précédente (rollBack) ?
  • comment je fais si j'ai un bug en Production ?
  • Comment je fais pour livrer une évolution sans embarquer celle de mon collègue ?
  • Comment je récupère les évolutions de mon collègue X sans celle de mon collègue Y ?
  • Comment je travaille proprement avec des collègues qui travaillent sur le même projet depuis un autre site ou autre pays ?


Stratégie de branches avec Git

Il existe une multitude de stratégie de branches existantes et ayant fait leur preuve. Il faut cependant admettre que chaque projet à ses spécificités et il convient d'adapter sa stratégie pour faciliter au mieux le travail des développeurs/ops/testeurs.
L'exemple ci-dessous est celui que j'utilise le plus souvent :





source : http://nvie.com/posts/a-successful-git-branching-model

L'idée de ce système de branching est de "tirer" une branche pour chaque feature (fonctionnalité à développer). En plus, des branches plus "stables" doivent exister pour gérer le cycle de vie de l'application :

  • la branche master : elle sert de versionning pure des versions livrées en prod. A chaque déploiement en production, un merge doit être fait sur cette branche depuis la branche "release" ainsi qu'une apposition de tag Git qui sert d’étiquetage de la version.
  • la branche release : c'est la branche source de livraison. Une fois les devs des features terminés, on merges toutes les features branches vers la branche develop. De la branche develop, on merge vers la branche 'release' pour une MEP à venir.
  • la branche hotfixes : comme son nom l'indique, elle sert à patcher en production. Ainsi lorsqu'un bug critique/majeur apparaît en production et que l'on souhaite le corriger sans impacter les dev en cours, on utilise cette branche. un merge est alors effectué depuis la branche.
  • la branche develop : cette branche sert de merge des branches de features développé. c'est en quelque sorte la branche mère des devs en cours. Une fois les devs des features terminés, les branches de feature sont mergées vers la branche 'develop'. Une fois les 'merges' effectués, c'est de cette branche qu'on mergera vers la branche 'release'.
  • les branches de  feature : Git propose une grande souplesse en terme de branching. Ainsi, pour chaque User Storie que vous vous attribuez en début de sprint, vous pouvez tirer une branche à partir de 'develop'. Cette branche servira de développement de votre US, que vous pourrez remerger vers 'develop' une fois le développement terminé. Il arrive souvent qu'un développeur ait besoin de partager son dev avec un autre : dans ce cas, il peut merge sa branche vers 'develop' s'il estime que son développement est assez abouti et l'autre développeur pourra récuperer les modifications merger. Avec Git, un merge pourra être fait également d'une branche de 'feature' d'un développeur vers une autre branche de 'feature'.

Dans tous les cas, vous l'aurez certainement deviné, l'aspect collaboratif reste primordial. Il convient de communiquer le plus possible avec vos collègues afin de faciliter les 'merge' et la gestion de vos branches.

lundi 30 novembre 2015

Un site web ASP.NET MVC 5 de A à Z - Initiation au versionning avec Git (partie 1)

Lors du précédent article, nous avions initié notre projet ASP.NET MVC 5. Au passage nous avions également choisi comme controleur de code source GIT. Dans le cas de cette série d'articles j'utiliserai la plateforme Github pour versionner mon code source.

Pourquoi un contrôleur de code source dès le début du projet ?

Le contrôleur de code source est essentiel pour gérer notre projet web quelque soit sa taille. Tout d'abord, un projet ne se fige très rarement : il y a toujours un moment ou on fait le évoluer : par exemple, on décide de rajouter une nouvelle page web, changer le style, faire des évolutions plus approfondies comme par exemple rajouter/modifier/supprimer une partie du code métier (une nouvelle règle imposée par notre client). Un projet informatique (web dans notre cas) vie : il faut qu'à tout moment on sache on est et d'où on vient. Notre contrôleur de code source va donc archiver pour nous notre code et surtout garder une trace de toutes les actions que l'on effectue dessus.
Mieux encore, imaginons qu'un nouveau développeur arrive sur le projet : on va potentiellement travailler sur le même bout de code : comment savoir donc ce qu'il aurait effectué comme changement lors de mon absence ? Imaginons qu'après avoir livrer en Production (environnement final utilisé par les utilisateurs cibles), on se rend compte qu'il y a un bug grave sur une page ou une régression (une fonctionnalité qui marchait jusque là) : que fait-on ? on devrait donc pouvoir revenir une version plus récente (RollBack).
Vous l'aurez compris, il vaut avoir dès le départ de notre projet au minimum un contrôleur de code source afin de tracer toutes les actions effectuer sur notre code.

Quel contrôleur de code source pour votre projet ?

Il existe une multitude de contrôleur de code source : Git, Source Safe, TFS, SVN, ...
TFS (Team Foundation Server) fait office de contrôleur de code source mais peut également utiliser Git comme contrôleur, car TFS est une plateforme plus large proposant d'autres services tels que la gestion de build continue, gestion de projet via des tableaux de bord (Scrum, Kanban), etc.
Si vous travaillez sous les technos Microsoft et que vous disposez des licences TFS, c'est la solution par excellence. Vous pourrez choisir Git comme contrôleur de code source (même avec TFS).
Git est de plus en plus répandu du fait de sa puissante : il est simple d'utilisation (de prime abord), et rapide, il dispose d'un gestionnaire de code via ligne de commande et est disponible sur toutes les plateforme (Windows, Linux, Mac). Git est également gratuit : ce qui en fait un avantage non négligeable.


Git dans notre projet
Lorsque l'on regarde dans notre répertoire de solution on retrouve un dossier caché '.git' qui nous indique la prise en en charge par le controleur de code source.


lorsqu'on ouvre la solution dans Visual Studio, nous pouvons accéder à notre gestionnaire de code source via l'onglet "Team Explorer", et cliquer sur la "prise électrique verte" pour se "plugger" à une git par exemple.




Dans mon cas présent, je vais me connecter à "Github". Il vous faudra au préalable vous créer un compte gratuitement sur Github.com.





On constate ici sous le volet 'Référentiels Git locaux' que notre solution est mapper en local (nous y reviendrons plus tard), en double cliquant sur notre solution mappé, une nouvelle fenetre s'affiche nous permettant de "pousser" notre code vers le serveur Git.



Cependant, n'ayant pas encore créer de "Repository distant" (en gros, c'est la référence de notre arborescence sur le serveur Git), il va nous falloir le créer : on peut le faire depuis le site de Github directement :


Une fois le "Repository" crée, on peut récupérer son Url et la saisir sous Visual Studio afin d'effectuer le mapping.


Une la connexion établie avec le serveur Git, nous allons pousser notre code sur le serveur. Pour cela, nous retournons dans notre explorateur de solution, puis nous "validons" dans un premier temps la connexion de notre solution. Une nouvelle fenêtre nous demandera d'effectuer un "push" (valider la première fois) et/où "sync" : le sync récupère également les éventuelles modifications effectuer sur le serveur par un autre utilisateur par exemple, ou depuis un autre Pc.


une fois que vous lancer la synchronisation, votre code sera publier sur votre "Repository distant". Votre première action est donc historisée et apparaît dans votre éditeur.


Dans cette première partie, nous avons juste vu comment se connecter à un "Repo distant". Cependant, nous n'avons pas encore définit de stratégie de "branching" : en Effet, comment fait-on si on travailler à plusieurs et sur des évolutions différentes ? Comment fait-on un "hotfix" en Prod ?
Nous verrons cela dans mon prochain article.

PS : Une petite vidéo intéressante sur Git :
https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Getting-Started-with-Git
Un lien intéressant su Git :
http://pcottle.github.io/learnGitBranching/

samedi 3 octobre 2015

Encodage en BASE64 des images avec Web Essentials 2013


Les ressources chargées pour une page web sont parfois nombreuses (images, javascipt, css,etc) et peuvent pénaliser le serveur. : il est globalement conseillé de réduire la quantité de requêtes http pour une page web dans un but d'optimisation globale de votre application web.

Pour les images, il existe une multitude de techniques pour les optimiser : les Sprites, réduction de la tailles des images, et l'encodage en BASE64 des images. C'est du dernier point que je vais vous parler :

l'Encodage en BASE64 d'images
Il s'agit simplement de transformer (encoder) son image sous forme de texte qu'on utilisera directement dans nos css par exemple : du coup, on économise une requête de chargement d'image, cette dernière étant directement encoder dans le fichier css (où dans le "src" d'une balise "image").

l'Encodage BASE64 d'images dans Visual Studio 2013 avec Web Essentials 2013
L'extension Web Essentials 2013 propose les 3 optimisations d'images que j'ai cité plus haut. Voyons comment cela se présente pour l'encodage BASE64 :

Imaginons une classe css dans un projet Web dotnet (dans Visual Studio), qui permet d'afficher une image via une propriété "background". Avec l'extension Web Essentials installée, vous verrez apparaître dans la popUp de notification sur la ligne de votre propriété css 'background' le message :
Performance : the image is only 22(le poids de notre image) bytes and should be embedded as a base64 dataURI to reduce the number of http request.




Tout est dit dans ce message : le point important reste que cette option vous est proposée car votre image a un poids léger. Vous l'aurez, compris l'encodage en base64 n'est pas forcément adapté dans toutes les situations. D'ailleurs, ce type d'encodage entraîne en générale une augmentation du poids de l'image au moment du rendu.

Au passage, Web Essentials vous propose une optimisation de l'image en réduisant son poids (cf image ci-dessous).




Une fois l'option "Embed as base64 dataUri" sélectionnée, votre ligne css sera remplacée automatiquement par l'uri encodée.



Pour information
- L'encodage en base64 n'est pas supporté par les version IE antérieure à la 8.
- Cette technique d'encodage n'est pas seulement utilisée pour les images, mais peut servir pour d'autres types de ressource.
- il existe des encodeurs base64 en ligne


mercredi 30 septembre 2015

Un site web ASP.NET MVC 5 de A à Z - kick off avec Visual Studio

Hello à tous.
J'étais un peu absent sur mon blog ces derniers pour des raisons persos, but i'm back now :). Sans trop tarder nous allons nous plonger dans notre projet de faire un site web en ASP .NET MVC 5 et nous jeter à l'eau notamment avec l’initialisation du projet sous Visual Studio. A l'heure où j'écris cet article, on est à la version 2015, mais la version 2013 ferait aussi l'affaire. A noté également qu'avec Visual Studio 2015 nous avons la possibilité de créer un projet ASP.NET MVC 6 (VNext ou ASP .NET 5), version qui est bien avancée mais pas encore en release.

Page d'installation : https://www.visualstudio.com/ 

Pourquoi Visual Studio ?
Visual Studio est l'IDE par excellence pour faire du .NET. De plus, il faut reconnaitre que c'est l'un des meilleurs IDE (le meilleur pour moi) au monde et qu'il donne une aisance absolu en terme de développement : debugage, coloration syntaxique, outils de test, gestion de code source, etc

On démarre 
Une fois notre IDE favoris installé et lancé, on va en haut à gauche de notre IDE sur :
File => new => Project


On choisit ici à gauche dans la section des templates Visual C#, et on sélectionne "ASP.NET Web Application". Dans le bas de cette popUp, nous allons renseigner le nom de notre projet et solution : il faudra veiller à bien les nommer (le plus explicite possible) car cela facilitera la maintenance du code plus tard.


Ici, je vais considéré que Monsieur X (le commanditaire du site) a pour projet de nommer son site de vente en ligne "BuyMore". N'ayant pas plus d'infos pour l'instant, je vais nommer ma solution "ByMore", et suffixer tous les projets de ma solution ainsi. Au passage je coche les cases "Create directory for solution" (nous verrons ce que ça engendre au niveau des dossiers physique), et "Add to source control" afin de mettre en place une politique de gestion de code source dès le début du projet car il es important de pouvoir gérer son code source (faire des retours arrières par exemple).

Dans l'écran suivant nous allons sélectionner le template "MVC" et cocher la case "Add unit tests" afin d'instancier également un projet de tests unitaires dès le départ car il est également très important d'avoir des tests unitaires (automatisés si possible) pour notre projet et nous allons voir pourquoi plus tard.


Une fois que vous cliquez sur "OK", l'IDE vous crée l'arborescence de la solution physiquement.
Ayant au préalable cocher la case d'ajout au contrôle de code source, une popUp nous demande quel contrôleur de code source choisir :


Dans notre cas, nous allons utiliser "Git" (il est gratuit, contrairement à TFS). Une fois validé, notre solution apparaît enfin avec à l'intérieur notre projet "WebSite" et le projet de test associé :


Le petit signe + devant les objets de notre solutions indique l'ajout au contrôleur de code source (Git). Au niveau de notre répertoire physique, nous retrouvons également pour chaque projet un dossier conteneur associé, avec à la racine le fichier de solution (avec l'extension .sln) et des fichiers et dossiers de contrôle de code source Git.


On peut également constaté la présence d'un dossier "Packages" qui contient toutes les librairies annexes en prérequis pour un site web ASP.NET MVC 5, et qui contiendra les packages dont nous aurons besoin par la suite (les packages Nugget).

En exécutant (touche F5) notre projet Web, nous constatons que nous avons déjà un site fonctionnel avec plusieurs pages par défaut.



Conclusion
Avec Visual Studio, en moins de 5mn, nous avons initier un projet ASP.NET MVC 5 déjà opérationnel grâce au template MVC disponible. Nous avons également pu initié la prise en charge par un contrôle de code source (Git) que nous étudierons en détails dans les articles à venir, et nous avons intégré également un projet de tests unitaires. Nous verrons un peu plus en détails les éléments abordés ici dans mon prochain article. 






jeudi 20 août 2015

Intégrer des css dans le Head depuis les Views MVC

En règle générale (et pour respecter les "standards" du web), les styles css se placent dans la balise "Head" de nos pages Html. En ASP.NET MVC, on les retrouve communément dans la "_layout" de notre site (celles-ci sont donc partagées par toutes les pages du site utilisant la "_Layout"). Cependant, il peut arriver qu'on veuille rajouter des styles spécifiques uniquement sur certaines pages (dans des Views spécifiques pour un site en aps.net mvc). Afin d'éviter de se retrouver avec des styles définis un peu partout dans le corps (body) de nos pages, nous allons définir une section spécifique aux css qui permettra de toujours 'injecter' nos styles dans le 'head' de nos pages.

Dans notre balise Head :
Nous allons mettre la condition suivante : si notre section spécifique aux css nommée "HeaderCss" est définie (via le mot clé IsSectionDefined), alors on l'inclut (via le RenderSection) :


@* css communes à toutes les pages *@
   @Styles.Render("~/Content/css")

@* zone de css spécifiques *@
   @if (IsSectionDefined("HeaderCss"))
   {
        @RenderSection("HeaderCss", required: false)
   }

Dans nos Views :

Dans les "Views" où nous souhaitons intégrés des css spécifiques, il suffira de "rendre" ces dernières via le nom que l'on a attribué à la section spécifique (HeaderCss):


@section HeaderCss{
   @Styles.Render("~/Content/themes/base/css")
   <link href="/css/supercss.css" rel="stylesheet" type="text/css" />
    <style>
        .headerboard {
            margin-left: 150px;
            padding-top: 5px;
            text-transform: uppercase;
        }
  </style>
}

Les styles spécifiques seront inclus uniquement dans nos pages spécifiques (là où nous aurons rajouté notre section css), mais elles serons définies dans le "head" de nos pages HTML : on aura une meilleure organisation de notre code html (avec des styles définis au même endroit) et on respectera au passage les normes W3C.

mercredi 15 juillet 2015

Organiser son code dans Visual Studio

Comment organisez-vous vos dossiers de solution dans Visual Studio ? Mettez-vous en place une organisation logique et physique de vos projets VS ? cet article vous donnera peut-être des idées :




mardi 30 juin 2015

La bonne ambiance au sein d'une équipe : moteur de productivité

J'avais envie de partager avec vous un point qui me tient à cœur personnellement : l'ambiance au travail. Je vous parle de l'ambiance au travail en général et plus particulièrement au sein d'une équipe. pour ce post, je vais prendre pour exemple je prendrai le cas d'un équipe technique c'est à dire une équipe composée de développeurs avec potentiellement un architecte technique, un tech lead, un PO, un chef de projet, etc.


La bonne ambiance est moteur de productivité

Je pense sincèrement que la bonne ambiance au sein d'une équipe sert de moteur de productivité et cela se passe inconsciemment. Voici mon raisonnement :
Globalement, quand on est dans une "team" avec une bonne ambiance, le dialogue devient spontané : aucune censure ne se fait, et du coup chacun peut s'exprimer librement, même avec un ton moqueur ou ironique, avec toujours à l'esprit d'exposer sa problématique, de poser une question ouverte sur un choix de direction technique à prendre, de demander de l'aide, de remettre en question des choix, bref tout ce qui me semble être nécessaire au bon déroulement d'un projet informatique (ou autre).

Cultivateur de bonne ambiance

Je me définis moi même comme cultivateur de bonne ambiance ;).
Chaque consultant (travailleur de façon générale, quelque soit sa position dans l'entreprise) devrait avoir en tête le matin en arrivant au travail de "spreader" une ambiance favorisant les échanges. Pourquoi ? simplement parce que l'inverse est juste horrible :
Nous passons une grande partie de notre vie au travail, une bonne ambiance est juste une partie de notre bonheur personnelle.
En tant que consultant, vous pouvez intervenir chez vos clients de façon marginale : vous venez, vous faites votre Job et vous partez. J'ai déjà vu ce genre de consultant, et je trouve cela dommage. Il ne s'agit pas de faire copain-copain avec tous les membres de vos collègues en mission; pour moi, il faut juste penser à laisser une vrai trace de son passage en mission tant professionnellement qu'humainement.


Actions concrètes sur le terrain

Voici quelques éléments qu'on peut mettre en pratique, ou au pire essayer :
Dire bonjour à ses collègues : attention, je parle de "dire vraiment bonjour", pas le truc à la vite fait façon "je te salue malgré moi". C'est mon avis perso, car certains pensent que c'est pas nécessaire, mais je vous assure que j'ai déjà vu des teams où certains ne disaient pas 'bonjour' et cela entraîne des rumeurs, une mauvaise ambiance générale,etc
Discuter de tout et de rien : ça aide à détendre l'atmosphère globalement, du moment qu'on le fait avec parcimonie. Il ne s'agit de le faire tout le temps, mais cela permet par exemple sur des équipes jeunes, qui ne se connaissent pas bien de casser des barrières. Un autre exemple avec vos managers, chefs de projet, PO, où souvent a communication est 'strict'.
Rire et faire rire : ça peut paraître bête mais l'inverse est juste horrible : imaginez quand vous traverser un openspace, et que les gens sont en mode solo, regard inquisiteur sur les passants, mines serrées, focus sur leur écran style ils bossent plus que tout le monde : c'est hyper pesant et stressant comme ambiance.


Les freins à la bonne ambiance

J'ai préféré ne pas parler des freins à la bonne ambiance, car c'est un sujet vaste et souvent polémique : je pense entre autre aux 'supers autonomes' qui ne communiquent pas trop avec les autres, les 'perturbateurs' qui pour des raisons personnelles ne favorisent pas la communication, etc. Il existe plusieurs solutions pour les gérer : en générale on favorisera la communication.


Conclusion

L'idée de ce poste est de rappeler que le plus important au sein d'une équipe reste le facteur humain. Une bonne ambiance ne fera que favoriser tout le reste, surtout votre mission. En outre, c'est en général ce qui reste après votre mission chez un client, où quand vous changer d'entreprise : on se dit souvent : "c'était top cette mission, on formait une vrai équipe, on rigolait bien et en plus on était efficace au travail".
On parle souvent de communication comme étant la base de tout au travail, et il s'agit bien de communication dont je parle ici, mais pour ma part ce n'est pas là le plus important : ce qui compte c'est justement l'était d'esprit des collaborateurs de votre équipe, votre service, voir même de toute votre entreprise qui fera la différence : si l'était d'esprit est tournée vers la bonne ambiance 'humainement', cela favorisera la communication. Je pense entre autre au fait de faire preuve d'empathie.
J'aimerai avoir votre avis sur le sujet : qu'en pensez-vous ? êtes-vous d'accord avec mes propos ? avez-vous des retours d'expérience différents qui contredisent ces idées ?

mercredi 3 juin 2015

Intentional programming

Hey ! toi qui est développeur, programmes-tu par intention ? si ce n'est pas le cas, lit cet article, ça pourrait peut-être t'intéresser...



jeudi 7 mai 2015

Aperçu de Visual Studio Code

A l’occasion de cette Build 2015, Microsoft présente plein de nouveautés pour les développeurs. J’en ai donc profité pour tester la preview de “Visual Studio Code” (ou VSCode), une version light de “Visual Studio” orienté Web.

vendredi 10 avril 2015

Un site web ASP.NET MVC 5 de A à Z - Projet et cahier de charges

<== Article précédent : Comment faire un site asp.net MVC 5 de qualité

Chose promise lors de mon dernier article, je commence donc ma série d'articles consacrée au développement d'une application web ASP.NET MVC 5 de qualité (je sais c'est prétentieux :) mais vous allez voir ça va être sympa !).


Le projet

Etant donnée que je n'ai pas de sujet en particulier, j'ai donc penser à faire quelque chose de classique. Au fur et à mesure de mon avancement j'enrichirai le projet avec des idées nouvelles selon mon humeur, ou si vous m'en proposez (et oui, je suis joueur).

Le cahier des charges

Voici mon idée : je vais imaginer Monsieur X comme étant le commanditaire de ce projet.
Monsieur X vient me voir et me dit : je veux monter une affaire (un business quoi !) et j'aimerai pour cela une application Web qui proposera mes services. Je vais également faire du commerce et vendre des produits sur ce site. Je ne sais pas trop par quelle activité je vais commencer mais je suis sûr que je ferai les 2 (sous entendus offre de services et ventes de produits). Par contre j'aimerai tout gérer directement sur le site, c'est à dire ajouter, modifier et supprimer moi même les articles et services que je propose, ainsi que la gestion des commandes, etc. J'aimerai aussi avoir une page de statistique avec des graphes pour suivre l'évolution de mes activités.J'aimerai pouvoir également renseigner mes clients directement, suivre leurs commandes, etc

Monsieur X n'a pas beaucoup de temps car il démarre à peine ses activités et il est très pris. Par contre il serait très content si le développement de son application avançait rapidement. Aussi, il reste très disponible au téléphone, donc je peux l’appeler quand je veux.
J'explique à Monsieur X qu'il est vrai qu'on est en 2015 et qu'on a pas besoin d'un roman pour démarrer les développements mais que son expression de besoins reste assez incomplète. Je lui propose donc que l'on travaille en "Agile", afin qu'il puisse me faire des retours au fur et à mesure de l'avancement des développements. Je le contacterai donc très fréquemment (tous les jours), afin qu'il me donne des informations sur des éléments qui ne me sont pas clair pour avancer.
Attention, j'ai bien expliqué à Monsieur X que s'il ne se rendait pas disponible pour répondre à mes questions, moi j'arrêterai de travailler : bon je lui ai dis ça de façon diplomatique bien-sur, c'est quand même lui le client (lol)).

On attaque par quoi ?

Heu... je sais pas ? y'a une réponse type ? je ne crois pas. Moi je dirai qu'il faut commencer par bien comprendre le besoin, même si de nature le besoin est très changeant (surtout de nos jours). Cependant, avoir une compréhension globale du besoin est indispensable. C'est comme faire un fonction mathématiques sans domaine de définition...


Comment aborder le sujet ?

Moi pour bien comprendre, j'aime bien prendre le hauteur (ou du recul si vous préférez). Pour cela, j'utilise des schémas. 
Nous allons donc faire quelques diagrammes UML pour représenter e façon macro ce qu'il y a à faire concrètement.

A très vite !

Article suivant : Modélisation UML (à venir) ==>


mercredi 1 avril 2015

Comment faire un site web ASP.NET MVC 5 de qualité ?

Si vous voulez savoir la réponse à cette question, merci de laisser un commentaire sur ce billet. A partir de 5 réponses je démarrerai un série d'articles concernant la conception de A à Z d'un site Web exemple en ASP.NET MVC 5 avec Visual Studio 2013.

Voici ce qu'il y aura au menu (grosse maille ):
- de l'architecture
- de la modélisation Uml,
- de l'organisation de code
- de la qualité (sécurité, maintenabilité, évolutivité, robustesse)
- de la performance (rapidité)
- du responsive
- du javascript
- de la Poo
- du Sql server
- du Dapper
- du jquery, bootstrap, ajax...
- du test u
- le code partagé sur github
- etc...




Avec l'arrivé prochaine d'ASP.NET 5 alias vNext, il serait intéressant de revoir nos bases sur l'actuel version d'ASP.NET MVC. Aussi le retour de chacun ne serait que bénéfique afin de comparer nos différentes approches, de comprendre certains choix techniques et d'en tirer l'essence.
Alors ? qui est intéressé ? vous pouvez même proposer un sujet d'étude pour ce site d'exemple ! proposer de voir une implémentation de votre choix !
Et non ce n'est pas un poisson d'Avril :) ! plus de 10 articles prévus au programme.
J'attends vos retours pour démarrer !!!!!!!!!!!!!!!!!!!



vendredi 27 mars 2015

dimanche 1 mars 2015

Passer des données à une vue partielle via le ViewDataDictionary en ASP.NET MVC 4

Le ViewDataDictionary est un conteneur permettant de faire passer des données entre un "controller" et une "view".
Lorsqu'on observe les différentes signatures du Helper "Partial", on voit qu'on peut entre autre lui passé en paramètre un model, mais également un ViewDataDictionary et c'est ce qui nous intéresse ici :




Exemple d'utilisation
Voici un scénario simple d'utilisation que j'ai choisi pour illustrer l'utilisation du ViewDataDictionary :
  • J'ai un site web avec 3 pages accessibles via 3 onglets visibles sur les 3 pages.
  • Je souhaite mettre en surbrillance l'onglet courant sur laquelle je suis.
  • J'ai une vue pour chaque page, et dans chacune d'elle je référence ma vue partielle contenant mes onglets comme le montre la figure ci-dessous  :


L'idée est donc de passer à ma vue partielle un identifiant unique indiquant l'onglet courant afin que ma vue partiel mette en évidence l'onglet de ma page consulté. Nous allons donc utilisé le ViewDataDictionary pour le faire.

Dans notre vue correspondant à l'onglet 1, nous auront une ligne permettant l'injection de notre vue partielle avec en paramètre un "ViewData" simple (clé : onglet, valeur : 1) spécifiant le numéro de l'onglet courant en valeur :

   
@Html.Partial("_PartialMenuOnglet", new ViewDataDictionary {{ "onglet", "1"}})


Nous aurons donc a répéter simplement cette ligne dans chacune de nos vue avec le numéro de l'onglet correspondant voulu.

Dans notre vue partielle nous auront donc accès à notre ViewDataDictionary sur lequel nous pourrons vérifier la valeur de "l'onglet courant" et ainsi adapter nos onglets en conséquence :

@if (ViewData["onglet"] == "1")
{
     <input type="button" value="Onglet1" class="ongletActif" />
}
else
{
     <input type="button" value="Onglet1" class="ongletInactif" />
}
<br />
@if (ViewData["onglet"] == "2")
{
     <input type="button" value="Onglet2" class="ongletActif" />
}
else
{
     <input type="button" value="Onglet2" class="ongletInactif" />
}
<br />
@if (ViewData["onglet"] == "3")
{
     <input type="button" value="Onglet3" class="ongletActif" />
}
else
{
    <input type="button" value="Onglet3"  class="ongletInactif" />
}


Dans le code ci dessous, on applique une classe CSS adapté donnée (ongletActif) à l'onglet actif et une autre (ongletInactif) correspondant aux onglets inactifs.

Conclusion
L'exemple ci-dessous est assez simple et est juste à titre illustratif mais nous laisse présager une panoplie d'utilisations possibles du ViewDataDictionary en fonction des besoins, dans l'objectif de transmettre aisément des données au travers des vues MVC.

jeudi 26 février 2015

Datatables Jquery dans votre application ASP.NET MVC 5 - 2ème partie

2ème volet consacré au Datatables Jquery dans votre application ASP.NET MVC 5. Cette fois-ci nous allons voir comment communiquer avec le serveur afin d'alimenter dynamiquement notre Tableau.

jeudi 29 janvier 2015

Les Datatables Jquery dans votre application ASP.NET MVC 5

Le "Datatables Jquery"  est un plugin javascript gratuit permettant d'afficher vos données sous forme de tableau : chose récurrente demandée dans les projets informatiques. L'avantage de ce plugin est la richesse des fonctionnalités natives : tri, pagination, recherche sur les colonnes, chargement dynamique, etc