Les cinq articles de blog qui présentaient pas à pas comment créer une application CRUD avec WebMatrix, Razor et Entity Framework ont été regroupés en un seul tutoriel qui vient d’être publié sur Developpez.com.

J’ai eu à développer récemment une application CRUD avec WebMatrix. Utilisant principalement la classe DataBase de l’espace de nom Microsoft.Data pour la manipulation des données, lorsque j’ai aperçu Entity Framework dans les packages NuGet avec WebMatrix 2 bêta, je me suis dit « génial » ! Ça veut dire que je peux l’utiliser dans ma solution.

J’ai donc opté pour l’utilisation de la bibliothèque au sein de mon application WebMatrix. Entity Framework est en passe de devenir un standard pour la manipulation des données et est recommandé par Microsoft.

Contrairement à Visual Studio et ASP.NET ou l’on dispose de plusieurs outils rendant facile la conception d’une application CRUD avec Entity Framework, sur WebMatrix, c’est un peu compliqué et l’on ne dispose pas des fonctionnalités comme l’échafaudage, et encore moins des ressources sur Internet.

C’est pourquoi j’ai décidé de fournir au travers de cet article une démarche pas à pas avec autant de détails que possible pour la conception d’une application CRUD avec WebMatrix, Razor et Entity Framework.

Le lecteur, tout au long de ce tutoriel, pourra se familiariser avec WebMatrix, Razor, Entity Framework, le gestionnaire de packages open source .NET NuGet pour WebMatrix et le gestionnaire de base de données SQL Server Compact Edition.

Cet article est essentiellement destiné aux débutants. Aucun prérequis n’est donc nécessaire pour sa bonne compréhension. Il est néanmoins préférable d’avoir des connaissances de base en programmation orientée objet avec C# et d’être familiarisé avec WebMatrix et Razor. Si ce n’est pas le cas, je vous conseille de lire dans un premier temps mon tutoriel de présentation de WebMatrix, ainsi que mon tutoriel sur Razor.

– Consulter le tutoriel complet

– Télécharger la version PDF

– Télécharger la version hors-ligne

– Télécharger la version eBook

– Télécharger le code source de l’application d’exemple :

. Version RAR

. Version ZIP

– Pour les commentaires c’est par ici

Bonne lecture

– Part 1 : introduction et présentation des outils

– Part 2 : création de l’application et définition du modèle objet

– Part 3 : création du DBContex et du Repository

Dans les parties précédentes, nous nous sommes familiarisés avec outils utilisés, nous avons procédé à la création de l’application, à la définition du modèle objet qui sera utilisé ainsi qu’à la création du DBContex et du Repository.

Dans cette partie, nous allons nous plonger dans le vif du sujet en implémentant les interfaces Web pour la lecture, la modification, la suppression et l’enregistrement des données dans votre base de données.

Vous allez dans un premier temps créé un nouveau dossier Personne qui contiendra tous les fichiers pour la gestion des personnes.

1 – Implémentation de la grille des données

Dans le dossier Personne, ajoutez un nouveau fichier Index.cshtml.

Vous allez ensuite ajouter en début de ce fichier les lignes de code permettant de retourner la liste des personnes qui sont enregistrées dans la base de données. Cette liste sera par la suite affichée grâce au Helper Razor WebGrid, qui va être instancié en passant en paramètre la collection des données qui doivent être affichées et le nombre d’éléments sur une page.

var pr = new PersonneRepository();
var grid = new WebGrid(pr.GetAll(),rowsPerPage : 10);

Avant d’afficher la grille, vous allez procéder au formatage de celle-ci en définissant les colonnes qui seront affichées et en ajoutant notamment de nouvelles colonnes pour l’édition, la consultation et la suppression d’une ligne de la grille.

Le code pour effectuer cela est le suivant :

@grid.GetHtml(tableStyle:"grid",
  headerStyle:"head",
    alternatingRowStyle: "altrow",
         columns: grid.Columns(
          grid.Column("Nom","Nom"),
             grid.Column("Prenom", "Prénom"),
                grid.Column("", "", format: @<text><a href="Edit/@item.PersonneId")>Editer</a> 
                       | <a href="Details/@item.PersonneId")>Détails</a> 
                         | <a href="Delete/@item.PersonneId")>Supprimer</a></text>)                                                                                     
                )
        
        )

Le code complet de la page Index.cshtml est le suivant :

@{
    // Set the layout page and page title
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Register an Account";

    var pr = new PersonneRepository();
    var grid = new WebGrid(pr.GetAll(),rowsPerPage : 10);
                  
}    
<hgroup class="title">
    <h1>Personnes.</h1>
</hgroup>  

<p><a href="Create">Ajouter un nouvel enregistrement</a></p>
        
   @grid.GetHtml(tableStyle:"grid",
        headerStyle:"head",
        alternatingRowStyle: "altrow",
                columns: grid.Columns(
                    grid.Column("Nom","Nom"),
                      grid.Column("Prenom", "Prénom"),
                        grid.Column("", "", format: @<text><a href="Edit/@item.PersonneId")>Editer</a> 
                              | <a href="Details/@item.PersonneId")>Détails</a> 
                              | <a href="Delete/@item.PersonneId")>Supprimer</a></text>)                                                                                     
                )
        
        )

La ligne de code :

<p><a href="Create">Ajouter un nouvel enregistrement</a></p>

va permettre d’ajouter les nouvelles informations sur une personne dans la BD. À l’exécution, vous obtenez le résultat suivant :

le code CSS que j’ai utilisé pour le WebGrid et qui a été défini dans le fichier Site.css pour être appliqué à toutes les grilles de l’application est le suivant :

.grid { margin: 4px; border-collapse: collapse; width: 600px; }
 .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
 .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
 .altrow { background-color: #E8E8E8; color: #000; }

2 – Affichage détaillé

mpte tenu du fait que dans certains cas, il vous sera impossible de présenter toutes les informations sur une entité sur une ligne de la grille, un lien qui pointe sur une page  » Details  » a été introduit donc pour afficher des informations détaillées sur une personne.

Nous verrons ici comment implémenter l’interface Web de cette page. Pour cela, vous allez ajouter un nouveau fichier Edit.cshtml dans le dossier Personne.

Au début de ce fichier, vous allez déclarer une variable pour récupérer l’id qui est passé comme paramètre HTTP. La méthode Find() sera utilisée pour retourner l’élément dans la base de données dont l’identifiant est égal à celui qui est passé en paramètre.

Le code pour effectuer cela est le suivant :

int id = Request["id"].AsInt();
    var pr = new PersonneRepository();
    var personne = new Personne();
    personne = pr.Find(id);

Il ne vous reste plus qu’à afficher les informations contenues dans la variable personne dans votre code html.

Le code complet de la page Details.cshtml est le suivant :

@{
    // Set the layout page and page title
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Détails";
   
    int id = Request["id"].AsInt();
    var pr = new PersonneRepository();
    var personne = new Personne();
    personne = pr.Find(id);
                  
}    
<hgroup class="title">
    <h1>Détails.</h1>
</hgroup>  
 <fieldset>
        <legend></legend>
        <ol>
            <li class="nom">
                <label>Nom:</label>
                <label>@personne.Nom</label>
            </li>
            <li class="prenom">
                <label>Prénom:</label>
                <label>@personne.Prenom</label>
            </li>
        </ol> 
    </fieldset>

<p><a href="Edit?id=@id">Editer</a> |
 <a href="Index">Retour à la liste</a>
</p>

Ce qui permet d’obtenir le résultat suivant à l’exécution, après un clic sur le lien Détails d’une ligne de la grille contenant la liste des personnes :

3 – Enregistrement des données

Dans la page affichant la liste des personnes, vous avez ajouté un lien permettant d’accéder à la page d’ajout d’un nouvel enregistrement. Penchons-nous maintenant sur l’implémentation de cette page. Vous allez ajouter une nouvelle page dans le dossier Personne. Il suffit pour cela de faire un clic droit sur le dossier Personne, sélectionner  » New Files  » et créer un nouveau fichier  » create.cshtml  » dans la fenêtre qui va s’afficher.

Le code source du formulaire d’enregistrement d’une personne est le suivant :

<form method="post" action="">
    @* Notification en cas d'erreur de validation *@
    @Html.ValidationSummary("Veuillez corriger les erreurs suivantes:")

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li class="nom">
                <label for="nom" @if(!ModelState.IsValidField("nom")){<text>class="error-label"</text>}>Nom:</label>
                <input type="text" id="nom" name="nom" title="Nom" value="@nom" @Validation.GetHtml("nom") />
                @Html.ValidationMessage("nom")
            </li>
            <li class="prenom">
                <label for="prenom" @if(!ModelState.IsValidField("prenom")){<text>class="error-label"</text>}>Prénom:</label>
                <input type="text" id="prenom" name="prenom" title="Prénom" value="@prenom" @Validation.GetHtml("prenom") />
                @Html.ValidationMessage("prenom")
            </li>
        </ol>
        <input type="submit" value="Enregistrer" title="Enregistrer" />
        
    </fieldset>
</form>

Afin d’envoyer des données correctes vers votre classe entité pour laquelle vous avez défini certains champs comme obligatoires, vous devez procéder à la validation des données utilisateur.

Les méthodes @Html.ValidationSummary() et @Html.ValidationMessage() sont utilisées pour afficher les messages d’erreurs de validation à l’utilisateur.

Vous allez utiliser JQuery et les nouvelles classes de validation System.Web.WebPages.ValidationHelper et System.Web.WebPages.Validator qui ont été introduites par WebPages 2 pour effectuer en seulement quelques lignes de code, des tâches de validation de données puissantes.

Le code pour effectuer cela est le suivant :

// Ajout des scripts de validation
   Scripts.Add("~/Scripts/jquery-1.6.2.min.js");
   Scripts.Add("~/Scripts/jquery.validate.min.js");
   Scripts.Add("~/Scripts/jquery.validate.unobtrusive.min.js");

   // Validation du nom
   Validation.RequireField("nom", "Le nom est obligatoire.");
   // Validation du prénom
   Validation.RequireField("prenom", "Le prénom est obligatoire.");

Il ne vous reste plus qu’à écrire le code permettant d’ajouter les données postées par un utilisateur dans la base de données :

var pr = new PersonneRepository();
                 var personne = new Personne{
                 Nom = nom, Prenom = prenom};
                 //Ajout des données sur la personne
                 pr.Add(personne);

Le code complet de la page Create.cshtml est le suivant :

@{
    // Définition du layout et du titre de la page
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Register an Account";

    // initialisation des varaiables
    var nom = "";
    var prenom = "";
   
     // Ajout des scripts de validation
    Scripts.Add("~/Scripts/jquery-1.6.2.min.js");
    Scripts.Add("~/Scripts/jquery.validate.min.js");
    Scripts.Add("~/Scripts/jquery.validate.unobtrusive.min.js");

    // Validation du nom
    Validation.RequireField("nom", "Le nom est obligatoire.");
    // Validation du prénom
    Validation.RequireField("prenom", "Le prénom est obligatoire.");
    //Triatement des données si s'est une requête POST
    if (IsPost) {
        nom = Request.Form["nom"];
        prenom= Request.Form["prenom"];
        
          if (Validation.IsValid()) { 
                var pr = new PersonneRepository();
                 var personne = new Personne{
                 Nom = nom, Prenom = prenom};
                 //Ajout des données sur la personne
                 pr.Add(personne);
                 Response.Redirect("Index");
             }
    };
   
                  
        }    
   

<hgroup class="title">
    <h1>Ajout d'un nouvel enregistrement.</h1>
   >
</hgroup>

<form method="post" action="">
    @* Notification en cas d'erreur de validation *@
    @Html.ValidationSummary("Veuillez corriger les erreurs suivantes:")

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li class="nom">
                <label for="nom" @if(!ModelState.IsValidField("nom")){<text>class="error-label"</text>}>Nom:</label>
                <input type="text" id="nom" name="nom" title="Nom" value="@nom" @Validation.GetHtml("nom") />
                @Html.ValidationMessage("nom")
            </li>
            <li class="prenom">
                <label for="prenom" @if(!ModelState.IsValidField("prenom")){<text>class="error-label"</text>}>Prénom:</label>
                <input type="text" id="prenom" name="prenom" title="Prénom" value="@prenom" @Validation.GetHtml("prenom") />
                @Html.ValidationMessage("prenom")
            </li>
        </ol>
        <input type="submit" value="Enregistrer" title="Enregistrer" />
        
    </fieldset>
</form>
<a href="Index">Retour à la liste</a>

À l’exécution de cette page, vous obtenez le résultat suivant :

En cas d’erreur de validation, vous aurez le résultat suivant :

4 – Modification

Après l’enregistrement des données sur une personne, voyons maintenant comment nous allons implémenter une nouvelle page permettant de procéder à la mise à jour des informations sur une personne.

Comme vous avez ajouté un lien  » Editer  » dans le tableau des personnes qui pointe sur la page  » Edit « , vous allez créer un nouveau fichier cshtml ayant ce nom.

La page doit afficher par défaut les informations qui doivent être modifiées dans des zones éditables. Vous allez donc dans un premier temps récupérer ces informations. Le code pour effectuer cela est le suivant :

int id = Request["id"].AsInt();

    var db = new WebMatrixCrudAppContext();
    var personne = new Personne();
    personne = db.Personnes.Find(id);
    // initialisation des variables
    var nom = personne.Nom;
    var prenom = personne.Prenom;

Le code du formulaire de modification est le suivant :

<form method="post" action="">
    @* If at least one validation error exists, notify the user *@
    @Html.ValidationSummary("Veuillez corriger les erreurs suivantes:")

    <fieldset>
        <legend>Formulaire de modification</legend>
        <ol>
            <li class="nom">
                <label for="nom" @if(!ModelState.IsValidField("nom")){<text>class="error-label"</text>}>Nom:</label>
                <input type="text" id="nom" name="nom" title="Nom" value="@nom" @Validation.GetHtml("nom") />
                @Html.ValidationMessage("nom")
            </li>
            <li class="prenom">
                <label for="prenom" @if(!ModelState.IsValidField("prenom")){<text>class="error-label"</text>}>Prénom:</label>
                <input type="text" id="prenom" name="prenom" title="Prénom" value="@prenom" @Validation.GetHtml("prenom") />
                @Html.ValidationMessage("prenom")
            </li>
        </ol>
        <input type="submit" value="Modifier" title="Modifier" />
        
    </fieldset>
</form>

Le code permettant de prendre en compte les modifications dans la base de données est le suivant

personne.Nom = nom;
personne.Prenom = prenom;
//Modification des données sur la personne
pr.Update(personne);

Le code complet de la page Edit.cshtml est le suivant :

@using System.Data
@{
    // Définition du layout et du titre de la page
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Modification d'une personne";

    
    int id = Request["id"].AsInt();

    var pr = new PersonneRepository();
    var personne = new Personne();
    personne = pr.Find(id);
    // initialisation des variables
    var nom = personne.Nom;
    var prenom = personne.Prenom;
   
    // Ajout des scripts de validation
    Scripts.Add("~/Scripts/jquery-1.6.2.min.js");
    Scripts.Add("~/Scripts/jquery.validate.min.js");
    Scripts.Add("~/Scripts/jquery.validate.unobtrusive.min.js");

   // Validation du nom
    Validation.RequireField("nom", "Le nom est obligatoire.");
   // Validation du prénom
    Validation.RequireField("prenom", "Le prénom est obligatoire.");
    //Traitement des données si s'est une requête POST
    if (IsPost) {
        nom = Request.Form["nom"];
        prenom= Request.Form["prenom"];
        
          if (Validation.IsValid()) { 
                
                 personne.Nom = nom;
                 personne.Prenom = prenom;
                 //Modification des données sur la personne
                 pr.Update(personne);
            
                 Response.Redirect("Index");
                
             }
    };
   
                  
        }    
   

<hgroup class="title">
    <h1>Mise à jour des données.</h1>
</hgroup>

<form method="post" action="">
    @* If at least one validation error exists, notify the user *@
    @Html.ValidationSummary("Veuillez corriger les erreurs suivantes:")

    <fieldset>
        <legend>Formulaire de modification</legend>
        <ol>
            <li class="nom">
                <label for="nom" @if(!ModelState.IsValidField("nom")){<text>class="error-label"</text>}>Nom:</label>
                <input type="text" id="nom" name="nom" title="Nom" value="@nom" @Validation.GetHtml("nom") />
                @Html.ValidationMessage("nom")
            </li>
            <li class="prenom">
                <label for="prenom" @if(!ModelState.IsValidField("prenom")){<text>class="error-label"</text>}>Prénom:</label>
                <input type="text" id="prenom" name="prenom" title="Prénom" value="@prenom" @Validation.GetHtml("prenom") />
                @Html.ValidationMessage("prenom")
            </li>
        </ol>
        <input type="submit" value="Modifier" title="Modifier" />
        
    </fieldset>
</form>

<p>
 <a href="Index">Retour à la liste</a>
</p>

À l’exécution de la page, vous obtenez le résultat suivant :

5 – Suppression

Pour finir avec la table Personnes, vous allez maintenant écrire le code permettant de supprimer un enregistrement dans la base de données. Créez pour cela une nouvelle page Delete.cshtml.

Afin d’éviter les suppressions accidentelles, vous allez dans un premier temps afficher dans cette page le récapitulatif des informations sur une personne avec un message de confirmation de suppression.

Le code pour la page Delete reprend celui de la page Edit, à la différence que vous allez ajouter dans un formulaire un bouton permettant de procéder à la suppression d’un enregistrement :

<form method="post" action="">
    <p>
    <input type="submit" value="Supprimer" title="Supprimer" />
 <a href="Index">Retour à la liste</a>
    </p>
    </form>

Vous allez également ajouter dans ce fichier le code permettant de supprimer les données dans la base de données en cas de clic sur le bouton supprimer :

if(IsPost)
    {
            pr.Remove(personne);
            Response.Redirect("Index");
    }
            

Le code complet de la page Delete.cshtml est le suivant :

@{
   // Définition du layout et du titre de la page
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Détails";

    //Lecture des données sur une personne
    int id = Request["id"].AsInt();
    var pr = new PersonneRepository();
    var personne = new Personne();
    personne = pr.Find(id);
    //Traitement des données si s'est une requête POST
    if(IsPost)
    {
            //Supression de l'enregistrement
            pr.Remove(personne);
            Response.Redirect("Index");
    }
                  
}    
<hgroup class="title">
    <h1>Suppression.</h1>
   <h3>Êtes-vous sur de vouloir supprimer cet enregistrement ?</h3>
</hgroup>  
 <fieldset>
        <legend></legend>
        <ol>
            <li class="nom">
                <label>Nom:</label>
                <label>@personne.Nom</label>
            </li>
            <li class="prenom">
                <label>Prénom:</label>
                <label>@personne.Prenom</label>
            </li>
        </ol> 
 
    </fieldset>


<form method="post" action="">
    <p>
    <input type="submit" value="Supprimer" title="Supprimer" />
 <a href="Index">Retour à la liste</a>
    </p>
    </form>

Ce qui donne le résultat suivant à l’exécution :

Compte tenu du fait que l’implémentation des fonctionnalités pour la table Organismes reprend plusieurs des principes et méthodes qui ont été utilisés pour la table Personnes, nous n’allons plus revenir sur la création des pages d’affichage, d’enregistrement, de mise à jour ou de suppression d’un organisme.

Pour écrire le code de ces pages, veuillez vous référer à celui pour la table Personnes ou à défaut, regarder le code source pour ces pages dans les fichiers du projet qui sont disponibles en téléchargement à la fin de l’article.

La prochaine et dernière partie portera donc sur l’implémentation des fonctionnalités CRUD pour la table Affiliations, qui sera un peu différente puisque c’est table association.

J’ai donc opté pour l’utilisation de la bibliothèque au sein de mon application WebMatrix. Entity Framework est en passe de devenir un standard pour la manipulation des données et est recommandé par Microsoft.

Contrairement avec Visual Studio et ASP.NET ou l’on dispose de plusieurs outils rendant facile la conception d’une application CRUD avec Entity Framework, sur WebMatrix, c’est un peu compliqué et l’on ne dispose pas des fonctionnalités comme l’échafaudage, et encore moins des ressources sur Internet.

C’est pourquoi, j’ai donc décidé de fournir au travers de cet article une démarche pas à pas avec autant que possible des détails pour la conception d’une application CRUD avec WebMatrix, Razor et Entity Framework.

Le lecteur tout au long de ce tutoriel, pourra se familiariser avec WebMatrix, Razor, Entity Framework, le gestionnaire de packages open source .NET NuGet pour WebMatrix et le gestionnaire de base de données SQL Server Compact Edition.

Cet article est essentiellement destiné aux débutants. Aucun prérequis n’est donc nécessaire pour sa bonne compréhension. Mais, il est néanmoins conseillé que vous vous soyez familiarisé avec WebMatrix et Razor.

Si ce n’est pas le cas, je vous conseille de lire dans un premier temps mon tutoriel de présentation de WebMatrix ainsi que mon tutoriel sur Razor.

Description des outils de travail

WebMatrix

Pour rappel, WebMatrix est un environnement de développement Web léger (15 Mo), efficace et surtout gratuit, développé par Microsoft. Il permet aux développeurs Web de créer et gérer des applications Web sur la plate-forme Windows, tout en restant compatibles avec les produits Microsoft Visual Studio, SQL Server ou encore PHP sur Windows.

Lire le tutoriel sur la présentation de WebMatrix.

Pour cet article, nous utiliserons la bêta de WebMatrix 2, qui est la version la plus récente de l’environnement de développement Web. L’EDI est téléchargeable sur cette page.

Son installation est assez simple et se fait via Windows Installer. L’outil installe automatiquement SQL Server Compact Edition et WebPages 2 Developer Preview, sur lequel repose les pages Web ASP.NET écrites avec WebMatrix.

Razor

Razor a été conçu pour faciliter la conception des pages ASP.NET. Il introduit une syntaxe de programmation assez facilement compréhensible, qui vous permet d’insérer du code serveur dans une page Web qui peut également contenir du HTML, du CSS et des scripts JavaScript.

Le moteur Razor est fluide, compact, expressif et s’appuie sur la syntaxe des langages .NET C# et Visual Basic .NET. Il offre la puissance d’ASP.NET pour la création rapide des applications Web fonctionnelles et sophistiquées.

Lire mon tutoriel sur la présentation de Razor.

SQL Server Compact Edition

SQL Server Compact Edition. Est un gestionnaire de base de données relationnelle compact, gratuit, mis au point par Microsoft pour le développement des applications pouvant s’exécuter sur des ordinateurs de bureau et les dispositifs mobiles.

SQL Server Compact partage un modèle de programmation commun avec différentes éditions de SQL Server qui permet aux développeurs de créer des applications natives et managées. SQL Server Compact fournit des fonctionnalités de base de données relationnelle : une source de données fiable, un processeur d’optimisation des requêtes et des possibilités de connectivité fiables et évolutives.
La prise en charge du développement pour SQL Server Compact est fournie par Visual Studio et également WebMatrix. L’environnement intègre un éditeur graphique permettant de créer, modifier, exécuter des requêtes et administrer une base de données SQL Server Compact.

Entity Framework

De plus en plus, les développeurs préfèrent utiliser des données comme des objets, au lieu d’utiliser les requêtes SQL pour interroger directement la base de données. Entity Framework est un ORM permettant aux développeurs de créer des applications d’accès aux données en programmant par rapport à un modèle d’application conceptuel au lieu de programmer directement par rapport à un schéma de stockage relationnel. L’objectif est de diminuer la quantité de code et les besoins en maintenance pour les applications orientées objet.

Plusieurs approches peuvent être utilisées avec Entity Framework pour accéder aux données. Dans notre cas, c’est l’approche Code First qui sera utilisée.

Cette approche permet de définir tout d’abord les objets dans le code, ensuite utiliser EF pour créer la base de données correspondante.

NuGet

NuGet est un gestionnaire de packages .NET open source. Il est disponible comme une extension pour les environnements de développement .NET Visual Studio, SharpDevelop et est intégré par défaut dans la version 2 de WebMatrix. Il fournit au développeur une meilleure expérience pour la gestion des packages et dépendances, et élimine presque tous les défis d’intégration d’une bibliothèque tierce open source ou gratuite dans un projet .NET.

Lire mon tutoriel sur la présentation de NuGet.

Dans la seconde partie, nous allons créer l’application, installer Entity Framework à partir de NuGet et créer le modèle objet pour nos entités.

WebMatrix 2 bêta, en plus des nouvelles fonctionnalités assez intéressantes que nous avons présenté jusqu’ici (authentification en utilisant un compte Twitter ou Facebook, support amélioré pour PHP, amélioration de la validation des données utilisateur, etc.) intègre désormais une déclinaison du gestionnaire de packages .NET open source NuGet, et une galerie d’extensions.

Le gestionnaire de packages NuGet pour WebMatrix

De nos jours, il est difficile de concevoir une application sans toute foi faire appel à des bibliothèques externes. La gestion (téléchargement, installation, configuration, mises à jour) de ces dépendances externes peut rapidement devenir un travail long et complexe. NuGet offre un moyen simple pour effectuer ces opérations.

Depuis la première version de WebMatrix, l’accès aux bibliothèques externes se faisait à travers la page d’administration d’ASP.NET WebPages dans le navigateur. Le développeur disposait uniquement que des fonctionnalités de recherche et d’installation et suppression des packages depuis cette page. Les fonctionnalités de mise à jour, configuration et autres n’étaient pas prises en charge.

Avec la version 2 de WebMatrix, NuGet est entièrement intégré dans l’espace de travail de l’environnement Web, afin de réduire le temps et les étapes nécessaires pour obtenir et gérer un package. Désormais, dans une application Web utilisant WebMatrix, le développeur pourra facilement ajouter, supprimer, configurer et mettre à jour une dépendance.

Nous verrons donc dans ce billet de blog, comme utiliser NuGet avec WebMatrix pour effectuer ces tâches.

Accès à NuGet

Nous allons dans un premier temps créer un nouveau projet en utilisant le modèle « Site Starter ». Après ouverture du projet, nous devons aller dans l’espace de travail « Files ».

Dans le ruban de la barre d’outils, vous verrez un nouveau bouton « Gallery » comme l’illustre la capture ci-dessous :

En cliquant sur le bouton Gallery, NuGet affiche par défaut les packages les plus utiles, ainsi que les packages qui sont déjà installés dans votre application.

Pour voir tous les packages disponibles, il suffit de cliquer sur le bouton contenant le logo de NuGet. À ce moment, une nouvelle fenêtre va s’afficher vous permettant de visualiser, mettre à jour et supprimer un package.

Installation d’un package

L’installation d’un package peut se faire directement dans la fenêtre d’affichage des packages les plus utiles ou depuis la fenêtre de la galerie NuGet. La procédure dans les deux cas est la même.

Pour installer un package, vous devez dans un premier temps trouver celui-ci. Une zone de recherche est disponible dans la fenêtre du gestionnaire de packages, permettant de retrouver facilement une bibliothèque.

Lorsque vous avez trouvé le package que vous souhaitez installer, cliquez simplement sur son icône et ensuite sur le bouton « Installer », ou double-cliquez sur l’icône du package pour lancer son installation.

Pour notre exemple, nous allons installer le Helper Twitter (Twitter.Helper). Pour cela, nous allons effectuer une recherche pour retrouver notre package et double cliquer sur son icône pour lancer son installation.

Lorsque le téléchargement et l’installation du package s’achèvent, le message d’état suivant s’affiche pour vous signaler que l’installation a été effectuée avec succès.

NB : Si le package nécessite que vous acceptiez les termes de licence, une seconde fenêtre va s’afficher après que vous ayez cliqué sur le bouton Install, vous invitant à lire et accepter les termes de licence.

Pour un package contenant plusieurs dépendances, NuGet se charge automatiquement de trouver ces dépendances,, de les télécharger et d’installer celles-ci dans votre application. S’il y a lieu, celui-ci édite automatiquement le fichier Web.Config pour ajouter une référence à la bibliothèque dans votre projet.

Et voila, vous pouvez désormais utiliser le package et profiter de l’InteliSence qu’offre WebMatrix.

Mise à jour et suppression d’un package

La galerie compare constamment les packages qui sont installés dans votre application avec ceux qui sont disponibles et classifie dans une rubrique ceux dont une mise à jour est disponible.

Ces packages sont visibles depuis la galerie, en sélectionnant l’option « Updates ».

Pour mettre à jour un package, il suffit simplement de sélectionner celui-ci et cliquer sur le bouton Update.

NB : La mise entraine la suppression de la version précédente du package par NuGet et l’installation automatique de la version la plus récente.

Pour supprimer un package, sélectionnez l’option Installed, trouvez le package que vous souhaitez supprimer et cliquez sur le bouton « Uninstall » pour procéder à la suppression de celui-ci.

NB : La suppression d’un package entraine la suppression de toutes les dépendances liées à celui-ci.

Ajouter des flux personnalisés

Vous avez également la possibilité de définir un dépôt spécifique pour vos packages.

Supposons que vous avez créé votre propre package qui sera utilisé par vous et l’ensemble des membres de votre équipe. Pour cela, vous allez définir un repository et donner le lien vers celui-ci, qui sera utilisé comme source de données par votre équipe.

Pour spécifier une nouvelle source de données dans WebMatrix, il suffit de cliquer sur le Combobox disponible dans la fenêtre de la galerie NuGet, et sélectionner l’option « Add source ».

Dans la boite de dialogue qui apparait, indiquez le nom et l’URL du flux du paquet que vous souhaitez ajouter, puis cliquez sur le bouton « add »

NB : La source peut être des URL HTTP ou des répertoires locaux ou des répertoires partagés contenant des fichiers de spécifications .nupkg.

Cliquez ensuite sur le bouton OK pour revenir sur la page précédente. Votre source de données va désormais s’afficher dans la liste déroulante.

Galerie d’extensions WebMatrix

L’extensibilité d’un environnement de développement est une caractéristique importante au succès de celui-ci. L’EDI doit fournir au développeur la possibilité d’étendre ses fonctionnalités de base pour répondre à ses besoins, sans toute fois dégrader les performances de l’éditeur.

En plus d’être un EDI extensible, WebMatrix intègre une galerie d’extensions qui met à la disposition du développeur quasiment les mêmes fonctions que le gestionnaire de packages NuGet pour trouver et installer facilement une extension. D’une interface assez similaire à celle de NuGet pour WebMatrix, la galerie d’extensions vous permet de télécharger, installer, mettre à jour et supprimer des extensions pour WebMatrix.

Nous n’allons plus revenir sur les procédures de téléchargement, installation, mise à jour et suppression d’une extension, car la procédure est similaire à celle que nous avons décrite plus haut.

Pour l’instant, juste quelques extensions ont été publiées par les développeurs de WebMatrix, permettant de sauvegarder ses fichiers dans Windows Azure, visualiser les images dans WebMatrix ou encore faire du copier-coller de code.

La création de ses propres extensions peut facilement être effectuée pour un développeur en utilisant MEF. Un modèle de projet sous Visual Studio est d’ailleurs même disponible pour faciliter la tâche.

Conclusion

Force est de constater combien Microsoft à apporter des améliorations à WebMatrix pour faire de l’environnement de développement Web une plateforme adaptée pour des petits projets, mais également pour des projets importants.

Sur le même sujet :

– WebMatrix 2 bêta : validation des données utilisateur

– WebMatrix 2 bêta : intégrer l’authentification Twitter à son site Web

– WebMatrix 2 bêta : support amélioré pour PHP avec l’IntelliSense ;

– WebMatrix : retour d’expérience sur l’EDI Web ;

– Découverte et prise en main de WebMatrix ;

– WebMatrix : utilisation des Helpers Razor et de la galerie d’applications ;

– Comment activer et utiliser xdebug avec WebMatrix ;

– Télécharger WebMatrix 2 bêta .

Plusieurs techniques peuvent être utilisées pour optimiser les performances d’une application Web (mise en cache, compression des fichiers, minification, etc). Je vais me pencher aujourd’hui sur le package NuGet d’optimisation d’un site Web « ASP.NET Optimization – Bundling » qui a été publié récemment par Microsoft.

Ce package ajoute le support du regroupement et de la minification des fichiers JavaScript et CSS – qui sont des caractéristiques d’ASP.NET 4.5 et ASP.NET MVC 4 (disponibles actuellement en version Developper Preview) – avec le minimum d’effort pour les applications ASP.NET 4 et ASP.NET MVC.

Le regroupement et la minification sont des procédés de réduction de la taille des fichiers en les combinant, et en supprimant les espaces et autres caractères inutiles. Ces méthodes permettent de rendre l’exécution d’une page Web plus rapide avec le moins de demandes de chargement des fichiers.

Nous verrons dans ce billet de blog comment améliorer les performances d’une application Web ASP.NET MVC en utilisant les techniques de regroupement et de minification introduites par le package Microsoft.Web.Optimisation.

Pour commencer, nous allons créer un nouveau projet ASP.NET MVC 3.
Comme l’illustre l’image ci-dessous, nous constatons que notre application contient par défaut un nombre déjà assez important de fichiers JavaScript et CSS.

En exécutant une page de cette application (LogOn.chtml), nous obtenons les statistiques suivantes issues de l’analyse d’un outil de mesure de performance comme YSlow.

Pour cette page, nous avons un nombre total de 7 requêtes HTTP qui ont été effectuées, avec 4 fichiers JavaScript d’une taille totale de 119,9K qui ont été chargés.

Nous allons maintenant essayer de réduire le nombre de requêtes et la taille des fichiers qui sont chargés en utilisant ASP.NeT Optimisation Bundle.

Pour cela, nous allons dans un premier temps ajouter une référence à Microsoft.Web.Optimisation dans notre application.

L’ajout de ce composant se fera via NuGet. Pour installer le package en utilisant NuGet voir mon article sur NuGet.

Après avoir installé le package, nous pouvons démarrer le regroupement et la minificatioon de nos fichiers en ajoutant tout simplement la ligne de code suivant dans la procédure Application_Start() du fichier Global.asax.cs.

BundleTable.Bundles.EnableDefaultBundles();

Et c’est tout ;).

N’oubliez pas d’ajouter une référence à Microsoft.Web.Optimization dans le fichier Global.asax.cs :

using Microsoft.Web.Optimization;

Tous les fichiers JavaScript contenus dans le répertoire Scripts (les sous dossiers ne sont pas pris en compte) de notre application seront regroupés, compressés et traités comme un seul fichier. Ces fichiers seront regroupés par défaut dans un dossier Script.

Ils seront désormais référencés en utilisant la ligne de code suivante :

<script src="@Url.Content("/Scripts/js")" type="text/javascript"></script>

De même, les fichiers CSS contenus dans le répertoire Content seront également compactés par défaut dans un dossier Content.

Ils seront référencés en utilisant la ligne de code suivante :

<link href="@Url.Content("/Content/css")" rel="stylesheet" type="text/css" />

Après avoir appliqué ces modifications, exécutons à nouveau la page précédente. Nous obtenons le résultat suivant :

En comparant avec le résultat précédent, nous constatons que le nombre de requêtes est passé de 7 à 4, avec l’utilisation d’un fichier JavaScript unique, contre quatre précédemment.
C’est déjà une bonne chose. Par contre, on se rend compte que la taille du JavaScript a plutôt augmenté, passant de 119,9k à 437,5k.

Pourquoi avons-nous plutôt une augmentation de la taille du JavaScript ?

En utilisant le dossier Scripts par défaut, ce sont environ une vingtaine de fichiers JavaScript contenus dans notre application ASP.NET MVC qui sont regroupés, minifiés et référencés dans une page qui n’utilise que quatre de ces fichiers.
C’est tout à fait normal donc que malgré l’opération d’optimisation, on se retrouve avec une taille totale de ces fichiers supérieure à celle des quatre référencés dans notre page.

Pour pallier à cela, nous pouvons définir nos propres regroupements de fichiers.

Avec cette option, nous avons la liberté dans le choix des fichiers qui seront dans un regroupement, ainsi que l’URL qu’aura le regroupement. À ce stade, le choix des dossiers de regroupement doit être fonction de la récurrence des fichiers JavaScript et CSS dans les pages de votre application.

Nous pouvons définir nos regroupements personnalisés en procédant comme suit dans la procédure Application_Start() du fichier Global.asax.cs :

BundleTable.Bundles.EnableDefaultBundles();

Bundle jsBundle = new Bundle("~/Scripts",typeof(JsMinify));
jsBundle.AddFile("~/Scripts/jquery-1.5.1.min.js");
jsBundle.AddFile("~/Scripts/modernizr-1.7.min.js");
jsBundle.AddFile("~/Scripts/jquery.validate.min.js");
jsBundle.AddFile("~/Scripts/jquery.validate.unobtrusive.min.js");

BundleTable.Bundles.Add(jsBundle);

Bundle cssBundle = new Bundle("~/Style", typeof(CssMinify));
cssBundle.AddFile("~/content/themes/site.css");
cssBundle.AddFile("~/content/themes/base/jquery.ui.all.css");

BundleTable.Bundles.Add(cssBundle);

Nous allons désormais référencer ces regroupements dans notre page comme suit :

<link href="@Url.Content("~/Style ")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts")" type="text/javascript"></script>

Et en exécutant la page précédente, nous obtenons le résultat suivant :

Et voilà, la taille de nos fichiers JavaScript passe de 119,9K à 2,3K, soit une réduction de plus de 95 %.

Vous pouvez également ajouter à votre regroupement tous les fichiers JavaScript d’un répertoire en procédant comme suit :

jsBundle.AddDirectory("~/Scripts", "*.js", false);

Nous avons maintenant de quoi compresser et réduire au maximum le nombre de hits de nos pages Web avec souplesse.

Seul bémol, la minification des fichiers contenant du code CSS3 semble ne pas fonctionner pour l’instant.

Pire, si la bibliothèque utilisée nécessite la disponibilité d’autres bibliothèques externes, le développeur est obligé de répéter ces étapes pour chaque dépendance du composant.

Ces tâches peuvent donc s’avérer assez complexes et demandent parfois des efforts considérables en temps et énergie, sans compter le suivi des mises à jour qui sont parfois fréquentes pour certains composants. La gestion des dépendances pour une application peut donc rapidement devenir un casse-tête pour le développeur.

Nuget est un gestionnaire de package .NET open source qui automatise toutes ces tâches fastidieuses pour un package externe ainsi que ses dépendances dans une application. Nous verrons, au travers de ce tutoriel, cet outil fort intéressant et comment l’utiliser pour télécharger, installer, mettre à jour des packages dans Visual Studio 2010. Nous verrons, également comment générer et publier ses propres packages Nuget.

L’article est regroupé au sein des parties suivantes :

I. Introduction

II. Description de NuGet

III. Installation de NuGet

III-A. Installation à parti du site du projet

III-B. Installation à partir de Visual Studio

IV. Utilisation de NuGet

IV-A. Utilisation à partir de la console Package Manager

IV-B. Utilisation de l’interface graphique

V. Création et Publication de son propre package NuGet

V-A. Utilisation de Nuget.exe

V-B. Création et publication d’un package avec NuGet Package Explorer

VI. Conclusion

L’article complet est disponible sur cette page.

Télécharger la version PDF (Miroir).

Télécharger la version hors-ligne (Miroir).

Bonne lecture

Avec ces nouveautés, nous avons sans apporter aucune modification à nos modèles et contrôleurs, créé des vues personnalisées pour les navigateurs Desktop et les navigateurs mobiles.

Dans ce billet, nous verrons comment procéder autrement en utilisant le package Nuget JQuery.Mobile.MVC.

Le package jQuery.Mobile.MVC installe la librairie JQuery Mobile qui va permettre la création des interfaces Web optimisées pour les smartphones et autres terminaux tactiles, ainsi que plusieurs autres fichiers pour faciliter la tâche au développeur.

Ouvrons notre application ASP.NET MVC 4 avec votre éditeur Visual Studio 2010 SP 1 ou Visual Web Developper Express 2010 SP 1.

Nous allons dans un premier temps intégrer la bibliothèque JavaScript à notre projet en utilisant le gestionnaire de packages Nuget.

Pour cela, nous allons faire un clic droit sur notre projet dans l’explorateur de solution. Dans le menu contextuel qui s’affiche, sélectionnons « Manage Nuget Packages ».

La fenêtre de gestion des packages Nuget s’affiche. Nous devons rechercher le package jQuery.Mobile.MVC en tapant son nom dans la zone de recherche.

Nous allons ensuite cliquer sur Install pour que Nuget télécharger et installe automatiquement dans notre projet le package ainsi que toutes ses dépendances.

Nous allons nous rendre compte que plusieurs fichiers ont été ajoutés au projet, dont un nouveau fichier _Layout.Mobile.cshtml, _ViewSwitcher.cshtml ou encore ViewSwitcherController.cs.

Procédons maintenant à l’exécution de notre page pour voir ce qui sera affiché à l’écran en utilisant notre navigateur Firefox, et en définissant comme agent utilisateur iPhone (voir mon précédent billet de blog pour définir l’agent utilisateur sous Firefox).

View Switcher.

Revenons maintenant voir ce qui se trouve sous le capot.

Sur la page affichée dans notre navigateur, nous remarquons qu’une bande noire s’est ajoutée en début de celle-ci avec un lien permettant de basculer sur la vue desktop de la page.

D’où provient cette bande ?

Ouvrons avec notre éditeur la page affichée à l’écran (Index.cshtml).

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

À première vue, on se rend compte qu’aucune modification n’a été effectuée dans ce fichier.

Puisque ce fichier est intégré dans le Layout avant d’être affiché, jetons maintenant un coup d’œil sur notre fichier _Layout.Mobile.cshtml. Nous allons apercevoir la ligne de code suivante :

@Html.Partial("_ViewSwitcher")

Qui fait référence à la vue partielle _ViewSwitcher.cshtml. C’est cette vue qui ajoute un lien sur toutes les pages mobiles permettant de basculer du mode d’affichage mobile pour Desktop et vice-versa. Par défaut, elle n’est pas incluse dans les vues Desktop. Pour remédier à cela, vous pouvez juste copier @Html.Partial(« _ViewSwitcher ») dans le fichier _Layout.Mobile.cshtml et le coller dans le fichier _Layout.cshtml.

Dans le code de la vue partielle ViewSwitcher, la méthode GetOverriddenBrowser() est utilisée pour retourner un objet HttpBrowserCapabilitiesBase, qui va donner des informations sur les capacités du navigateur qui a fait la demande. La propriété IsMobileDevice retourne une valeur booléenne permettant de savoir si c’est un navigateur mobile qui effectue la demande.

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
    <div class="view-switcher ui-bar-a">
        @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
        {
            @: Displaying mobile view
            @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        } 
        else 
        {
            @: Displaying desktop view
            @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
    </div>
}

Browser Overriding

Penchons-nous maintenant sur le contrôleur qui est associé à cette vue.

using System.Web.Mvc;
using System.Web.WebPages;

namespace MvcApplication3.Controllers
{
    public class ViewSwitcherController : Controller
    {
        public RedirectResult SwitchView(bool mobile, string returnUrl) {
            if (Request.Browser.IsMobileDevice == mobile)
                HttpContext.ClearOverriddenBrowser();
            else
                HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);

            return Redirect(returnUrl);
        }
    }
}

Le View Switcher utilise une nouvelle fonctionnalité « Browser Overriding », permettant de traiter les demandes d’une application comme si elles provenaient d’un autre navigateur (Agent utilisateur).

Le Browser Overriding est une caractéristique de base d’ASP.NET MVC 4, et peut de ce fait être utilisé même si vous n’avez pas installé le package jQuery.Mobile.MVC. Avec cette fonctionnalité, en fonction du lien sur lequel l’utilisateur à cliquer (Desktop view ou Mobile view), le contrôleur de la vue Switcher va simuler un agent utilisateur (BrowserOverride.Mobile ou BrowserOverride.Desktop) qui sera utilisé pour charger les vues correspondantes au choix de l’utilisateur malgré que l’agent utilisateur transmit par son navigateur ne soit pas le même.

Le code ci-dessous va donc permettre de substituer l’agent utilisateur du navigateur. Par défaut, les données sur l’agent utilisateur simulé sont stockées en utilisant un cookie.

Conclusion

Nous venons d’apercevoir une fois de plus la puissance fonctionnelle d’ASP.NET MVC 4 pour le développement d’application mobile et Web. Dans le prochain billet de blog, notre attention sera portée sur le Template Web du Framework.

Aujourd’hui je vais me pencher sur l’utilisation même de Nuget au sein de Visual Studio 2010 pour installer et gérer des packages.

Dans ce billet de blog, nous allons découvrir une nouveauté/astuce qui avait été introduite par la dernière version de Nuget, permettant d’installer et maintenir simultanément dans plusieurs projets un package.

Pour l’exemple, nous devons disposer comme pré requis Visual Studio 2010 et le gestionnaire de package Nuget.

Lançons votre EDI, créons une nouvelle solution et ajoutons-y deux projets comme l’illustre l’image ci-dessous :

Nous allons ajouter un package à la fois dans notre application MVC et notre application Windows Forms en une seule opération.

Pour cela, nous devons faire un clic droit sur notre solution, dans le menu contextuel qui va s’afficher, nous allons cliquer sur « Manage Nuget Packge ».

Dans la fenêtre de gestion des packages Nuget, nous allons essayer d’installer Entity Framework dans nos deux projets en cliquant sur le bouton « Install ».

Une seconde fenêtre va s’afficher, nous demandant de sélectionner les projets de notre solution dans lesquels nous souhaitons que Nuget installe le package.

Par défaut, tous les projets de la solution sont cochés.

Nous allons cliquer enfin sur le bouton OK pour lancer l’installation.

Nous nous rendrons compte que Nuget a téléchargé le package et ajouté automatiquement une référence à celui-ci dans les deux projets de notre solution.

Et voilà, c’est tout plutôt facile ;).

Dans la fenêtre de gestion de packages Nuget, grâce au bouton « Manage » désormais affiché sur le package que nous venons d’installer, nous pouvons à tout moment désinstaller le package dans un projet, ou ajouter le package dans un nouveau projet que nous avons ajouté à notre solution.

Pour effectuer une installation directement dans un projet uniquement d’une solution, au lieu de faire un clic droit sur la Solution, faites-le plutôt sur le dossier « References » du projet, et cliquez sur Manage Nuget Packages.

Cependant, l’utilisation de l’invite de commandes et l’édition du fichier XML de spécification à la main peuvent s’avérer assez inconfortables pour certaines personnes. C’est pourquoi je vais vous présenter dans ce billet de blog une alternative à Nuget.exe, permettant à l’utilisateur de bénéficier du confort d’une interface graphique.

Il s’agit de l’utilitaire Nuget Package Explorer, qui met à la disposition de l’utilisateur une interface lui permettant de créer, éditer son fichier de spécification et publier son Forfait Nuget avec le minimum d’effort.

L’outil est téléchargeable sur cette page.

Après son installation, vous aurez affiché sur votre écran l’interface utilisateur suivante :

Cliquez sur la ligne « Create a new package », pour créer votre package Nuget.

Le package est créé avec comme Meta donnée par défaut, des informations reprises directement depuis votre système.

Cliquez sur le menu « Edit », ensuite sur « Edit Package Metadata » pour accéder à la fenêtre d’édition du package.

L’interface suivante s’affiche avec un formulaire qui vous permettra de renseigner les informations sur votre package :

Je ne reviendrais pas sur la description de ces informations. Pour plus de détails, lisez mon précédent billet de blog sur Nuget.

Comme vous pouvez le constater, les informations importantes qu’il faut renseigner sont en gras.

Lorsque vous avez achevé avec cette étape, validez votre saisie en cliquant sur le bouton OK.

Maintenant, nous allons définir le contenu de notre package Nuget.
Pour cela, nous allons cliquer sur le menu « Content » ensuite sur « Add ».

Dans le sous-menu qui s’affiche, nous allons dans un premier temps définir les dossiers que nous allons utiliser.

Nuget reconnait par défaut les dossiers : Content (pour les fichiers qui seront copiés à la racine de l’application lors de l’installation du package), Lib (pour les DLL) et Tools (pour les scripts PowerShell associés au package).

Pour notre cas, nous allons créer le dossier Lib pour les librairies constituant notre package Nuget.

En faisant un clic droit sur ce dossier, nous avons la possibilité de définir plusieurs sous dossiers en fonction des versions des plateformes de développement que le package supporte (ASP.NET, Silverlight, Windows Phone, etc.).

Supposons que notre DLL cible la version 4.0 du Framework .NET. Nous allons donc créer un dossier net40. Nous allons ensuite faire un clic droit sur ce dossier et dans le menu contextuel qui s’affiche, nous allons cliquer sur « Add Existing File… ».

Nous allons ensuite rechercher notre fichier et l’ajouter comme contenu de notre package.

Nous pouvons également par un simple geste de glisser/déposer sur l’espace de travail « Package contents », ajouter un contenu à notre package.

Nous devons maintenant enregistrer nos informations en utilisant le raccourci clavier « Ctrl + S » ou le menu Fichier/Enregistrer.

Et c’est tout ;). Il ne nous reste plus qu’à publier notre package.

Dans mon article précédent, j’avais énoncé deux méthodes de publication d’un dépôt Nuget, et j’avais présenté uniquement l’une des deux méthodes.

Nous verrons donc la seconde méthode qui consiste en la publication de notre dépôt Nuget sur la galerie officielle Nuget.

Pour cela, nous allons cliquer sur la commande « Publish » du menu fichier.

La fenêtre qui s’affiche nous demande de renseigner notre clé de publication.

Vous pouvez obtenir cette information en vous inscrivant sur le site de la « NuGet Gallery » à partir de ce lien.

Et voilà! nous venons de créer et publier notre premier package Nuget sur la galerie officielle du projet.

Votre compte va vous permettre de gérer (édition, suppression, etc.) vos différents dépôts sur la galerie Nuget.

Si vous ne souhaitez pas publier votre dépôt sur la galerie officielle, exporter simplement celui-ci en utilisant la commande Export du menu Fichier, et copier le dossier qui sera généré à l’emplacement de votre choix.

Pour l’utilisation de votre dépôt dans le gestionnaire de packages Nuget au sein de Visual Studio, referez-vous à mon précédent billet de blog.

Pour pallier à cela, le team Web de Microsoft a développé Nuget, un gestionnaire de package qui s’impose de nos jours comme une référence dans l’écosystème .NET.

Pris en charge dans Visual Studio 2010 ou encore dans l’environnement de développement open source SharpDevelop, Nuget a rapidement été adopté par les développeurs .NET et est de plus en plus intégré par défaut dans plusieurs outils (ASP.NET MVC, WebMatrix, etc). Les briques logicielles .NET les plus populaires sont pratiquement toutes compatibles avec celui-ci.

Comment utiliser donc Nuget pour télécharger et installer une bibliothèque dans mon application ? Comme mettre à jours mes dépendances ? Comment créer mon propre package Nuget et le publier ?

Après plusieurs recherches, j’ai constaté malheureusement qu’il existait très peu de ressource en français sur cet outil. C’est pourquoi, j’ai décidé qu’il était temps que la rubrique .NET de Developpez.com soit dotée d’un article assez riche couvrant pratiquement tous les aspects sur Nuget et répondant à ces questions.

Ce billet de blog est donc un extrait de cet article en cours de rédaction, et sera axé principalement sur la création et la publication de son propre package Nuget.

La création d’un package compatible avec Nuget, revient au moment de la publication de votre application à définir à la racine du dossier contenant le projet un fichier XML de spécification Nuget ( .nuspec) et un fichier de package (.nupkg).

Il est recommandé avant de se lancer dans la création de votre package Nuget, de définir les répertoires suivants pour spécifier à Nuget quelles ressources seront utilisées et ou les trouver :

- Lib : qui va contenir l’ensemble des assemblys qui seront ajoutées en tant que référence lorsque le package sera créé. Si vos assemblys ciblent des versions particulières du Framework .NET, vous devez créer un dossier pour chaque version du Framework pour ces assemblys.

Exemple : net30 pour le Framework .NET 3.0 ou encore net40 pour la version 4.0 du framework.NET.

- Content : qui va contenir les fichiers qui seront copiés à la racine de votre application lorsque le package sera installé.

- Tools : va contenir les scripts (PowerShell) qui seront ajoutés à la variable d’environnement PATH quand le package sera installé.

L’outil Nuget.exe, qui est disponible en téléchargement sur le site du projet sera utilisé pour générer ces fichiers.

1 – Création du fichier de spécification (.nuspec)

Après avoir téléchargé Nuget.exe, vous devez le placer dans un dossier de votre choix. De préférence, utilisez le dossier C:\Nuget ou celui de votre projet/solution.

Maintenant, à partir de l’invite de commandes, nous allons générer dans un premier temps le fichier XML des spécifications.

Pour cela, en invite de commande, positionnez-vous dans le dossier contenant l’outil Nuget.exe et exécutez la commande suivante :

NuGet spec NomPackage

Dans le cas où vous ne fournissez pas le nom du package, le fichier de spécification sera créé avec comme nom par défaut Package.nuspec.

Le fichier de spécification est généré par défaut à la racine du dossier contenant le fichier Nuget.exe. Vous pouvez lors de la création de ce fichier, spécifier dans quel dossier vous souhaitez que celui-ci soit créé.

Le fichier XML généré contient par défaut les informations suivantes :

<?xml version="1.0"?>
<package >
  <metadata>
    <id>MyPackage</id>
    <version>1.0</version>
    <authors>Author here</authors>
    <owners>Owner here</owners>
    <licenseUrl>http://LICENSE_URL_HERE_OR_DELETE_THIS_LINE</licenseUrl>
    <projectUrl>http://PROJECT_URL_HERE_OR_DELETE_THIS_LINE</projectUrl>
    <iconUrl>http://ICON_URL_HERE_OR_DELETE_THIS_LINE</iconUrl>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>Package description</description>
    <copyright>Copyright 2011</copyright>
    <tags>Tag1 Tag2</tags>
    <dependencies>
      <dependency id="SampleDependency" version="1.0" />
    </dependencies>
  </metadata>
</package>

1.1 – Description du fichier de spécification

Le nœud id est utilisé pour définir l’identifiant unique du package. C’est ce paramètre qui sera utilisé pour répertorier votre application dans la liste des packages Nuget.

Le nœud version servira à l’attribution d’un numéro de version à votre package.

Quant au nœud authors, il permettra de lister les auteurs du package. Chaque nom d’auteur doit être séparé avec une virgule.

Owners permettra de définir la liste des propriétaires du package. Chaque nom doit être séparé avec une virgule.

licenseUrl doit contenir le lien vers les informations de licence de votre package.

Le nœud projectUrl sera utilisé pour définir le lien vers le site du projet lié au package.
iconUrl permettra de définir le lien vers l’icône du package. Il est conseillé d’utiliser une image de 32×32 pixels avec un fond transparent.

requiredLicenseAcceptance sera utilisé pour définir un booléen permettant de spécifier si la licence doit être acceptée ou non avant l’installation du package.
Le nœud description sera utilisé pour fournir une brève description du package.

Copyright permettra définir le droit déposé pour publier et exploiter le composant.

Enfin, le nœud dependencies permettra de spécifier la liste des dépendances qui seront requises par le package.

Pour Exemple, je vais utiliser le fichier de spécification Nuget suivant pour créer mon package :

<?xml version="1.0"?>
<package >
  <metadata>
    <id>MyNugetPackage</id>
    <version>1.0</version>
    <authors>Romaric</authors>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>Mon premier package Nuget</description>
    <copyright>Copyright 2011</copyright>
  </metadata>
</package> 

Comme vous pouvez le constater, tous les nœuds ne sont pas obligataires, et vous pouvez ajouter des nœuds supplémentaires dans votre fichier de spécification. Les informations qui peuvent être renseignées dans le fichier de spécification sont décrites sur cette page.

2 – Création du package Nuget

Après avoir créé et édité notre fichier de spécification, nous pouvons maintenant générer le package Nuget.

Pour cela, en invite de commandes, nous allons exécuter la commande suivante :

Nuget pack fichierspecification.nuspec

Le fichier de package .nupkg sera créé à la racine du dossier contenant Nuget.exe avec comme nom par défaut l’ID du package concaténé au numéro de version renseignés dans le fichier de spécification. Copiez le fichier .nupkg généré à la racine du dossier contenant votre application.

Vous pouvez également spécifier l’emplacement ou sera créé le fichier de package (directement dans votre projet par exemple) en utilisant l’argument –o.

Nuget pack c:\MyNugetPackage\Mypackage.nuspec –o c:\MyNugetPackage\

3 – Publication de notre Package

Maintenant que nous avons créé notre package Nuget, comment allons-nous procéder pour le publier afin qu’il soit téléchargé directement à partir d’un EDI (VS 2010, WebMatrix, etc.) prenant en charge Nuget.

A ce stade, nous avons deux possibilités : soit nous créons un dépôt spécifique de notre package avec sa propre source, soit nous le référençons comme un dépôt officiel Nuget.

Pour cet article, nous verrons uniquement comment définir un dépôt spécifique de notre projet.

Nous allons tout d’abord dans un premier temps copier notre package dans un dossier local (pour une utilisation par exemple uniquement en local dans vos projets et par votre équipe de développeurs) ou sur un serveur distant.

Et c’est tout ;). Pour toute utilisation du package dans un projet avec Visual Studio, il suffira simplement de renseigner la source en procèdent comme suit : lancez Visual Studio, allez dans les options de l’EDI, dans la catégorie « Package Manager », ajoutez l’adresse de votre projet à la liste.

Validez ensuite sur OK.

Pour utiliser votre package, lancez la fenêtre d’administrations de Nuget en faisant simplement un clic droit sur votre projet/solution, et en sélectionnant la commande Manage Nuget Packages.

Sélectionnez ensuite Online Package, et cliquez sur le nom de la source que vous avez donné à votre package.

Et voilà, désormais l’installation, la suppression et la mise à jour du package au sein de votre projet via Nuget sera un jeu d’enfant.

Références :

– Télécharger Nuget.exe.

– La documentation officielle.