Le Web évolue rapidement, et Microsoft est conscient de cela. L’éditeur a ainsi adopté un cycle de mise à jour pour ASP.NET plus rapide que celui de Visual Studio.

La société compte donc publier une mise à jour pour sa plateforme de développement Web ASP.NET en début d’année prochaine.

Les développeurs qui veulent commencer à « jouer » avec les nouvelles fonctionnalités de cette mise à jour peuvent déjà télécharger sa version Release Candidate (RC) qui vient d’être publiée par les équipes ASP.NET et Visual Web Developer de Microsoft.

« ASP.NET et Web Tools 2012.2 » RC étend le runtine ASP.NET existant et ajout de nouveaux outils Web à Visual Studio 2012 pour WebForms, MVC, WebAPI, etc. Il s’agit des fonctionnalités suivantes :

1. De nouveaux modèles de projets ASP.NET MVC. la création d’applications Facebook est désormais plus facile avec le modèle Facebook, qui permet en quelques étapes de créer une application qui interagir avec le réseau social. Le nouveau modèle « Single Page Application » permet aux développeurs de créer des applications Web interactives côté client à l’aide de jQuery, Knockout et ASP.NET Web API ;
2. Le support de la communication en temps réel avec ASP.NET SignalR. SignalR est une bibliothèque client/serveur qui permet aux clients basés sur un navigateur et aux composants serveur basés sur ASP.NET d’avoir une conversation à étapes multiples et bidirectionnelle;
3. Le support de l’IntelliSense pour Knockout et l’ajout de la prise en charge de JSON en tant que classe ;
4. L’introduction de nouvelles fonctionnalités pour ASP.NET Web API, y compris le support d’OData, l’ajout des fonctions de traçabilité, de monitoring et de génération d’une page d’aide pour une API Web;
5. Des améliorations de l’inspecteur de page, qui offre désormais de meilleures performances pour JavaScript et CSS, dont la capacité de voir les mises à jour en temps réel d’un fichier CSS ;
6. L’unification de l’expérience de publication pour une application Web et un projet de type site Web, ainsi que l’ajout des options de publication sélective ;
7. L’intégration de la nouvelle fonctionnalité ASP.NET Friendly URL. Cette fonction rend facile la génération des URL sans l’extension .aspx. Elle permet également au développeur d’ajouter plus facilement le support du mobile dans son application Web ;
8. La mise à jour des modèles de projets Web dans Visual Studio 2012.

Cette mise à jour est livrée comme des packages NuGet supplémentaires. Ce qui signifie qu’il ne peut avoir aucun problème de compatibilité avec les projets existants.

Télécharger « ASP.NET et Web Tools 2012.2″ RC

Pour optimiser le temps le chargement d’une page, on peut avoir recours à plusieurs techniques côté client et côté serveur dont la mise en cache, l’utilisation d’un CDN ou encore la compression et la minification du CSS et JavaScript.

Dans ce billet de blog, je vais montrer comment vous pouvez grandement améliorer le temps de chargement des pages de votre site Web en minifiant et en regroupant vos fichiers JavaScript et CSS grâce à la bibliothèque ASP. NET Optimization – Bundling.

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.

Pour commencer, vous allez créer une nouvelle application ASP.NET WebPages avec WebMatrix en utilisant le modèle de projet Starter Site.

Comme l’illustre l’image ci-dessous, vous constatez que votre application contient par défaut un nombre déjà assez important de fichiers JavaScript et CSS.

Si vous exécutez votre application et que vous analysez les performances de votre page d’index avec un outil comme Yslow, vous obtenez le résultat suivant :

Ajout de la bibliothèque ASP.NET Optimization – Bundling

WebMatrix 2 apporte comme nouveauté phare l’intégration du gestionnaire de packages open source .NET NuGet. Dans la boite à outil de l’EDI, une nouvelle icone NuGet est disponible, permettant d’accéder à l’interface des gestions des packages de votre application. Cliquez sur ce bouton.

L’interface de gestion des packages de NuGet s’affiche. Pour plus de détail sur son utilisation, lire mon article sur l’intégration du gestionnaire d’extensions et de NuGet dans WebMatrix 2.

Dans la zone de recherche, tapez le nom de la bibliothèque « Microsoft.Web.Optimization », sélectionnez le package ASP.NET Optimization – Bundling, et cliquez sur Installer.

La fenêtre contenant les termes de la licence va s’afficher. Cliquez sur j’accepte pour lancer l’installation du package dans votre application. A la fin de l’installation, si vous ouvrez le dossier Bin de votre application, vous verrez la présence d’un nouveau fichier Microsoft.Web.Optimization.dll.

Activation du Bundling

Grâce à NuGet, nous avons intégré sans difficulté la bibliothèque dont nous avons besoins dans notre application. Voyons maintenant comment nous pouvons activer le regroupement et la minification du CSS et JavaScript.

Pour cela, ouvrez le fichier _AppStart.cshtml et inserez la ligne de code suivant :

BundleTable.Bundles.EnableDefaultBundles();

N’oubliez pas d’ajouter une référence à Microsoft.Web.Optimization.

@using Microsoft.Web.Optimization

Tous les fichiers JavaScript contenus dans le répertoire Scripts (les sous dossiers ne sont pas pris en compte) de votre application seront regroupés, compressés et traités comme un seul fichier. Ces fichiers seront regroupés par défaut dans un dossier Scripts. Ils seront désormais référencés en utilisant la ligne de code suivante :

<script src="~/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="/Content/css" rel="stylesheet" type="text/css" />

Après avoir appliqué ces modifications, exécutez à nouveau votre application. Vous allez obtenir le résultat suivant :

En comparant les deux images, vous vous rendez compte que le nombre de requêtes HTTP sur votre page est passé de 30 à 10. Les cinq fichiers JavaScript ont été regroupés en 1 fichier et les 16 feuilles de styles ont été combinés en 1 fichier.

De même, la taille des fichiers JavaScript est passée de 558,9 Ko à 375,1 Ko. C’est déjà pas mal. Mais, on aurait pu faire mieux, car plusieurs fichiers dans le dossier Scripts qui ont été regroupés n’ont pas été utilisés. C’est à ce niveau qu’intervient le Bundle personnalisé.

Bundle personnalisé

Avec cette option, vous avez 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.
Vous pouvez définir vos regroupements personnalisés en procédant comme suit dans le fichier_çAppStart.cshtml.

BundleTable.Bundles.EnableDefaultBundles();
 
    var jsBundle = new Bundle("~/Scripts", typeof(JsMinify));
    
    jsBundle.AddFile("~/Scripts/jquery-1.6.2.min.js");
    jsBundle.AddFile("~/Scripts/jquery-ui-1.8.11.js");
    jsBundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js");
   
 
    BundleTable.Bundles.Add(jsBundle);
 
    Bundle cssBundle = new Bundle("~/Styles", typeof(CssMinify));
    cssBundle.AddFile("~/content/site.css");
    cssBundle.AddFile("~/content/themes/base/jquery.ui.all.css");
 
    BundleTable.Bundles.Add(cssBundle); 

Vous allez désormais référencer ces regroupements dans votre page comme suit :

<link href="~/Styles" rel="stylesheet" type="text/css" />
<script src="~/Scripts" type="text/javascript"></script>  

En exécutant la page précédente de votre application, vous obtenez le résultat suivant :

Et voilà, la taille de vos fichiers JavaScript passe de 558,9K à 5,7K, soit un taux de compression de près de 98 %.
Vous pouvez également ajouter à votre regroupement tous les fichiers JavaScript d’un répertoire précis en procédant comme suit :

Et voilà, vous pouvez désormais améliorer assez simplement le temps de chargement des pages de votre application JavaScript grâce à la bibliothèque ASP. NET Optimization – Bundling.

Pour rappel, WebMatrix est un environnement de développement Web léger « tout-en-un », robuste et surtout gratuit, développé par Microsoft.

Cette mouture qui marque une étape importante dans le cycle de développement de l’EDI s’aligne avec la vision de Microsoft : fédérer l’ensemble de la pile Web et des outils dont les développeurs ont besoin pour créer des applications Web au sein d’un outil.

WebMatrix 2 RC s’arrime au développement mobile en proposant des outils permettant de mettre sur pied facilement des applications Web Mobiles. Les modèles pour ASP.NET, Node.js et PHP ont été mis à jour pour être plus mieux adaptés pour un affichage sur les terminaux mobiles. Le rendu des vus spécifiques en fonction des dispositifs (Tablette, iPhone, Windows Phone, etc..) est désormais possible.

L’EDI dispose par défaut des émulateurs allégés pour Windows Phone, iPad et iPhone, permettant d’avoir un aperçu rapide du fonctionnement de son site Web sur ces dispositifs. Des travaux sont en cours pour intégrer encore plus d’émulateurs.

Le support de JQuery Mobile est également au rendez-vous (auto-complexion, etc.). Plusieurs modèles de projets mobiles reposent sur la bibliothèque JavaScript.

La complexion de code pour HTML5, CSS3, JQuery est au menu. L’EDI repose sur la version 2 de WebPages qui dispose d’un nombre assez intéressant d’améliorations par rapport à la version 1. Le support de Node.js est également au centre de la RC de WebMatrix 2, qui propose de nouveaux modèles de projets, l’IntelliSense pour Node.js et la coloration de code pour Jade/EJS.

WebMatrix 2 RC offre un support encore plus étroit de Windows Azure, la plateforme Cloud de Microsoft.

WebMatrix 2 RC dispose d’un nombre assez impressionnant de nouvelles fonctionnalités par rapport à la bêta. Je viens à peine de commencer à jouer avec ces nouveautés, et je peux dire que je suis déjà assez impressionné et captivé par cet EDI que j’ai adopté depuis la sortie de la première version.
Je reviendrais sur certains de mes billets de blog sur les nouveautés qui auront le plus attiré mon attention au fur et à mesure que je découvrir cette RC de WebMatrix 2.

– Télécharger WebMatrix 2 RC

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

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

Cette partie portera sur la création du DbContext, la définition de la chaine de connexion dans le fichier Web.Config, la création de la base de données à partir du modèle objet et afin la définition du Repository qui sera utilisé.

Création du DBContex

Nous allons maintenant créer la classe qui va s’occuper de gérer la communication entre les classes entités et la base de données. Cette classe va hériter de la classe DbContext.

La classe DbContext expose les fonctionnalités les plus couramment utilisées pour interroger et puis utiliser les données d’entité en tant qu’objet.

Vous allez ajouter au dossier App_Code un nouveau fichier de classe ayant pour nom « WebMatrixCrudApp.Context.cs ».

Dans ce fichier, vous allez ajouter une nouvelle classe « WebMatrixCrudAppContext » qui hérite de DbContext.

Cette classe doit contenir trois attributs DbSet fortement typés correspondants à vos différentes entités. Les attributs DbSet vont permettre de gérer la correspondance avec les tables de la base de données.

Dans ce fichier, vous aurez le code suivant :

using System;
using System.Data.Entity;

/// <summary>
/// Summary description for ClassName
/// </summary>
public class WebMatrixCrudAppContext : DbContext 
{
    public DbSet<Personne> Personnes { get; set; }
    public DbSet<Organisme> Organismes {get; set; }
    public DbSet<Affiliation> Affiliations {get; set; }
    
}

La prochaine étape sera l’ajout de la chaine de connexion pour le mode Code First d’Entity Framework dans le fichier Web.config.

Pour cela, doublez cliquez sur le fichier Web.config dans l’explorateur de solution et ajoutez les lignes de code suivantes à celui-ci :

connectionStrings>
        <add name="WebMatrixCrudAppContext" connectionString="Data Source=|DataDirectory|WebMatrixCrudApp.sdf" 
             providerName="System.Data.SqlServerCe.4.0" />
    </connectionStrings>

Le nom de la chaîne de connexion doit être celui de votre classe DbContext (WebMatrixCrudAppContext)

Le fichier XML de configuration de votre application doit ressembler à ceci :

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <compilation>
      <assemblies>
        <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
      <add assembly="System.ComponentModel.DataAnnotations, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /></assemblies>
    </compilation>
  </system.web>
    <connectionStrings>
        <add name="WebMatrixCrudAppContext" connectionString="Data Source=|DataDirectory|WebMatrixCrudApp.sdf" 
             providerName="System.Data.SqlServerCe.4.0" />
    </connectionStrings>
</configuration>

Procédez à l’exécution de votre application en cliquant sur le bouton « Run » et sélectionnez le navigateur de votre choix dans la boite d’outils.

La base de données SQL Server Compact « WebMatrixCrudApp.sdf » sera automatiquement créée dans le dossier App_data de votre application.

En sélectionnant l’espace de données Databases, vous pouvez constater qu’une nouvelle base de données a été ajoutée à votre application.

En observant cette base de données, vous vous rendez compte que les tables qui ont été créées correspondent aux propriétés DbSet de la classe WebMatrixCrudAppContext.
On remarque également que la taille des colonnes Nom et Prenom par exemple de la table Personnes est la même que celle que vous avez défini dans la classe Personne avec l’attribut [MaxLengthAttribute(50)]

En sélectionnant la table Affiliations et en cliquant sur la commande View de la zone Relationships, vous constatez également que les relations de clés étrangères qui ont été définies pour la classe Affiliation ont été créées.

En cliquant par exemple sur la relation Affiliation_Organisme, vous obtenez le résultat suivant :

Une table supplémentaire EdmMataData a été ajoutée dans votre base de données. Cette table permet à Entity Framework Code First de savoir si le modèle utilisé pour créer une base de données est le même que celui qui est utilisé pour accéder à cette base de données (avec la version 4.3 d’EF cette table n’est plus créée).

Dans le cas au vous apportez des modifications à votre modèle objet, lors de l’exécution de l’application une exception sera levée.

Pour corriger cela, vous allez ajouter les lignes de code suivantes dans le fichier _AppStart qui se trouve à la racine de votre application :

@using DB = System.Data.Entity;
@{
  
    DB.Database.SetInitializer(new DB.DropCreateDatabaseIfModelChanges<WebMatrixCrudAppContext>());
}

En cas de modification du modèle objet lors de l’exécution de l’application, ces lignes de code vont permettre de régénérer la base de données qui correspondra au nouveau modèle.

Attention, la base de données sera recréée à nouveau, donc toutes les données présentes dans celle-ci seront perdues.

Création d’un Repository

Les bonnes pratiques de développement avec Entity Framework recommandent l’utilisation d’un Repository pour les opérations CRUD. Le Repository permet de créer une couche d’abstraction entre la couche d’accès aux données et la logique métier de l’application, et éviter ainsi une dépendance entre la base de données et la logique métier.

Le code du Repository permettant d’effectuer des opérations CRUD sur l’entité Personne est le suivant :

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Web;

/// <summary>
/// Summary description for ClassName
/// </summary>
public class PersonneRepository
{
    private WebMatrixCrudAppContext _context = new WebMatrixCrudAppContext();

    public Personne Find(int id)
    {
        return _context.Personnes.Find(id);
    }

    public List<Personne> GetAll()
    {
       return _context.Personnes.ToList();

    } 

    public void Add(Personne personne)

    {
        _context.Personnes.Add(personne);
       _context.SaveChanges();
    }

    public void Delette(Personne  personne)
    {
       _context.Personnes.Remove(personne);
       _context.SaveChanges();
    }
    public void Update(Personne personne)
    {
      _context.Entry(personne).State = EntityState.Modified;
      _context.SaveChanges();
    
    }

    public void Remove(Personne personne)
    {
      _context.Personnes.Remove(personne);
      _context.SaveChanges();
    }
}

Ce code doit être ajouté dans un fichier PersonneRepository.cs dans le dossier App_Code. Créez de même les Repository pour les entités Organisme et Affiliation respectivement dans les fichiers OrganismeRepository.cs et AffiliationRepository.cs.
La fonction Find() pour AffiliationRepository doit prendre deux valeurs en paramètre. Le code doit ressembler à ceci :

public Affiliation Find(int personneId, int organismeId)
    {
        return _context.Affiliations.Find(personneId, organismeId);
    }

La partie suivante portera sur l’implémentation des fonctionnalités CRUD pour nos différentes tables.

– 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

– Part 4 : implémentation des fonctionnalités CRUD

Dans cette cinquième et dernière partie de notre tutoriel sur la création d’une application CRUD avec WebMatrix, Razor et Entity Framework, nous verrons comment implémenter les interfaces Web pour la lecture, la modification, la suppression et l’enregistrement des données pour une table associative.

La table Affiliations étant une table association, quelques modifications seront donc nécessaires au code utilisé pour Personne et Organisme.

1 – Implémentation de la grille

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

Dans ce fichier, ajoutez les lignes de code suivantes, qui vont permettre d’afficher dans cette page la liste des affiliations qui ont été enregistrées dans la base de données :

@{
    /// Définition du layout et du titre de la page
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Gestion des organismes";
    //déclaration des variables
    var af = new AffiliationRepository();
   //déclaration de la grille
    var grid = new WebGrid(af.GetAll(),rowsPerPage : 10);
                  
}    
<hgroup class="title">
    <h1>Affiliations.</h1>
</hgroup>  

<p><a href="Create">Ajouter un nouvel enregistrement</a></p>
    @* formatage et affichage de la grille *@
        @grid.GetHtml(tableStyle:"grid",
        headerStyle:"head",
        alternatingRowStyle: "altrow",
            columns: grid.Columns(
                grid.Column("Personne.Nom","Employé"),
                grid.Column("Organisme.Nom","Organisme"),
                grid.Column("Fonction", "Fonction"),
                grid.Column("Telephone", "Téléphone"),

                grid.Column("", "", format: @<text><a href="Edit?organismeId=@item.OrganismeId&personneId=@item.PersonneId")>Editer</a>
                        | <a href="Details?organismeId=@item.OrganismeId&personneId=@item.PersonneId")>Détails</a>
                        | <a href="Delete?organismeId=@item.OrganismeId&personneId=@item.PersonneId")>Supprimer</a></text>)
                    )
        
        )

Vous remarquez certainement pour les colonnes Employé et Organisme, l’affichage des propriétés Personne.Nom et Organisme.Nom. En effet, lors de la définition de l’entité Affiliation, vous avez défini les classes Personne et Organisme comme propriétés de l’entité. Cela permet à Entity Framework de charger automatiquement dans ces propriétés les données correspondantes aux clés étrangères dans la table Affiliations.

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

2 – Affichage détaillé

Dans la page précédente, certaines informations comme l’adresse email n’ont pas été affichées dans la grille. Pour visualiser ces données, une page d’affichage détaillé doit être ajoutée à l’application.

Pour ajouter cette page, faites un clic droit sur le dossier Affiliation, sélectionnez l’option New File et créez un nouveau fichier Detail.cshtml.

Dans ce fichier, vous allez ajouter les lignes de code suivantes :

@{
    
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Détails";
   //Recupération des Id
    int personneId = Request["personneId"].AsInt();
    int organismeId = Request["organismeId"].AsInt();
    //Déclaration des variables
    var af = new AffiliationRepository();
    var affiliation = new Affiliation();
    //Selection de l'élément correspondant aux Id
   affiliation = af.Find(personneId, organismeId);
                  
}    
<hgroup class="title">
    <h1>Détails.</h1>
</hgroup>  
 <fieldset>
        <legend></legend>
        <ol>
            <li class="employe">
                <label>Employé:</label>
                <label>@affiliation.Personne.Prenom @affiliation.Personne.Nom</label>
            </li>
            
            <li class="organisme">
                <label>Organisme:</label>
                <label>@affiliation.Organisme.Nom</label>
            </li>
            <li class="fonction">
                <label>Fonction:</label>
                <label>@affiliation.Fonction</label>
            </li>
            <li class="email">
                <label>Adresse mail:</label>
                <label>@affiliation.Email</label>
            </li>
            <li class="telephone">
                <label>Téléphone:</label>
                <label>@affiliation.Telephone</label>
            </li>
        </ol> 
    </fieldset>

<p><a href="Edit?organismeId=@affiliation.OrganismeId&personneId=@affiliation.PersonneId">Editer</a> |
 <a href="Index">Retour à la liste</a>
</p>

A l’exécution, vous obtiendrez le résultat suivant :

3 – Enregistrement

Compte tenu du fait que Affiliations est une table association, vous allez dans un premier temps charger dans des listes déroulantes les noms des personnes et des organismes.

Pour cela, dans le fichier Create.cshtml que vous avez ajouté au dossier Affiliation, vous allez insérer les lignes de code suivantes :

    var pr = new PersonneRepository();
    var og = new OrganismeRepository();
   
    var personnes = new List<Personne>();
    var organismes = new List<Organisme>();

    personnes = pr.GetAll();
    organismes = og.GetAll();

Une boucle foreach sera utilisée pour charger les données dans une liste déroulante HTML. Le code pour effectuer cela est le suivant :

<select id="personneId" name="personneId">
                    @foreach(var p in personnes){
                    <option value="@p.PersonneId">@p.Nom</option>
                    }
                </select>

En plus de la validation des champs, une vérification doit être effectuée pour éviter les contraintes de validation des clés. Le code pour cela est le suivant :

if (db.Affiliations.Find(personneId, organismeId) != null)
            { 
                
                //Ajout d'un message d'erreur si les Id existent déjà dans la table affiliations
                 ModelState.AddError("personneId","Cet enregistrement existe déjà dans la base de données");
            }

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 = "Enregistrement d'un organisme";

    // initialisation des variables
    var fonction = "";
    var email = "";
    var telephone = "";
    //Lecture des données sur les personnes et les organismes
    var pr = new PersonneRepository();
    var og = new OrganismeRepository();
    var af = new AffiliationRepository();

   
    var personnes = new List<Personne>();
    var organismes = new List<Organisme>();

    personnes = pr.GetAll();
    organismes = og.GetAll(); 


     // 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 de la fonction
    Validation.RequireField("fonction", "La fonction est obligatoire.");
    
   
    if (IsPost) {
        int personneId = Request.Form["personneId"].AsInt();
        int organismeId = Request.Form["organismeId"].AsInt();
        fonction = Request.Form["fonction"];
        email = Request.Form["email"];
        telephone = Request.Form["telephone"];
        
        if (af.Find(personneId, organismeId) != null)
            { 
                
                //Ajout d'un message d'erreur si les Id exitent déjà dans la table affiliations
                 ModelState.AddError("personneId","Cet enregistrement existe déjà dans la base de données");
            }
  
        
        if (Validation.IsValid()) { 
              
            if(ModelState.IsValid) {   
                 var affiliation = new Affiliation{
                PersonneId = personneId, OrganismeId = organismeId, Fonction = fonction, Email = email, Telephone = telephone };
           
                 af.Add(affiliation);
   
                 Response.Redirect("Index");
             }
             }

    };
   
                  
        }    
   

<hgroup class="title">
    <h2>Enregistrement d'une affiliation</h2>
</hgroup>

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

    <fieldset>
        <legend>Formlaire </legend>
        <ol>
            <li class="personneId">
                <label for="personneId" >Employé:</label>
                <select id="personneId" name="personneId">
                    @foreach(var p in personnes){
                    <option value="@p.PersonneId">@p.Nom</option>
                    }
                </select>
            </li>
            
             <li class="organismeId">
                <label for="organismeId" >Organisme:</label>
                <select id="organismeId" name="organismeId">
                    @foreach(var o in organismes){
                    <option value="@o.OrganismeId">@o.Nom</option>
                    }
                </select>
            </li>
            
            <li class="fonction">
                <label for="fonction" @if(!ModelState.IsValidField("fonction")){<text>class="error-label"</text>}>Fonction:</label>
                <input type="text" id="fonction" name="fonction" title="Fonction" value="@fonction" @Validation.GetHtml("fonction") />
                @Html.ValidationMessage("fonction")
            </li>
            <li class="email">
                <label for="email">Adresse mail:</label>
                <input type="text" id="email" name="email" title="Email" value="@email" />
             
            </li>
            <li class="telephone">
                <label for="telephone">Numéro de téléphone:</label>
                <input type="text" id="telephone" name="telephone" title="Téléphone" value="@telephone" />
                
            </li>
        </ol>
        <input type="submit" value="Enregistrer" title="Enregistrer" />
        
    </fieldset>
</form>
<a href="Index">Retour à la liste</a>

A l’exécution, vous obtenez le résultat suivant :

4 – Modification

Penchons-nous maintenant sur la page permettant de modifier les informations d’une affiliation. Une nouvelle page Edit.cshtml doit être ajoutée dans le dossier Affiliation.

Dans cette page, vous allez dans un premier temps écrire le code permettant de retourner les informations sur la ligne qui doit être modifiée :

int personneId = Request["personneId"].AsInt();
   int organismeId = Request["organismeId"].AsInt();

   // initialisation des variables
   var af = new AffiliationRepository();
   var affiliation = new Affiliation();
   affiliation = af.Find(personneId, organismeId);

   var fonction = affiliation.Fonction;
   var email = affiliation.Email;
   var telephone = affiliation.Telephone;

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

affiliation.Fonction = fonction;
affiliation.Email = email;
affiliation.Telephone = telephone;
//Modification de l'affiliation
af.Update(affiliation);

Le code complet pour cette page est le suivant :

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

   
    int personneId = Request["personneId"].AsInt();
    int organismeId = Request["organismeId"].AsInt();

    // initialisation des variables
    var af = new AffiliationRepository();
    var affiliation = new Affiliation();

    affiliation = af.Find(personneId, organismeId);

    var fonction = affiliation.Fonction;
    var email = affiliation.Email;
    var telephone = affiliation.Telephone;
   
    // 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 de la fonction
    Validation.RequireField("fonction", "La fonction est obligatoire.");
   

    if (IsPost) {
        fonction = Request.Form["fonction"];
        email = Request.Form["email"];
        telephone = Request.Form["telephone"];
        
          if (Validation.IsValid()) { 
                
                 affiliation.Fonction = fonction;
                 affiliation.Email = email;
                 affiliation.Telephone = telephone;
                 //Modification de l'affiliation
                 af.Update(affiliation);

                 Response.Redirect("Index");
                
             }
    };
   
                  
        }    
   

<hgroup class="title">
    <h2>Modification.</h2>
</hgroup>

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

    <fieldset>
        <legend></legend>
        <ol>
             <li class="employe">
                <label>Employé:</label>
                <label>@affiliation.Personne.Prenom @affiliation.Personne.Nom</label>
            </li>
            
            <li class="organisme">
                <label>Organisme:</label>
                <label>@affiliation.Organisme.Nom</label>
            </li>
            
            <li class="fonction">
                <label for="fonction" @if(!ModelState.IsValidField("fonction")){<text>class="error-label"</text>}>Fonction:</label>
                <input type="text" id="fonction" name="fonction" title="Fonction" value="@fonction" @Validation.GetHtml("fonction") />
                @* Write any email validation errors to the page *@
                @Html.ValidationMessage("fonction")
            </li>
            <li class="email">
                <label for="email">Adresse mail:</label>
                <input type="text" id="email" name="email" title="Email" value="@email" />
             
            </li>
            <li class="telephone">
                <label for="telephone">Numéro de téléphone:</label>
                <input type="text" id="telephone" name="telephone" title="Téléphone" value="@telephone" />
                
            </li>
        </ol>
        <input type="submit" value="Modifier" title="Edit" />
        
    </fieldset>
</form>
<a href="Index">Retour à la liste</a>

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

5 – Suppression

Enfin, pour finir avec cette table, vous allez créer la page Delete.cshtml dans le dossier Affiliation.

Le code source de cette page n’a rien de particulier et reprend les principes qui ont été utilisés pour implémenter la page de suppression pour la table Personnes.

Le code complet pour cette page est le suivant :

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

    int personneId = Request["personneId"].AsInt();
    int organismeId = Request["organismeId"].AsInt();

    var af = new AffiliationRepository();
    var affiliation = new Affiliation();
    //Recherche de l'affiliation à supprimerf
    affiliation = af.Find(personneId, organismeId);

    if(IsPost)
    {
            //Supression de l'enregistrement
            af.Remove(affiliation);
            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="employe">
                <label>Employé:</label>
                <label>@affiliation.Personne.Prenom @affiliation.Personne.Nom</label>
            </li>
            
            <li class="organisme">
                <label>Organisme:</label>
                <label>@affiliation.Organisme.Nom</label>
            </li>
            <li class="fonction">
                <label>Fonction:</label>
                <label>@affiliation.Fonction</label>
            </li>
            <li class="email">
                <label>Adresse mail:</label>
                <label>@affiliation.Email</label>
            </li>
            <li class="telephone">
                <label>Téléphone:</label>
                <label>@affiliation.Telephone</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>

Il permet d’obtenir le résultat suivant à l’exécution :

Conclusion

Entity Framework, la technologie d’accès aux données qui est en passe de devenir un standard dans l’écosystème .NET peut être assez facilement exploitée avec WebMatrix pour la création d’applications Web robustes. Bien que l’éditeur WebMatrix manque beaucoup de fonctionnalités et d’extensions qui sont disponibles dans Visual Studio, comme l’échafaudage pour développer rapidement et facilement des applications utilisant Entity Framework, il permet néanmoins au développeur d’exploiter quasiment toutes les fonctionnalités de la librairie et supporte l’IntelliSence pour celle-ci.

Ce tutoriel nous a permis de concevoir bout-à-bout une petite solution complète de gestion des affiliations en utilisant Entity Framework, WebMatrix, Razor, NuGet et SQL Server Compact Edition et nous familiariser avec tous ces outils qui sont assez utilisés dans l’environnement .NET.

Vous pouvez donc vous baser sur cet exemple ou en modifier le code à votre guise pour développer votre propre application répondant à vos besoins fonctionnels avec WebMatrix.

Sources

Vous pouvez télécharger et modifier les sources ci-dessous à votre convenance.

Version RAR

Version ZIP

Dans la première partie introductive, nous avons présenté le but de cet article et les différents outils qui seront utilisés pour l’implémentation de notre application CRUD.

Cette seconde partie portera essentiellement sur la création de l’application avec WebMatrix, l’installation d’Entity Framework à partir de NuGet et la définition du modèle objet.

Création de l’application

Maintenant que nous nous sommes familiarisés avec les différents outils que nous allons utiliser, nous pouvons maintenant procéder à la création de notre application.
Pour cela, vous allez lancer WebMatrix. Dans la fenêtre de démariage rapide, vous allez sélectionner Modèles (Templates) parmi les différentes options qui sont proposées.

Dans la fenêtre qui va s’afficher, sélectionnez le modèle de projet Site de démarrage (Starter Site), renseignez le nom du site (WebMatrixCRUDApp) et cliquez enfin pour le bouton OK.

Le modèle Site de démarrage contient par défaut une interface à onglet et des fonctionnalités d’authentification.

Une fois le projet créé, vous pouvez voir les éléments suivants dans la fenêtre d’exploration, en sélectionnant l’espace de travail Files dans la zone de sélection d’espace de travail.

Installation d’Entity Framework

Dans la boite d’outils, vous allez cliquer sur le bouton « Gallery » ayant le logo de NuGet. Dans la fenêtre des packages qui s’affichent par défaut, sélectionnez le package Entity Framework comme l’illustre l’image ci-dessous :

La fenêtre du gestionnaire de packages NuGet s’affiche avec les détails sur le package que vous souhaitez installer.
Cliquez sur le bouton « Install » et acceptez les termes d’utilisation pour que NuGet procède au téléchargement et à l’installation d’Entity Framework dans votre application :

Le fichier EntityFramework.dll sera alors ajouté dans le dossier bin de votre application et une référence à l’espace de nom System.Data.Entity sera automatiquement ajoutée au fichier Web.config.

Définition du modèle objet

Notre exemple simple portera sur une petite application pour la gestion du carnet d’adresses d’une entreprise. L’entreprise contient plusieurs organismes et un employé peut travailler dans un ou plusieurs organismes.

Le schéma de la base de données que nous allons utiliser est donc le suivant :

De ce schéma, nous allons créer les différentes entités correspondantes. Chaque entité doit être définie comme une classe C# afin d’être compréhensible par Entity Framework.

Vous allez créer un nouveau dossier « App_code » en faisant un clic droit sur votre projet dans l’explorateur de solution et en cliquant sur « New Folder ».

Sélectionnez ce dossier et ajoutez-y un nouveau fichier C# en cliquant sur le bouton « New » de la boite d’outils et ensuite sur la commande « New File ».

Dans la fenêtre qui va s’afficher, sélectionnez le type de fichier Class(C#), renseignez le nom du fichier (Personne.cs) et validez sur OK.

Ajoutez par la suite les lignes de code suivantes dans ce fichier pour définir la classe Personne.

public partial class Personne
{
    
    public int PersonneId { get; set;}
    public string Nom {get; set;}
    public string Prenom {get; set;}

}

Procédez de même pour le fichier Organisme.cs, dont la classe aura la définition suivante :

public partial class Organisme
{
   
    public int OrganismeId { get; set;}
    public string Nom {get; set;}
    public string Adresse {get; set;}
    public string Telephone {get; set;}
}

Créez également la classe Affiliation qui aura la définition suivante :

public partial class Affiliation
{   
    public int PersonneId { get; set;}
    public int OrganismeId { get; set;}
    public string Fonction {get; set;}
    public string Email {get; set;}
    public string Telephone {get; set;}
}

À ce stade, vous avez simplement défini des entités correspondantes au schéma de votre base de données. Cependant, Entity Framework est incapable de définir les relations entre les tables Presonne et Affilialtion, ainsi qu’entre les tables Organisme et Affiliation.

Pour matérialiser cela, vous allez donc ajouter une propriété Personne et une propriété Organisme dans la classe Affiliation. La nouvelle définition de cette classe est la suivante :

public partial class Affiliation
{
   
   public int PersonneId { get; set;}
   public int OrganismeId { get; set;}
   public string Fonction {get; set;}
   public string Email {get; set;}
   public string Telephone {get; set;}

   public virtual Personne Personne {get; set;}
   public virtual Organisme Organisme {get; set;}
}

De même, pour matérialiser le fait qu’une Personne peut avoir plusieurs affiliations dans divers organismes et le fait qu’un organisme dispose de plusieurs personnes affiliées, vous allez ajouter également une propriété supplémentaire dans chacune de ces deux tables.

La nouvelle définition de la classe Personne sera donc la suivante :

public partial class Personne
{
    
    public int PersonneId { get; set;}
    public string Nom {get; set;}
    public string Prenom {get; set;}

    public virtual ICollection<Affiliation> Affiliation {get; set;}
}

Et celle de la classe Organisme sera la suivante :

public partial class Organisme
{
   
    public int OrganismeId { get; set;}
    public string Nom {get; set;}
    public string Adresse {get; set;}
    public string Telephone {get; set;}

    public virtual ICollection<Affiliation> Affiliation {get; set;}

}

Par défaut, lors de la génération de la base de données correspondante à votre modèle objet, les champs string seront définis par Entity Framework Code First comme des colonnes nvarchar(4000). Pour limiter cette taille, vous allez utiliser l’attribut [MaxLengthAttribute()] de la classe DataAnnotation.

L’attribut [RequiredAttribute] de cette classe sera également utilisé pour définir les propriétés dont les valeurs sont obligatoires. [ScaffoldColumnAttribute] sera utilisé pour spécifier que la clé primaire doit être autoincrément. Enfin, vous allez définir l’attribut [KeyAttribute] pour spécifier les clés étrangères et les tables auxquelles ces clés sont liées.

Le code complet du fichier Personne.cs sera donc le suivant :

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web;

/// <summary>
/// Summary description for ClassName
/// </summary>
public partial class Personne
{
    [ScaffoldColumnAttribute(false)]
    public int PersonneId { get; set;}
    [MaxLengthAttribute(50)]
    [RequiredAttribute]
    public string Nom {get; set;}
    [MaxLengthAttribute(50)]
    [RequiredAttribute]
    public string Prenom {get; set;}

    public virtual ICollection<Affiliation> Affiliation {get; set;}

}

Celui du fichier Organisme.cs est le suivant :

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web;

/// <summary>
/// Summary description for ClassName
/// </summary>
public partial class Organisme
{
   [ScaffoldColumnAttribute(false)]
    public int OrganismeId { get; set;}
    [MaxLengthAttribute(50)]
    [RequiredAttribute]
    public string Nom {get; set;}
    [MaxLengthAttribute(50)]
    [RequiredAttribute]
    public string Adresse {get; set;}
    [MaxLengthAttribute(50)]
    public string Telephone {get; set;}

     public virtual ICollection<Affiliation> Affiliation {get; set;}
}

Et enfin, la nouvelle définition du fichier Affiliation.cs est la suivante :

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web;

/// <summary>
/// Summary description for ClassName
/// </summary>
public partial class Affiliation
{   
    [KeyAttribute, ForeignKey("Personne"), Column(Order = 0)]
    public int PersonneId { get; set;}
    [KeyAttribute, ForeignKey("Organisme"), Column(Order = 1)]
    public int OrganismeId { get; set;}
    [MaxLengthAttribute(50)]
    [RequiredAttribute]
    public string Fonction {get; set;}
    [MaxLengthAttribute(50)]
    public string Email {get; set;}
    [MaxLengthAttribute(50)]
    public string Telephone {get; set;}

    public virtual Personne Personne {get; set;}
    public virtual Organisme Organisme {get; set;}
}

La troisième partie portera sur la création du DbContext, de la base de données à partir du modèle objet avec EF Code First et enfin la définition des différentes classes Repository qui seront utilisées.

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 .

Dans les applications ASP.NET et ASP.NET MVC, plusieurs ressources sont disponibles permettant de mettre en place assez aisément la validation des données utilisateur dans son application Web. Avec la première version de WebMatrix et WebPages, la validation des données se faisait uniquement en utilisant la classe System.Web.WebPages.Html.ModelState.

La bêta de WebMatrix 2 apporte de nouveaux outils, permettant d’implémenter assez aisément la validation des données côté client et améliorer ainsi les performances de son application web en réduisant les allers-retours vers le serveur.

Les nouvelles classes de validation System.Web.WebPages.ValidationHelper et System.Web.WebPages.Validator ont donc été introduites afin d’effectuer en seulement quelques lignes de code, des taches de validation de données puissantes avec JQuery.

Nous verrons dans cet article comment utiliser ces classes pour mettre en œuvre un mécanisme de validation des données fluide dans son application Web ASP.NET avec WebMatrix.

Pour cela, nous allons démarrer notre EDI WebMatrix 2 bêta et ouvrir le modèle de projet « Starter Site ». Nous allons ensuite cliquer sur « File » dans la zone de sélection d’espace de travail.

En déroulant l’explorateur de fichier, vous vous rendez compte que ce modèle de projet contient désormais des scripts JQuery.

Nous allons ajouter au projet un nouveau fichier Student.cshtml.

Pour cela, dans la boite d’outils, nous allons dérouler le menu « New », cliquer ensuite sur le bouton « New File » et créer un nouveau fichier Student.cshtml.

Nous allons maintenant ajouter les références suivantes dans le bloc de code Razor en début du fichier :

Scripts.Add("~/Scripts/jquery-1.6.2.min.js");
Scripts.Add("~/Scripts/jquery.validate.min.js");
Scripts.Add("~/Scripts/jquery.validate.unobtrusive.min.js");

Le gestionnaire de scripts (Scripts.add()) permet d’enregistrer les scripts uniquement pour cette page. C’est également une nouveauté qui a été introduite par WebPages 2 Developer Preview. J’espère que j’aurais assez de temps pour pouvoir revenir dessus.

NB : Pour éviter d’avoir à inclure ces références dans chacun de vos formulaires, vous pouvez directement ajouter ces lignes de code dans le fichier Layout.cshtml, si votre site en contient un.

Nous devons maintenant spécifier les champs qui doivent être vérifiés, avec les messages d’erreurs qui seront affichés en utilisant la méthode Validation.RequireField().

Les lignes de code qui doivent être ajoutées à la suite du code ci-dessus sont les suivantes :

// Les champs qui doivent être vérifiés
    Validation.RequireField("nom", "Le nom est obligatoire.");
    Validation.RequireField("prenom", "Le prénom est obligatoire.");
    Validation.RequireField("date_nais", "La date de naissance est obligatoire.");

Pour la vérification du type d’un champ (date, entier, etc.), nous allons ajouter un critère de validation dans notre page en utilisant la méthode Validation.Add(). La ligne de code suivante sera donc ajoutée pour vérifier si l’entrée de l’utilisateur respecte le format date.

Validation.Add("date_nais", Validator.DateTime("Format de date invalide"));

Nous pouvons maintenant écrire le code pour le traitement des données si la validation est effectuée avec le succès. Pour cela, nous allons ajouter les lignes de code suivantes à notre fichier, en dessous de celle-ci dessus.

if (IsPost)  {
        // Vérification si la validation est OK. 
        if (Validation.IsValid()) {
            //récupération des données utlisateur
            var nom = Request["nom"];
            var prenom = Request["prenom"];
            var date_nais = Request["date_nais"];
            var email = Request["email"];
            // Traitement des donées utilisateur
            
        }

Passons maintenant à la construction de notre formulaire dans le body. La fonction @Html.ValidationSummary() sera utilisée pour afficher le résumer issu de la validation.

La méthode @Validation.GetHtml(«  ») sera utilisée pour ajouter un attribut de validation à un champ et enfin la méthode @Html.ValidationMessage() servira à afficher un message de validation spécifique à côté d’un champ.

Le code complet de notre page Student.cshtml est le suivant :

@{
     Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Register an Account";

    // 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");

    // Les champs qui doivent être vérifiés
    Validation.RequireField("nom", "Le nom est obligatoire.");
    Validation.RequireField("prenom", "Le prénom est obligatoire.");
    Validation.RequireField("date_nais", "La date de naissance est obligatoire.");

    // Ajout d'un critère de validation
    Validation.Add("date_nais", Validator.DateTime("Format de date invalide"));
    //Vérification du postback
    if (IsPost)  {
        // Vérification si la validation est OK. 
        if (Validation.IsValid()) {
            //récupération des données utlisateur
            var nom = Request["nom"];
            var prenom = Request["prenom"];
            var date_nais = Request["date_nais"];
            var email = Request["email"];
            // Traitement des données utilisateur
            
        }
    }
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <form method="post" action="">
        <!-- Affichage des erreurs de validation -->
        @Html.ValidationSummary("Bien vouloir corriger les erreurs suivantes")
        <fieldset>
            <legend>Ajout d'un etudiant</legend>
            <div>
                <label for="Nom">Nom :</label>
      
      <input type="text" name="Nom" value="@Request["nom"]"   @Validation.GetHtml("nom") />
            </div>
        
         <div>
                <label for="Prenom">Prénom :</label>
      
      <input type="text" name="Prenom" value="@Request["prenom"]"   @Validation.GetHtml("prenom") />
            </div>
        
            <div>
                <label for="Date_Nais">Date de naissance :</label>
      <input type="text" name="Date_Nais" value="@Request["date_nais"]" @Validation.GetHtml("date_nais") />
      @Html.ValidationMessage("date_nais")
            </div>
            <div>
                <label for="Email">Adresse mail :</label>
      <input type="text" name="Email" value="@Request["email"]" />
            </div>
            <div>
                <label> </label>
                <input type="submit" value="Enregistrer" class="submit" />
            </div>
        </fieldset>
    </form>       
    </body>
</html>

Procédons à l’enregistrement des modifications qui ont été apportées à notre page et lançons l’exécution de celle-ci, en cliquant sur le bouton Run de la boite d’outils, et en sélectionnant le navigateur dans le lequel nous souhaitons que la page s’exécute.

Et à l’exécution, nous obtenons les résultats suivants en cas d’erreur :

Désormais vous avez à votre disposition plusieurs alternatives avec WebMatrix et WebPages, pour fournir une bonne expérience utilisateur dans votre application Web en ce qui concerne la validation des données.

Sur le même sujet :

– 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 .