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

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

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.

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.

En dehors des nouveautés disponibles dans la version Developper Previw publiée en septembre dernier dont le support des plateformes mobiles, le rendu adaptatif, View Switcher, des nouveaux modèles de projet Web, etc. la bêta apporte plusieurs corrections de bug et quelques nouveautés donc la plus importante est l’introduction de l’API Web.

L’API Web

Web API a fait son apparition dans WCF. Elle a pour objectif principal de permettre aux développeurs d’exposer leurs applications, données et services sur le web directement à travers HTTP.

Au vu des besoins d’interaction de plus en plus croissants entre une application Web et un ensemble très large de clients (réseaux sociaux, navigateurs, terminaux mobiles, etc.), il était indispensable de fournir aux développeurs un moyen de communiquer dans leurs applications avec ces différents types de clients. Pour ne pas avoir à développer deux outils différents permettant d’effectuer les mêmes actions, l’équipe d’ASP.NET MVC c’est chargée d’intégrer WCF Web API avec le Framework de développement qui devient Web API.

Regroupement par défaut

Depuis la Developer Previw d’ASP.NET MVC 4, la librairie Microsoft.Web.Optimisation avait été introduite à la plateforme, ainsi qu’a ASP.NET 4.5, pour permettre d’optimiser les performances d’une application et améliorer le temps de chargement des pages en utilisant le regroupement et la minification à la volée du JavaScript et CSS.

Avec la bêta de MVC 4, le regroupement est utilisé par défaut dans les modèles projets Web. A l’ouverture d’un Template, vous trouverez dans le fichier Layout les lignes de code suivantes dans la balise Head :

<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
        <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
        <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
        <meta name="viewport" content="width=device-width" />
    </head>

Pour plus de détail sur l’utilisation du regroupement et la minification du JavaScript dans une application Web, voir mon article sur le sujet.

Améliorations de Razor

Le moteur de vue Razor qui à fait son apparition avec MVC 3, croit en maturité dans cette version, avec des améliorations qui simplifient sa syntaxe dans certains scénarios courants.

– Résolution d’URL : prise en charge de « ~ » dans la syntaxe.

Désormais au lieu d’écrire :

<scriptsrc="@Url.Content("~/Scripts/Site.js")"></script>

Le développeur pourra écrire :

<scriptsrc="~/Scripts/Site.js"></script>

– Rendu conditionnel d’attribut

Précédemment, si vous vouliez utiliser un attribut qui peut-être nul, vous deviez vérifier au préalable si celui-ci n’est pas vide avant de l’utiliser.

<div@{if (myClass != null) { <text>class="@myClass"</text> } }>Content</div>

Désormais, Razor est capable de gérer cela automatiquement, de telles sortes que vous pouvez directement l’utiliser. Si l’attribut est vide il ne sera simplement pas appelé.

<div class="@myClass">Content</div>

Si l’attribut est donc nul, le rendu de code sera le suivant :

<div>Content</div>

Utilisation de NuGet pour installer les bibliothèques externes des modèles de projet

Avec la bêta de MVC 4, lorsque que vous créez un nouveau projet, les packages sont installés dans l’application en utilisant NuGet package restore. Le package NuGet restore permet lors de la compilation ou de la création d’une application, de vérifier si les packages présents correspondent aux dernières versions publiées. Si ce n’est pas le cas, il se charge automatiquement d’effectuer la mise à jour.

ASP.NET MVC 4 peut-être utilisé avec Visual Studio 2010 Service pack 1 ou Visual Web Developer 2010 Service Pack 1. La préversion de Visual Studio 11 n’est pas prise en charge.

Le framework peut s’installer via NuGet ou en utilisant le Web plateforme installer. Les binaires sont également disponibles en téléchargement.

Je reviendrais sur une présentation plus détaillé de Web API dans un prochain billet de blog.

En me basant donc du meilleur que j’ai pu tirer de quelques articles par-ci par-là et mon expérience, j’ai mis au point une solution qui répondait à mes besoins pour une application ASP.NET MVC Razor. Cette méthode n’est pas standard, et peut-être pas la meilleure, mais elle répond pleinement aux exigences de mon projet et aux objectifs que je voulais atteindre.

Ce qu’il faut savoir sur l’internationalisation dans l’écosystème .NET

Avant de se lancer dans la création d’un site multilingue en ASP.NET, il y a un certain nombre de concepts que vous devriez au préalable savoir. Lorsqu’on parle d’internationalisation d’une application sur la plateforme .NET, cela implique la mise en œuvre de deux mécanismes principaux à savoir : la mondialisation et la localisation.

La mondialisation est le processus de conception et de développement d’un produit logiciel adapté à plusieurs cultures. Une application mondialisée prend en charge des interfaces utilisateurs localisées et des données régionales pour tous les utilisateurs. Par exemple, le format de la date en zone francophone est jj/mm/aaaa. Dans les pays anglophones, nous avons plutôt le format mm/jj/aaaa. La mondialisation va consister à afficher le bon format dans une page en fonction de la langue du navigateur d’un utilisateur ou des options choisies par celui-ci.

La localisation est le processus d’adaptation de votre application à une culture et aux paramètres régionaux donnés. Vous devez pendant cette étape, personnaliser votre application pour les cultures auxquelles vous la destinez. Cette étape doit consister essentiellement en une traduction de l’interface utilisateur vers les langues cibles.

Différentes possibilités d’internationalisation d’une application ASP.NET

Il existe sur la plateforme .NET plusieurs procédés pour rendre son site multilingue. L’internationalisation d’une application peut donc être faite en utilisant soi :

– Les fichiers de ressources ;

– Des vues différentes pour chaque culture (traduction dans le code) ;

– Des fichiers texte ;

– Utiliser à la place des fichiers de ressources une base de données ;

– Ou combiner la première et la seconde méthode.

Chacune de ces techniques à ses avantages et ses inconvénients, et l’orientation vers l’une d’entre elles dépend aussi entre autres des spécifications de votre projet et des contraintes techniques auxquelles vous êtes confrontés. Personnellement je préfère les fichiers de ressources que j’utilise couramment lorsque je suis confronté à cette problématique.

Les fichiers ressources sont des fichiers textes optimisés. Au chargement, ils sont entièrement triés afin de limiter les accès que ce soit au niveau de la mémoire ou des différents disques.
C’est pourquoi, dans le cadre de ce tutoriel, nous nous limiterons uniquement à l’utilisation des fichiers de ressources.

Prérequis

– Visual Web Developer 2010 ;

– ASP.NET MVC 3 ;

– Connaissance de base en C# et sur le moteur de vue Razor.

Création de l’application

Nous allons commencer dès la base même, par la création d’une nouvelle application qui sera utilisée tout au long de l’article.
Pour ce faire, vous allez démarrer votre EDI Visual Studio. Cliquez sur le menu Fichier, ensuite sur la commande Nouveau projet. Dans la fenêtre qui va s’afficher, sélectionnez le Template de projet ASP.NET MVC 3 Web Application, renseignez le nom de l’application et l’emplacement ou celle-ci va être stockée et cliquez sur OK.

Sélectionnez ensuite dans la fenêtre qui va s’afficher le modèle de projet Internet Application, en vous assurant que le moteur de vue qui sera utilisé est Razor.

Cliquez ensuite sur OK pour que Visual Studio procède à la création de votre application.

Si vous exécutez l’application à ce stade, vous vous rendrez compte que le texte affiché par défaut dans vos pages est en anglais.

Puisque vous souhaitez que l’internaute qu’il soit anglophone ou francophone puissent se sentir à l’aise dans la navigation sur votre site, vous allez ajouter à celui-ci en plus du support de l’anglais, la prise en charge du français.

Pour atteindre ce résultat, les premières étapes suivantes sont nécessaires :

– Création des fichiers de ressources ;

– Modification des vues ;

– Définition de la culture.

Création des fichiers de ressources

Pour gérer efficacement l’internationalisation dans notre application, nous avons opté pour l’utilisation des fichiers de ressources pour stocker les valeurs qui doivent être localisées.

Ce qu’il faut savoir sur les fichiers de ressources

Une ressource est une donnée non exécutable qui est déployée logiquement avec une application. Les ressources peuvent contenir des données sous plusieurs formes, telles que des chaînes, des images ou des objets rendus persistants. Le stockage de vos données dans un fichier de ressources vous permet de changer les données sans avoir à recompiler l’intégralité de votre application.

Le format de fichier de ressources .resx se compose d’entrées XML, qui spécifient des objets et des chaînes dans des balises XML. Le .NET Framework fournit une prise en charge complète pour la création et la localisation des ressources. Ceux-ci doivent être créés d’une façon particulière pour fonctionner correctement.

Les fichiers de ressources de la langue par défaut de votre application doivent être nommés comme suit : nom_du_fichiers.resx.

Les fichiers pour les autres langues doivent suivre le format suivant : nom_du_fichier.culture.resx.

Ce qu’il faut savoir sur la culture

La culture ici doit définir le code la langue. Un code de langue est une convention symbolique permettant d’identifier une langue ou une variété dialectale ou régionale, ou un ensemble de langues par un identifiant défini dans un code, sans avoir à nommer la langue désignée elle-même.

La culture peut être neutre. Dans ce cas, elle sera codée sur deux caractères.

Exemple : en pour l’Anglais et fr pour le français.

Ou être stricte. Dans ce cas, elle sera codée sur quatre caractères ayant le format suivant « xx-XX », deux caractères minuscules pour la langue, et les deux suivantes en majuscules pour la variante régionale.

Exemple : fr-FR pour le français de France, en-US pour l’anglais des États-Unis et en-GB pour l’anglais de la Grande-Bretagne.

NB : Le fichier de ressource par défaut est utilisé si aucune culture n’est définie dans l’application ou si aucune ressource n’existe pour la culture qui a été définie.

Architecture.

Pour rester dans la logique de regroupement qu’impose ASP.NET MVC, il est préférable que l’arborescence de vos fichiers de ressources soit semblable à la capture ci-dessous :

Vous allez donc créer un dossier Ressources, en faisant un clic droit dans l’explorateur de projet et en cliquant sur Ajouter, puis en sélectionnant l’option Nouveau dossier.

Dans ce dossier vous allez procéder de même pour créer les dossiers Models, Views, etc.

Par la suite, vous devez créer les différents fichiers de ressources.
Je vous recommande de commencer par celui de la page Layout.chtml. Pour cela, vous allez créer les fichiers Layout.resx pour la langue par défaut et Layout.fr.resx pour le français.

Pour créer ces fichiers, faites un clic droit sur le sous-dossier Shared, sélectionnez l’option Ajouter, puis cliquez sur Ajouter un nouvel élément.
Dans la boite de dialogue qui va s’afficher, sélectionnez le type de fichier Ressources File, et renseignez le nom _Layout.resx dans la zone réserver à cet effet, puis cliquez sur Ajouter.

Faites de même pour créer le fichier Layout.fr.resx et les autres fichiers de ressources.

Maintenant, vous devez déplacer les textes qui sont dans votre fichier _Layout.cshtml dans le fichier de ressources, en renseignant le nom (comme celui d’une variable), la valeur (qui est le texte contenu dans le page) et une description s’il y a lieu.

Prenez la peine de vérifier que la zone « Acces Modifier » est définie à Public. Sinon, les valeurs que vous avez définies ne seront pas accessibles dans les vues.

Renseignez également la traduction de ces textes pour le fichier _Layout.fr.resx.

Attention, le nom doit être le même que celui que vous avez défini dans le fichier de ressources par défaut pour cette page.

NB : Contrairement à ASP.NET WebForms où il est conseillé de créer les fichiers de ressources dans les dossiers App_GlobalResources et App_LocalResources, avec ASP.NET MVC, l’utilisation de ces dossiers sera une source de problèmes pour vous. Je vous conseille donc d’utiliser un dossier différent (comme ce que nous avons fait plus haut), ou créer les ressources dans une librairie séparée.

Pour plus de détail sur le sujet, je vous invite à lire cet excellent billet de blog de K. Scott Allen : Resource Files and ASP.NET MVC Projects.

Modification de la vue

Maintenant que vous avez transféré le texte de la vue vers les fichiers de ressources, vous devez maintenant faire pointer les zones d’affichage de ces textes vers les ressources correspondantes.

Pour cela, ouvrez le fichier Layout.chstml et remplacez le texte suivant :

<div id="title">
   <h1>My MVC Application</h1>
</div>

Par

<div id="title">
   <h1> @MvcApplication1.Resources.Views.Shared._Layout.Title</h1>
</div>

En observant ces lignes de code, vous pouvez constater que la valeur est accessible comme une propriété de classe. En effet, toutes les ressources sont compilées vers une DLL (MvcApplication1.Resources.Views.Shared). Le nom du fichier (_Layout) est utilisé comme nom de la classe et le nom donné au texte est considéré comme celui de la propriété de la classe.

Premier aperçu

À ce stade, si tout est correct, vous pouvez déjà obtenir un premier aperçu de votre application localisée en définissant juste la culture qui est utilisée par celle-ci.

Pour cela, vous pouvez simplement définir la culture dans le fichier Globla.aspx en utilisant la méthode Application_BeginRequest qui est exécutée lors du lancement de l’application. Le code permettant de faire cela est le suivant :

protected void Application_BeginRequest(object sender, EventArgs e)
{
          
    Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture("fr");
} 

En modifiant le paramètre qui est passé à la fonction, CreateSpecificCulture() entre l’anglais(en) et le français(fr), on obtient le résultat suivant :

Nous avons défini une seule valeur localisée pour la vue Layout. Vous pouvez faire de même pour les autres vues.

Voilà, nous venons de finir avec les premières étapes d’internationalisation de notre application, qui nous ont permis de créer les fichiers de ressources et localiser nos vues. Dans la partie suivante, nous verrons comment procéder pour les fichiers du modèle avec les messages d’erreur de validation et comment mettre en ouvre un mécanisme de basculer entre les cultures sur l’interface utilisateur.

Lire la partie suivante : Internationalisation d’une application ASP.NET MVC 3 Razor part 2 : messages d’erreur de validation et DisplayAttribute

Cependant, avec ASP.NET MVC, il est possible de définir les messages des erreurs de validation dans le modèle, au sein des attributs fournis par l’espace de noms DataAnnotations utilisé pour la validation des données utilisateur. Il est également possible de définir les textes par défaut qui seront affichés dans les vues pour les intitulés des champs des formulaires.

Si vous avez donc défini ces infirmations dans votre modèle, vous allez vous rendre compte que ce que nous avons fait jusqu’ici ne permet pas de localiser ces champs texte.

Nous verrons donc dans ce billet comment internationaliser les messages des erreurs de validation et les intitulés des champs des formulaires définis dans le modèle.

Pour cet exemple, nous allons créer dans l’application que nous avons utilisée précédemment (dans la partie 1) un formulaire permettant l’enregistrement des produits. La classe qui sera utilisée est la suivante :

public class ProductModel
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }
    }

Pour créer le modèle correspondant, ajoutez au dossier Model un fichier de classe ProductModel.cs qui contiendra le code ci-dessus.

À ce stade, aucune logique de validation des données n’est implémentée. À l’aide de DataAnnotations nous allons mettre en œuvre la validation des données pour cette classe.

Le nouveau code de la classe ProductModel produit est le suivant :

public class ProductModel
    {
        [Required(ErrorMessage = "Le libellé du produit est obligatoire")]
        [Display(Name = "Nom")]
        public string Name { get; set; }
        [Required(ErrorMessage = "La description du produit est obligatoire")]
        [Display(Name = "Description")]
        public string Description { get; set; }
        [Required(ErrorMessage = "La prix est obligatoire")]
        [Display(Name = "Prix")]
        [Range(0.01, 400.00, ErrorMessage = "Le prix doit être compris entre 0.01 et 400.00")]
        public decimal Price { get; set; }
    }

Nous allons commencer par internationaliser les messages des erreurs de validation.

Pour cela, dans le sous-dossier Model du dossier Resources, vous allez créer deux nouveaux fichiers de ressources ProductModel, dans lesquels vous allez définir les messages d’erreurs de validation pour cette classe comme l’illustre la capture ci-dessous :

Pour localiser ces valeurs, nous allons utiliser les propriétés ErrorMessageResourceType et ErrorMessageResourceName.

La propriété ErrorMessageResourceType permet de spécifier le type de message d’erreur qui est associé à un contrôle de validation.
La propriété ErrorMessageResourceName, quant à elle, sera utilisée pour définir le nom de la ressource pour recherche le message d’erreur.

Le nouveau code de la classe ProductModel permettant donc de faire cela est le suivant :

public class ProductModel
    {
        [Required(ErrorMessageResourceType = typeof(MvcApplication1.Resources.Models.ProductModel),
             ErrorMessageResourceName = "NameRequired")]
        [Display(Name = "Nom")]
        public string Name { get; set; }
         [Required(ErrorMessageResourceType = typeof(MvcApplication1.Resources.Models.ProductModel),
             ErrorMessageResourceName = "DescriptionRequired")]
        [Display(Name = "Description")]
        public string Description { get; set; }
         [Required(ErrorMessageResourceType = typeof(MvcApplication1.Resources.Models.ProductModel),
             ErrorMessageResourceName = "PriceRequired")]
        [Display(Name = "Prix")]
        [Range(0.01, 400.00, ErrorMessageResourceType = typeof(MvcApplication1.Resources.Models.ProductModel),
             ErrorMessageResourceName = "PriceRange")]
        public decimal Price { get; set; }
    }

À ce stade, si nous exécutons notre application, nous obtenons le résultat suivant :

Pour l’anglais

Pour le français

Nous avons finalisé avec les messages des erreurs de validation. Passons maintenant à la localisation des attributs Display.

Avec la version précédente d’ASP.NET MVC, la définition des noms des propriétés qui seront affichées dans l’interface utilisateur se faisait en décorant la propriété avec la classe DisplayNameAttribute. Cependant, elle ne possède qu’un seul constructeur et ne supporte pas de ce fait la localisation.

Pour internationaliser donc ces valeurs, il fallait du code personnalisé après beaucoup d’effort de programmation. Ce problème est résolu avec ASP.NET MVC 3. La localisation des noms des propriétés peut se faire assez aisément dans le modèle en utilisant la classe DisplayAttribute.

Cette classe possède plusieurs propriétés, y compris les propriétés ResourceType, permettant de définir le type de ressource pour les propriétés localisées et Name pour définir le nom de la ressource.

Le nouveau code de la classe ProductModel sera donc le suivant :

public class ProductModel
    {
        [Required(ErrorMessageResourceType = typeof(MvcApplication1.Resources.Models.ProductModel),
             ErrorMessageResourceName = "NameRequired")]
        [Display(Name = "DisplayName", ResourceType = typeof(MvcApplication1.Resources.Models.ProductModel))]
         public string Name { get; set; }
         [Required(ErrorMessageResourceType = typeof(MvcApplication1.Resources.Models.ProductModel),
             ErrorMessageResourceName = "DescriptionRequired")]
         [Display(Name = "DisplayDescription", ResourceType = typeof(MvcApplication1.Resources.Models.ProductModel))]
        public string Description { get; set; }
         [Required(ErrorMessageResourceType = typeof(MvcApplication1.Resources.Models.ProductModel),
             ErrorMessageResourceName = "PriceRequired")]
         [Display(Name = "DisplayPrice", ResourceType = typeof(MvcApplication1.Resources.Models.ProductModel))]
        [Range(0.01, 400.00, ErrorMessageResourceType = typeof(MvcApplication1.Resources.Models.ProductModel),
             ErrorMessageResourceName = "PriceRange")]
        public decimal Price { get; set; }
    }

Les fichiers de ressources utilisés seront modifiés comme suit :

À ce stade, si nous exécutons notre application, nous obtenons le résultat suivant :

Pour l’anglais

Pour le français

Et voilà, nous venons de finir avec la localisation des textes du modèle. Vous pouvez vous rendre compte combien il est facile grâce aux nouveautés introduites par ASP.NET MVC 3 d’internationaliser les messages d’erreur de validation et les intitulés des champs des formulaires dans la vue.

La prochaine étape sera la mise au point sur l’interface utilisateur d’un mécanisme permettant à l’internaute de modifier la culture pour faire passer l’application d’une langue à une autre.

J’avais néanmoins eu l’occasion d’annoncer vite fait la sortie de l’outil sur DVP. Je vais revenir dans une nouvelle série de billets de blog sur l’EDI Web ainsi que sur les nouveautés de la bêta de WebMatrix 2 et de la Developer Preview de Web Pages 2.

Avant de me lancer dans la rédaction de ces articles, je tiens à partager avec les lecteurs de mon blog mon retour d’expérience sur la première version de WebMatrix.

Présentation de 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.

Pourquoi avoir choisi WebMatrix ?

Au sein de notre équipe, nous sommes confrontés assez couramment à des petits projets Web à faibles budgets, tant en ASP.NET qu’en PHP. L’idéal pour nous était donc d’avoir des éditeurs légers, simples et surtout gratuits, nous permettant de développer rapidement ces applications.

Nous avons trouvé la solution à nos besoins en WebMatrix. L’EDI a mis à notre dispositif toutes les ressources dont nous avions besoin pour créer rapidement, avec un gain en temps important des applications Web dynamiques en ASP.NET ou PHP, avec accès à des bases de données SQL Server ou MySQL.

L’EDI qui affranchit le développeur des tâches de configuration

Depuis que je développe sous Windows, j’ai toujours été réticent à l’idée d’avoir à utiliser une solution comme XAMPP, qui m’installe et configure automatiquement mon serveur de base de données MySQL, PHP et le serveur Web Apache. Mon problème réside surtout au niveau d’Apache, qui s’installe à côté de mon serveur IIS et qui peut bien évidemment engendrer un problème de violation de port dans certains cas.

De ce fait, J’opte donc couramment pour mes travaux en PHP (et oui, je fais aussi du PHP, vous pouvez trouver mes articles sur l’interopérabilité entre .NET et PHP ici et là) d’installer moi-même PHP et MySQL (si je dois l’utiliser), ensuite procéder à la configuration d’IIS pour exécuter PHP.

Cette approche fastidieuse, peut-être déconcertante pour un développeur inexpérimenté. WebMatrix élimine ces contraintes. L’EDI peut-être utilisé pour télécharger, installer et configurer PHP et MySQL, pour être utilisé avec IIS7 Express.

Créer rapidement des applications Web avec le moins de concept en développement Web

WebMatrix minimise le nombre de concepts qu’un débutant en développement a besoin de connaitre pour mettre sur pied des sites Web simples. Un développeur peut rapidement créer une application sans toutefois avoir besoin de maitriser l’architecture complexe des technologies Web .NET.

Lorsque l’application est lancée, une fenêtre de démarrage présente quatre options à l’utilisateur, lui permettant de créer un site à partir de zéro, à partir d’un modèle, d’ouvrir un site existant ou un site Web à partir de la galerie d’applications.

L’interface utilisateur, d’une ergonomie assez aboutie façon WPF, utilise le ruban qui a fait son apparition avec Office 2007 à la place d’une barre de menu. Le développeur retrouve donc facilement les outils mis à sa disposition, qui ne sont pas noyés dans des menus.

L’éditeur de code prend bien en charge ASP.NET, HTML5, CCS3, JavaScript et PHP, et permet d’éditer facilement avec le support de l’InteliSence, des pages cshtml, des fichiers de scripts, des layouts, etc.

Le moteur de vue Razor

WebMatrix repose sur le moteur de vue Razor pour la création des applications ASP.NET dynamiques. 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.

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.

Un aspect qui m’a vraiment impressionné avec Razor dans WebMatrix est la création des Helpers, qui introduit une autre façon d’écrire des méthodes/fonctionnalités réutilisables.

@helper Somme(int a, int b)
{
    @{
        var sum = a + b;
    }
    
    <b>@sum</b>
}

La création des Helpers avec WebMatrix se résume en la définition dans le dossier App_code, d’un fichier .cshtml avec les méthodes que vous pouvez appeler facilement dans n’importe quelle vue de votre application.

@MuHelper.Somme(4,5)

Le support des Layouts et Sections introduits par Razor, va offrir au développeur des moyens de définir un design cohérent pour son application.

Pour rappel, les Layouts (équivalent des Masterpages) sont utilisés pour regrouper, dans une page spécifique, les éléments communs de mise en page pour l’application (menu, entête, pied de page, scripts JavaScript utilisés par toutes les pages).

Razor + WebMatrix ou le retour du code spaghetti d’ASP classique ?

« Razor permet d’insérer du code serveur dans une page Web qui peut également contenir du HTML, du CSS et des scripts JavaScript »

A la lecture de cette phrase, certaines personnes vont certainement se demander si l’on ne revient pas au code spaghetti difficilement maintenable avec une sécurité approximative comme avec ASP classique.

Personnellement, lorsque j’ai entendu parler pour la première fois de Razor et WebMatrix, je me suis dit waouh, nous voila revenu à ASP classique. Mais, lorsque je me suis familiarisé avec ces plateformes, j’ai constaté que Razor n’est en aucun point comparable avec VBScript.

Il s’appuie sur la puissance de la plateforme .NET qui remplace COM et ActiveX, et fournir des puissants outils pour assurer la sécurité d’un site Web. L’accès aux données se fait via ADO.NET, qui est également en déphasage complet avec la technologie ADO utilisée en ASP classique.

Accéder rapidement et avec souplesse aux données

L’accès et la manipulation des données avec WebMatrix sont assez simples. L’EDI dispose d’une interface qui met à la disposition du développeur les fonctionnalités d’administration de base (création de la BD, ajout d’une table, insertion des données, etc.) pour BD MySQL ou SQL Server. Donc, plus besoin d’un outil comme PHPmyAdmin ou MySQL WorkBench sur ma machine de Dev pour administrer MySQL ;).

La manipulation fluide des données dans une vue se fera avec la nouvelle classe Database. Je peux me connecter à ma BD et exécuter une requête en utilisant juste les quelques lignes de code suivantes :

@{
    var db = Database.Open("MonSiteTest");
    var clients = db.Query("Select * from clients");
}

La requête retourne un objet IEnumerable dynamic, qui tire parti des objets dynamiques introduits par C# 4. Ce qui suppose que je peux faire un truc du genre :

@foreach(var client in clients){
            <tr>
                <td>@client.Nom</td>
                <td>@client.Prenom</td>
                <td>@client.Email</td>
            </tr>
    }

Et pourtant, je n’ai déclaré cette classe nulle part. Ce n’est pas fabuleux ;).

Pour les habituer des ORM, qui ont abandonné cette veille habitude de taper du SQL dans le code, avec la classe Database, vous êtes obligés d’écrire vous-mêmes vos requêtes.

OK, on me dira bonjour les attaques par injections SQL ! Et moi, je dirais n’y comptez pas. En effet, je peux par exemple procéder comme suit pour insérer des données dans ma BD avec la classe Database :

@{
    var db = Database.Open("MonSiteTest");
         var sqlreq = "INSERT INTO clients (Nom, Prenom, Email) " +
                "VALUES (@0, @1, @2)";
            db.Execute(sqlreq, Nom, Prenom, Email);
}

Et, j’ai là ma requête paramétrée avec WebMatrix, qui me met à l’abri des attaques par injection SQL.

On va regretter cependant la non-prise en charge de PostgreSQL, qui est de plus en plus présent dans le monde du développement Web.

Galerie d’applications

Voila un aspect de l’EDI qui a beaucoup intéressé l’utilisateur à temps partiel du CMS Joomla que je suis. A mon avis, c’est avec cette fonctionnalité que Microsoft va attirer le plus de développeurs PHP, qui vont trouver en WebMatrix une véritable alternative pour l’accès, la manipulation et la publication des CMS et projets Web open source.

WebMatrix dispose d’une galerie Web pouvant se connecter au « Web Application Gallery » de Microsoft pour vous donner accès à une vaste collection de CMS et applications open sources populaires comme WordPress, Dupral, Joomla, mopCommerce, blogEngine.NET ou encore DotNetNuke, pouvant être installés, édités et publiés directement à partir de l’éditeur.

Plus besoin donc de chercher le site officiel d’un projet, le télécharger soi-même, procéder à son installation et configuration, etc. WebMatrix fait tout pour vous.

Les Helpers Razor et le gestionnaire de packages

La réutilisation : un concept de base de la programmation orientée objet, qui permet un gain de temps important. Le maitre mot des Helpers Razor accessibles depuis le gestionnaire de packages WebMatrix est la réutilisation.

Les Helpers sont des composants contenant des fonctionnalités réutilisables, qui vont simplifier le rendu du code HTML dans la vue. Très faciles d’utilisation, ils s’avèrent assez utiles dans le développement. Les Helpers fournissent au développeur, un moyen simple et cohérent d’effectuer des tâches de développement Web dynamique qui, autrement, exigeraient beaucoup de code personnalisé.

Avec ces composants l’intégration d’un flux twitter, d’une zone de recherche Bing, d’un widget facebook, d’un module Paypal, le stockage des données sur Windows Azure Storage, la mise en cache, l’analyse du trafic de son site Web, etc. n’ont jamais été aussi simple.

Je tiens à souligner que le gestionnaire de packages WebMatrix n’a rien à voir avec le gestionnaire de packages .NET Nuget, qui d’ailleurs a été introduit dans la version 2 de WebMatrix. Mais, il faut noter cependant que celui-ci utilise les flux NuGet pour mettre à la disposition du développeur les Helpers Razor.

Optimisation du SEO et amélioration des performances

Une bonne partie du trafic d’un site Web passe par les moteurs de recherche. J’ai apprécié l’introduction d’un outil de SEO (Search Engine Optimization) dans WebMatrix, qui fournit un rapport riche, permettant d’optimiser le code pour améliorer le référencement naturel de son site.

La réécriture d’URL est également au menu. J’ai oublié de le mentionner, mais lors du processus d’installation de WebMatrix, UrlRewriter 2.0 est également installé. Ce qui suppose que vous pouvez également optimiser votre site en utilisation la réécriture d’URL.

Déploiement

Une fois que vous avez finalisé avec la conception de votre site, plus besoin de le générer et utiliser un client FTP ou autres pour déployer celui-ci. WebMatrix intègre des fonctionnalités permettant de déployer son site en utilisant FTP, ou WebDeploy.

En cliquant simplement sur le bouton Publish, l’éditeur affiche une fenêtre permettant de publier son site Web en renseignant les paramètres fournis par l’hébergeur. Bien plus, si vous ne disposez pas d’un hébergeur, vous pouvez à partir de l’outil, effectuer une recherche pour trouver l’hébergeur le plus adapté à vos besoins.

Le revers de la médaille

Dans plusieurs articles que j’ai trouvés sur WebMatrix, l’absent est mis sur le fait que l’EDI est idéal pour les débutants. Je ne réfute pas ces affirmations, mais j’émets des réserves pour le débutant qui demain sera confronté à des costauds projets d’entreprises, qui nécessitent une bonne maitrise de l’architecture, des Patterns et autres bonnes pratiques en développement Web.

Personnellement, je trouve qu’il serait beaucoup plus difficile pour un débutant d’avoir une bonne maitrise du développement professionnel, s’il utilise comme porte d’entrée un outil qui fait abstraction de tous les concepts, architectures et autres bonnes pratiques.

WebMatrix aura plutôt tendance à abrutir celui-ci, le faisant croire que même la création d’une costaude solution professionnelle sera aussi simple. Donc, pour le débutant qui vise le monde professionnel, autant mieux se tourner vers des outils qui permettent de s’appliquer lors du développement.

Conclusion

Comme vous pouvez le constater, WebMatrix est assez intéressant. Restez connecté pour la suite des billets sur le sujet.

Sur le même sujet :

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