blog.pagesd.info

Pour tenter de mettre au point une méthode simple(iste) pour construire une application avec ASP.NET MVC, j'essaie de développer une petite application destinées à générer une brochure de voyages . Pour cela, je dois gérer une base de données avec une table "Voyages", une table "Tarifs" pour enregistrer les chaque tarif du voyage et une table "Parties" qui sert à décrire les différentes étapes du voyage.

Eager loading pour les actions Index

Pour l'instant, j'ai plus ou moins laissé MVC Scaffolding écrire mon code pour la classe Voyage associée à la table Voyages. Par défaut, il a généré le code C# suivant pour l'action Index du contrôleur VoyagesController afin retrouver tous les voyages à afficher :

var voyages = voyageRepository
    .AllIncluding(voyage => voyage.Parties, voyage => voyage.Tarifs)
    .OrderBy(voyage => voyage.Position)
    .ThenBy(voyage => voyage.Title);

Ce qui correspond à quelque chose dans ce genre si on ne passe pas par un Repository :

var voyages = context
    .Voyages
    .Include(voyage => voyage.Parties)
    .Include(voyage => voyage.Tarifs)
    .OrderBy(voyage => voyage.Position)
    .ThenBy(voyage => voyage.Title);

Ces deux codes C# ont tous les deux pour effet de générer une (grosse) requête SQL qui charge à la fois le contenu de la table Voyages et par des jointures celui des tables Parties et Tarifs :

SELECT 
[UnionAll1].[VoyageID] AS [C1], 
[UnionAll1].[VoyageID1] AS [C2], 
[UnionAll1].[Position1] AS [C3], 
[UnionAll1].[Title1] AS [C4], 
[UnionAll1].[VoyageType] AS [C5], 
[UnionAll1].[Notes] AS [C6], 
[UnionAll1].[C1] AS [C7], 
[UnionAll1].[PartieID] AS [C8], 
[UnionAll1].[VoyageID2] AS [C9], 
[UnionAll1].[Position2] AS [C10], 
[UnionAll1].[PartieType] AS [C11], 
[UnionAll1].[Content] AS [C12], 
[UnionAll1].[C2] AS [C13], 
[UnionAll1].[C3] AS [C14], 
[UnionAll1].[C4] AS [C15], 
[UnionAll1].[C5] AS [C16], 
[UnionAll1].[C6] AS [C17], 
[UnionAll1].[C7] AS [C18], 
[UnionAll1].[C8] AS [C19], 
[UnionAll1].[C9] AS [C20], 
[UnionAll1].[C10] AS [C21], 
[UnionAll1].[C11] AS [C22]
FROM  (SELECT
        CASE WHEN ([Extent2].[PartieID] IS NULL) THEN CAST(NULL AS int) ELSE 1 END AS [C1],
        [Extent1].[Position] AS [Position], 
        [Extent1].[Title] AS [Title], 
        [Extent1].[VoyageID] AS [VoyageID], 
        [Extent1].[VoyageID] AS [VoyageID1], 
        [Extent1].[Position] AS [Position1], 
        [Extent1].[Title] AS [Title1], 
        [Extent1].[VoyageType] AS [VoyageType], 
        [Extent1].[Notes] AS [Notes], 
        [Extent2].[PartieID] AS [PartieID], 
        [Extent2].[VoyageID] AS [VoyageID2], 
        [Extent2].[Position] AS [Position2], 
        [Extent2].[PartieType] AS [PartieType], 
        [Extent2].[Content] AS [Content], 
        CAST(NULL AS int) AS [C2], 
        CAST(NULL AS int) AS [C3], 
        CAST(NULL AS nvarchar(1)) AS [C4], 
        CAST(NULL AS nvarchar(1)) AS [C5], 
        CAST(NULL AS real) AS [C6], 
        CAST(NULL AS real) AS [C7], 
        CAST(NULL AS real) AS [C8], 
        CAST(NULL AS real) AS [C9], 
        CAST(NULL AS real) AS [C10], 
        CAST(NULL AS nvarchar(1)) AS [C11] 
        FROM  [Voyages] AS [Extent1] 
        LEFT OUTER JOIN [Parties] AS [Extent2] ON [Extent1].[VoyageID] = [Extent2].[VoyageID]
UNION ALL
        SELECT
        2 AS [C1], 
        [Extent3].[Position] AS [Position], 
        [Extent3].[Title] AS [Title], 
        [Extent3].[VoyageID] AS [VoyageID], 
        [Extent3].[VoyageID] AS [VoyageID1], 
        [Extent3].[Position] AS [Position1], 
        [Extent3].[Title] AS [Title1], 
        [Extent3].[VoyageType] AS [VoyageType], 
        [Extent3].[Notes] AS [Notes], 
        CAST(NULL AS int) AS [C2], 
        CAST(NULL AS int) AS [C3], 
        CAST(NULL AS int) AS [C4], 
        CAST(NULL AS int) AS [C5], 
        CAST(NULL AS nvarchar(1)) AS [C6], 
        [Extent4].[TarifID] AS [TarifID], 
        [Extent4].[VoyageID] AS [VoyageID2], 
        [Extent4].[Title] AS [Title2], 
        [Extent4].[Year] AS [Year], 
        [Extent4].[Prix1] AS [Prix1], 
        [Extent4].[Prix2] AS [Prix2], 
        [Extent4].[Prix3] AS [Prix3], 
        [Extent4].[Prix4] AS [Prix4], 
        [Extent4].[Prix5] AS [Prix5], 
        [Extent4].[Notes] AS [Notes1]
        FROM  [Voyages] AS [Extent3]
        INNER JOIN [Tarifs] AS [Extent4] ON [Extent3].[VoyageID] = [Extent4].[VoyageID]) AS [UnionAll1]
ORDER BY [UnionAll1].[Position] ASC, [UnionAll1].[Title] ASC, [UnionAll1].[VoyageID1] ASC, [UnionAll1].[C1] ASC  

Puis dans la vue Index.cshtml, on utilise le IEnumerable<Voyage> obtenu pour afficher une liste des voyages, avec pour chacun d'entre eux le nombre de parties qui composent sa description détaillée et le nombre de tarifs définis pour ce voyage.

@foreach (var item in Model) {
  <tr>
    <td>
      @Html.ActionLink("Edit", "Edit", new { id = item.VoyageID })
    </td>
    <td>
      @item.Position
    </td>
    <td>
      @Html.ActionLink(@item.Title, "Details", new { id = item.VoyageID })
    </td>
    <td>
      @Html.DisplayTextFor(_ => item.TypeVoyage).ToString()
    </td>
    <td>
      @(item.Parties == null ? "" : item.Parties.Count.ToString())
    </td>
    <td>
      @(item.Tarifs == null ? "" : item.Tarifs.Count.ToString())
    </td>
    <td>
      @Html.ActionLink("Delete", "Delete", new { id = item.VoyageID })
    </td>
  </tr>
}

Ce qui est intéressant, c'est que MVC Scaffolding fait automatiquement du "Eager Loading" pour que les instructions item.Parties.Count.ToString() et item.Tarifs.Count.ToString() en boucle ne provoquent pas autant d'accès à la base de données qu'il y a de voyage à afficher.

Lazy loading et SELECT N+1

En effet, si par défaut, MVC Scaffolding n'avait pas fait le lien avec les parties et les tarifs et qu'il se soit contenté de générer le code C# suivant :

var voyages = voyageRepository
    .All
    .OrderBy(voyage => voyage.Position)
    .ThenBy(voyage => voyage.Title);

Ou sans le Repository :

var voyages = context
    .Voyages
    .OrderBy(voyage => voyage.Position)
    .ThenBy(voyage => voyage.Title);

Alors la consultation de la page Index n'aurait pas généré 1 seule requête, mais 71 !!!

Soit 1 première requête toute simple pour charger la liste des 35 voyages :

SELECT 
[Extent1].[VoyageID] AS [VoyageID], 
[Extent1].[Position] AS [Position], 
[Extent1].[Title] AS [Title], 
[Extent1].[VoyageType] AS [VoyageType], 
[Extent1].[Notes] AS [Notes]
FROM [Voyages] AS [Extent1]
ORDER BY [Extent1].[Position] ASC, [Extent1].[Title] ASC 

Puis 35 requêtes pour charger successivement les parties de chacun des 35 voyages :

SELECT 
[Extent1].[PartieID] AS [PartieID], 
[Extent1].[VoyageID] AS [VoyageID], 
[Extent1].[Position] AS [Position], 
[Extent1].[PartieType] AS [PartieType], 
[Extent1].[Content] AS [Content]
FROM [Parties] AS [Extent1]
WHERE [Extent1].[VoyageID] = @EntityKeyValue1  

Et encore 35 requêtes pour charger successivement les tarifs de chacun des 35 voyages :

SELECT 
[Extent1].[TarifID] AS [TarifID], 
[Extent1].[VoyageID] AS [VoyageID], 
[Extent1].[Title] AS [Title], 
[Extent1].[Year] AS [Year], 
[Extent1].[Prix1] AS [Prix1], 
[Extent1].[Prix2] AS [Prix2], 
[Extent1].[Prix3] AS [Prix3], 
[Extent1].[Prix4] AS [Prix4], 
[Extent1].[Prix5] AS [Prix5], 
[Extent1].[Notes] AS [Notes]
FROM [Tarifs] AS [Extent1]
WHERE [Extent1].[VoyageID] = @EntityKeyValue1   

Par rapport à l'eager loading, ici on a fait du "lazy loading" : les entités enfants ne sont chargées que lorsque on y accède. Des fois c'est bien. Des fois c'est mal. Mais heureusement, MVC Scaffolding qui a pensé à tout est est assez malin pour nous éviter l'écueil du SELECT N+1 quand on génère l'action Index (merci Scott).

Lazy loading et virtual

Pour être complet, c'est parce que les propriétés Parties et Tarifs de la classe Voyage sont déclarées en tant que propriétés virtuelles, que Entity Framework a fait du "lazy loading".

Ainsi, si au lieu d'utiliser virtual pour les déclarer :

public virtual ICollection<Partie> Parties { get; set; }
public virtual ICollection<Tarif> Tarifs { get; set; }

On s'était contenté de :

public ICollection<Partie> Parties { get; set; }
public ICollection<Tarif> Tarifs { get; set; }

Alors la consultation de la page Index n'aurait plus généré qu'une seule requête pour charger uniquement les données de la table des voyages (pas de eager loading puisque on n'a pas d'Include) :

SELECT 
[Extent1].[VoyageID] AS [VoyageID], 
[Extent1].[Position] AS [Position], 
[Extent1].[Title] AS [Title], 
[Extent1].[VoyageType] AS [VoyageType], 
[Extent1].[Notes] AS [Notes]
FROM [Voyages] AS [Extent1]
ORDER BY [Extent1].[Position] ASC, [Extent1].[Title] ASC 

Et puis c'est tout ! Comme on n'a pas de virtual, Entity Framework ne fait pas non plus de lazy loading et ne cherche donc pas à charger les parties et les tarifs.

C'est pour cela que les colonnes nombre de parties et nombre de tarifs restent vides puisque les instructions item.Parties == null ? "" : item.Xxxxxx.Count.ToString() sont là pour gérer le fait que les collections voyage.Parties et voyage.Tarifs sont nulles.

Par contre, même sans le virtual, si on demande à faire de l'eager loading à grand coups de Include, on retombe bien sur la grosse requête qui accède par jointure aux tables Voyages, Parties et Tarifs.

Action Index et ViewModel

A titre personnel, je trouve malgré tout que la requête SQL générée par Entity Framework est un peu lourde pour ce qu'on en fait. Alors que le but est simplement d'afficher le nombre de parties et de tarifs d'un voyage, on se retrouve quand même à charger toutes les parties et tous les tarifs de tous les voyages, ce qui revient donc à charger l'intégralité des tables Parties et Tarifs.

Note : Si on avait une pagination par paquet de 20 voyages, ça serait un peu mieux puisque cela reviendrait "seulement" à charger toutes les parties et tous les tarifs correspondant à 20 voyages uniquement.

Dans l'idéal, il faudrait donc récupérer les informations de base de chaque voyage sans ses propriétés voyage.Parties et voyage.Tarifs, plus le nombre de ses parties et le nombre de ses tarifs. Ce qui pourrait être représenté par la classe ViewModel suivante :

public class VoyageViewModel
{
    public int VoyageID { get; set; }
    public int Position { get; set; }
    public string Title { get; set; }
    public int VoyageType { get; set; }
    public int TarifsCount { get; set; }
    public int PartiesCount { get; set; }
}

Le fait d'utiliser un ViewModel est d'autant plus intéressant qu'une liste n'est pas là pour afficher la totalité des propriétés d'une entité, mais seulement quelques informations essentielles pour remplir son rôle, à savoir permettre de retrouver d'un coup d'oeil les informations qui comptent et éventuellement accéder au détail de la fiche pour consulter l'ensemble de ses données.

Par exemple, si j'ai une table Contacts avec civilité, nom, prénom, téléphone, portable, fax, email, adresse, code postal, ville, pays, format pour les emails, date de naissance, etc... je ne veux pas d'une liste qui fassent 50 colonnes pour afficher tout ça. Je préfère sacrifier quelques détails et me contenter d'une liste édulcorée mais lisible.

Pour résumer, je pense que dans le cas d'une liste (au moins), il est préférable d'employer un objet ViewModel spécifique pour collecter les données importantes puis de transmettre cet objet à la vue pour qu'elle présente ces informations à l'utilisateur.

Cela implique donc de créer une classe ViewModel "VoyagesIndex" (nommée d'après le nom du contrôleur (VoyagesController) et de l'action (Index) qui va l'utiliser) :

public class VoyagesIndex
{
    public int VoyageID { get; set; }
    public int Position { get; set; }
    public string Title { get; set; }
    public int VoyageType { get; set; }
    public int TarifsCount { get; set; }
    public int PartiesCount { get; set; }

    public VoyageType TypeVoyage
    {
        get { return (VoyageType)VoyageType; }
        set { VoyageType = (int)value; }
    }
}

Note : public VoyageType TypeVoyage est une bidouille qui n'a rien à voir avec le sujet et que j'essairai d'expliquer plus tard si je persiste à passer par elle.

Il faut ensuite modifier le code de l'action Index pour qu'elle récupère une collection de VoyagesIndex et plus une collection d'objets Voyage :

var voyages = voyageRepository
    .All
    .OrderBy(voyage => voyage.Position)
    .ThenBy(voyage => voyage.Title)
    .Select(voyage => new VoyagesIndex
    {
        VoyageID = voyage.VoyageID
        Position = voyage.Position,
        Title = voyage.Title,
        VoyageType = voyage.VoyageType,
        TarifsCount = voyage.Tarifs.Count(),
        PartiesCount = voyage.Parties.Count()
    }).ToList();

Et pour finir modifier la vue Index.cshtml pour qu'elle utilise désormais un IEnumerable<VoyagesIndex> pour afficher son contenu :

@foreach (var item in Model) {
  <tr>
    <td>
      @Html.ActionLink("Edit", "Edit", new { id = item.VoyageID })
    </td>
    <td>
      @item.Position
    </td>
    <td>
      @Html.ActionLink(@item.Title, "Details", new { id = item.VoyageID })
    </td>
    <td>
      @item.TypeVoyage.ToString()
    </td>
    <td>
      @item.PartiesCount
    </td>
    <td>
      @item.TarifsCount
    </td>
    <td>
      @Html.ActionLink("Delete", "Delete", new { id = item.VoyageID })
    </td>
  </tr>
}

Grâce à quoi la requête SQL générée quand on consulte la page Index est un peu plus simple à lire, et normalement plus efficace puisqu'elle ne cherche pas à charger les tables Parties et Tarifs.

SELECT 
[Project2].[VoyageID] AS [VoyageID], 
[Project2].[Position] AS [Position], 
[Project2].[Title] AS [Title], 
[Project2].[VoyageType] AS [VoyageType], 
[Project2].[C1] AS [C1], 
[Project2].[C2] AS [C2]
FROM ( SELECT 
        [Project1].[VoyageID] AS [VoyageID], 
        [Project1].[Position] AS [Position], 
        [Project1].[Title] AS [Title], 
        [Project1].[VoyageType] AS [VoyageType], 
        [Project1].[C1] AS [C1], 
        [SSQTAB1].[A1] AS [C2] 
        FROM ( SELECT 
                [Extent1].[VoyageID] AS [VoyageID], 
                [Extent1].[Position] AS [Position], 
                [Extent1].[Title] AS [Title], 
                [Extent1].[VoyageType] AS [VoyageType], 
                [SSQTAB1].[A1] AS [C1] 
                FROM [Voyages] AS [Extent1] 
                 OUTER APPLY 
                (SELECT 
                        COUNT(1) AS [A1] 
                        FROM [Tarifs] AS [Extent2] 
                        WHERE [Extent1].[VoyageID] = [Extent2].[VoyageID]) AS [SSQTAB1]
        )  AS [Project1]
         OUTER APPLY
        (SELECT
                COUNT(1) AS [A1]
                FROM [Parties] AS [Extent3]
                WHERE [Project1].[VoyageID] = [Extent3].[VoyageID]) AS [SSQTAB1]
)  AS [Project2]
ORDER BY [Project2].[Position] ASC, [Project2].[Title] ASC   

Ce billet est avant tout un pense-bête personnel pour noter les quelques modifications que j'apporte assez régulièrement à la feuille de style fournie par défaut quand on génère un nouveau projet ASP.NET MVC3 dans Visual Studio.

En général, lorsque je débute un nouveau projet, j'ai tendance à conserver la feuille de style telle que Visual Studio l'a créée. Puis quand je bloque sur des fonctionnalités ou des problèmes techniques, je m'accorde un petit moment de détente en adaptant « Site.css » pour essayer d'embellir mon projet avant de repartir de plus belle.

Normalize

Avant toute chose, et pour partir du bon pied, je démarre par un petit reset.css, ou ces derniers temps un normalize.css dans la vue _Layout.cshtml :

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

Undo

Comme j'aime très moyennement les coins arrondis, je commence par m'en débarrasser. Ca m'amuse toujours de commencer de façon radicale en lançant un rechercher / remplacer de -radius par -no-radius. Cela me permet de venir à bout de border-radius, -moz-border-radius et autre -webkit-border-radius. Mais au final, je fais ça de façon plus civilisée en redéfinissant tous les styles « xxxxx-border-radius » à 0.

/* Suppression des coinzarrondis */
#main,
footer, 
#footer,
ul#menu li a
{
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}

Il y a aussi l'effet d'ombre 3D sur le titre « My MVC Application » que je trouve un peu lourd. Là encore, un rechercher / remplacer à l'arrache de -shadow par -no-shadow ne fait pas de mal. Ou plus proprement je redéfini le style « text-shadow » de « header h1 ».

/* Suppression de l'effet 3D sur le titre */
header h1,
#header h1
{
  text-shadow: 0 0 0 transparent;
}

Font

Une fois défoulé, j'apporte encore quelques modifications encore plus personnelles pour obtenir un résultat un peu plus à mon goût.

Comme je suis toujours dans ma période Century Gothic is Beautiful, c'est elle qui gagne par rapport à la police « Trebuchet MS » utilisée par défaut.

/* Utilisation de ma police de prédilection */
body
{
  font-family: "Century Gothic", "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
}

Color

Puis, même si j'aime beaucoup le bleu assez soutenu utilisé comme couleur de fond, je le change pour une couleur plus claire et neutre.

Ensuite, je change les couleurs de titres au gré de l'humeur du jour ou des « Oh, c'est quoi cette joli couleur » trouvés sur d'autres sites. Ou plus simplement, c'est le titre général en chocolat, le titre de page en gris clair et les sous-titre en vert.

Après, j'ai encore un problème avec le menu qui est bleuté par défaut parce que je n'ai rien trouvé qui me plaise vraiment. Pour l'instant, je me contente de le faire ressortir en le passant en blanc sur fond vert avec un effet chocolat quand on passe la souris dessus.

/* Changement du jeu de couleurs */
body { background-color: #e0e0e0; } /* Un fond de page gris clair */
header h1, #header h1, h1 { color: #d2691e; } /* chocolat */
h2 { color: #888888; } /* gris */
h3 { color: #39b449; } /* vert */
ul#menu li a { color: #fff; background-color: #39b449; } /* Menu blanc/vert */
ul#menu li a:hover { background-color: #d2691e; } /* Et survolé en chocolat */
ul#menu { border-bottom: 0; } /* Tant qu'à faire */

Table

Une fois zen, je pars à l'assaut des tables. Déjà c'est du n'importe quoi. Pour éviter de m'emporter, je commence par un table { width : 100% } pour qu'elles s'étalent par défaut sur toute la largeur de la page.

/* Par défaut les tables occupent toute la largeur de la page */
table
{
  width: 100%;
}

Puis j'aère les cellules parce que ça sert à rien de se payer des 21 pouces si c'est pour rester tout riquiqui et tassé.

/* Aération des cellules */
thead th,
tbody td,
tfoot th
{
  border: 1px dotted #aaa;
  padding: 0.5em;
  text-align: left;
  vertical-align: top;
}

En parlant de thead et autres, je me plonge dans toutes les vues d'ores et déjà générées par défaut pour rajouter les balises <thead> et <tbody> que Visual Studio s'acharne à oublier. Y m'énerve ! C'est pourtant pas compliqué de comprendre que :

• C'est quand même beaucoup plus simple à styler
• C'est bien plus pratique pour utiliser la plupart des plugins jQuery

Après ça, je peux facilement colorer les en-têtes et pieds de tables en reprenant la couleur du menu d'onglets :

/* Redéfini les couleurs de l'en-tête et du pied des tables */
thead tr th,
tfoot tr th
{
  background-color: #3399ff;
  color: #fff;
}

Puis là, comme j'en ai rien à faire des vieux navigateurs, j'alterne la couleur de fond des lignes avec du CSS3 et un fond moins blanc que blanc.

/* Alterne la couleur de fond des lignes d'une table */
tbody tr:nth-child(odd)
{
  background-color: #f0f0f0;
}

Pour continuer à animer et égayer un peu les tableaux, je fais mon petit effet au passage de la souris en changeant la couleur de fond de la ligne pour que ça pète un peu plus. Là aussi, la couleur dépend des jours et de l'inspiration. Et aujourd'hui c'est jaune clair parce qu'il a l'avantage d'avoir un petit effet orangé sur mon portable.

/* Ajoute un effet lors du survol d'une ligne */
tbody tr:hover
{
  background-color: #ffff80;
}

Form

Là aussi, il y aurait pas mal à dire du choix du balisage. Le problème, c'est que c'est tout un ensemble entre les helpers et le système de validation alors c'est un peu compliqué et que je résiste encore pour conserver tel quel le html généré par Visual Studio. Ce qui fait que je n'arrive pas à me fixer sur quelque chose de « définitif ». Enfin bref, y'a rien qui me plait pour l'instant. A suivre donc…

Après avoir vu comment installer ELMAH avec NuGet, j'ai fait quelques tests avec pour voir ce que ça pouvait donner avec différents types d'erreurs.

Et quand je repense au peu d'effort que ça m'a demandé pour l'installer, le résultat est quand même assez bluffant. Au moins ça donne envie d'aller plus loin et d'étudier un peu mieux comment utiliser "réellement" ELMAH dans une application.

Un premier truc intéressant, c'est de s'occuper de paramétrer ELMAH afin de recevoir un email quand qu'il détecte un problème. De cette façon, je serai averti quasiment instantanément chaque fois que mon application provoquera une exception. Ca fait un peu peur quand même...

Concrètement, ELMAH est plutôt bien fait et il n'y a pas besoin de grand chose pour paramétrer l'envoi d'email. Mais ce qui est encore plus génial, c'est que l'essentiel du travail de paramétrage a déjà été fait lors de l'installation via NuGet. Pour mémoire, il avait ajouté les 3 lignes suivantes aux bons endroits dans le Web.config :

• <section name="errorMail" requirePermission="false" type="Elmah.ErrorMailSectionHandler, Elmah" />
• <add name="ErrorMail" type="Elmah.ErrorMailModule, Elmah" />
• <add name="ErrorMail" type="Elmah.ErrorMailModule, Elmah" preCondition="managedHandler" />

Pour ma part, il ne me reste plus qu'à ajouter une section <elmah> avec des informations personnelles :

<configuration>
  ...
  <elmah>
    <errorMail
       from="go@gmail.com"
       to="michel@gmail.com"
       subject="Application Exception"
       async="true"
       smtpPort="587"
       useSsl="true"
       smtpServer="smtp.gmail.com"
       userName="go@mail.com"
       password="mot_de_passe">
    </errorMail>
  </elmah>

Note : étant donné que j'utilise GMail comme serveur SMTP, il est nécessaire d'activer SSL (d'où le useSsl="true") et de préciser qu'il faut utiliser le port 587 (quoique ?, voir mon billet System.Net.Mail et smtp.gmail.com).

Après ça, je n'ai plus qu'à relancer mon application et à provoquer quelques erreurs pour aussitôt voir ma boite mail se remplir. Heureusement que c'est pour du test...

Et pour être complet, il est sans doute préférable d'extraire le paramétrage du serveur SMTP de la configuration spécifique d'ELMAH et de le définir au niveau de la section prévue à cet effet dans le Web.config :

<configuration>
  ...
  <elmah>
    <errorMail
       from="go@gmail.com"
       to="michel@gmail.com"
       subject="Application Exception"
       async="true"
       smtpPort="0"
       useSsl="true">
    </errorMail>
  </elmah>
  ...
  <system.net>
    <mailSettings>
      <smtp deliveryMethod ="Network">
        <network host="smtp.gmail.com" 
                 port="587"
                 userName="go@gmail.com"
                 password="mot_de_passe" />
      </smtp>
    </mailSettings>
  </system.net>

Dans ce cas, il faut faire attention aux deux points suivants :

• paramétrer le port "0" au niveau de la section <errorMail> pour que ce le port défini au niveau de la section <network> soit pris en compte,
• l'activation du SSL se fait toujours dans la section <errorMail>.

Go !

Splatch !

Wizzzz !

Humpf...

Unable to retrieve metadata for 'Go.Models.ContactsModel+Group'. The 
type 'Go.Models.ContactsModel+Contact' was not mapped. Check that 
the type has not been explicitly excluded by using the Ignore method 
or NotMappedAttribute data annotation. Verify that the type was 
defined as a class, is not primitive, nested or generic, and does 
not inherit from EntityObject.

(au moins Goggle me ramènera ici la prochaine fois que j'aurai cette erreur)

Il arrive fréquemment qu'on ait besoin de télécharger un fichier dans nos applications, que ce soit une image ou un fichier PDF. Dans ce tutoriel, je vais vous présenter le code nécessaire pour télécharger des fichiers avec votre application Sinatra. C'est une solution toute simple, mais ça fait ce qu'on lui demande.

L'application Sinatra

Pour commencer, nous avons besoin de créer une application Sinatra basique avec une page "upload" :

require 'rubygems'
require 'sinatra'

get '/upload' do
  haml :upload
end

__END__

@@upload
%h2 Upload
%form{:action=>"/upload",:method=>"post",:enctype=>"multipart/form-data"}
  %input{:type=>"file",:name=>"file"}
  %input{:type=>"submit",:value=>"Télécharger"}

(Remarque : je n'ai pas défini de layout pour cet exemple)

Cette page va afficher un formulaire tout simple qui va nous permettre de sélectionner un fichier sur notre PC. Le truc le plus important, c'est l'attribut "enctype" qui doit impérativement être initialisé à "multipart/form-data".

Nous devons ensuite gérer ce qui se passe lorsque le formulaire est validé en créant un autre handler (à placer juste avant la déclaration __END__) :

post '/upload' do
  unless params[:file] && (tmpfile = params[:file][:tempfile]) && (name = params[:file][:filename])
    return haml(:upload)
  end
  while blk = tmpfile.read(65536)
    File.open(File.join(Dir.pwd,"public/uploads", name), "wb") { |f| f.write(tmpfile.read) }
  end
 'terminé'
end

Etudions un peu ce code pour voir comment ça marche. Après avoir sélectionné un fichier et cliqué sur le bouton "Télécharger", un objet file est envoyé au serveur via le hash "params". Cet objet file contient une propriété "tempfile" qui correspond au fichier temporaire créé pendant le téléchargement du fichier. Il contient aussi une propriété "filemane" qui correspond au nom du fichier tel qu'il était défini sur votre système. La première ligne de code vérifie que l'on a bien sélectionné un fichier et utilise les 2 propriétés "tempfile" et "filename" pour initialiser deux variables du même nom. Dans le cas où aucun fichier n'a été sélectionné, le formulaire de téléchargement est simplement ré-affiché (ligne 2).

La boucle while est alors utilisé pour gérer le contenu du fichier au fur et à mesure de son chargement. On fait cela par bloc de 65536 octets qui selon moi devrait servir de tampon pour limiter l'utilisation de la RAM. Ces blocs sont enregistrés dans un fichier dans le répertoire public nommé "uploads". Il est nécessaire d'avoir au préalable créé vous-même ce sous-répertoire "uploads" dans le répertoire "public" de votre application. Le paramètre "wb" indique à Ruby qu'il s'agit d'un fichier binaire (le "b") et qu'il est en écriture seule (le "w"). Vous pouvez retrouver les différentes valeurs acceptées par de paramètre qui défini le mode du fichier au début de la documentation de la classe IO de Ruby. Et pour finir, une fois que le fichier a été entièrement chargé, on se contente pour l'instant d'afficher un simple message "terminé", mais il est bien évident qu'on pourrait faire mieux.

Pour avoir plus d'informations sur l'objet file en Ruby, je vous invite à consulter le chapitre qui est consacré à la classe File sur la version en ligne du Ruby Pickaxe Book.

Note du traducteur : plutôt que de copier "manuellement" le contenu du fichier, on aurait pu utiliser la méthode cp (ou copy) de la classe FileUtils :

  fullname = File.join(Dir.pwd, "public/uploads", name)
  FileUtils.cp(tmpfile.path, fullname)

Heroku

Le code présenté ci-dessus est tout à fait correct et fonctionnel, mais Heroku ne vous permet pas de stocker beaucoup de fichiers sur leurs serveurs (seuls les fichiers relatifs au code de votre application devraient s'y trouver). Par conséquent, vous êtes censés héberger vos fichiers ailleurs. La solution qui vient à l'esprit, c'est d'utiliser Amazon’s Simple Storage Service (S3). Cela vous permet de stocker vos fichiers sur les serveurs d'Amazon pour un coût extrêmement minime. Heroku étant également hébergé sur les serveurs Amazon, en y hébergeant vos propres fichiers vous devriez réduire au maximum les temps de latence pour récupérer vos fichiers.

Inscription à Amazon S3

La première chose à faire, c'est de vous enregistrer sur S3, ce que vous pouvez faire en vous rendant sur le site et en cliquant le bouton "Inscrivez-vous à Amazon S3". Si vous êtes déjà un client d'Amazon, vous pouvez ré-utiliser les informations de votre compte. Une fois que vous avez terminé le processus d'inscription, vous pouvez commencer à ajouter des fichiers à votre compte S3. Pour cela, Amazon propose une console web ou si vous préférez, vous pouvez employer l'extension S3Fox pour Firefox. Amazon S3 utilise un concept de compartiment (bucket) pour gérer vos fichiers. Et vous pouvez créer des dossiers à l'intérieur de chaque compartiment. Personnellement, j'ai l'habitude de définir un compartiment pour chacun de mes sites web.

Le code source Sinatra

Maintenant que vous disposez d'un compte Amazon S3 en état de marche, vous allez pouvoir y enregistrer vos fichiers en utilisant son interface web et en apportant quelques modifications à votre code Sinatra. Pour commence, il faut installer la librairie aws-s3:

C:\Ruby>gem install aws-s3

Lorsque vous vous êtes inscrit à Amazon S3, vous devez avoir reçu deux informations importante : un Access Key ID de 20 chiffres et une Secret Access Key. Vous poiuvez les obtenir en vous identifiant sur la page Amazon Web Services puis en cliquant sur l'onglet "Compte". Puis vous devez cliquer sur le lien "Identification de sécurité". Les informations dont vous avez besoin apparaissent dans une boite au milieu de la page (vous devrez cliquer pour faire apparaitre la clé secrète qui fait 40 caractères).

Une fois que vous avez récupéré ces informations, vous allez pouvoir la commande set de Sinatra pour les enregistrer. Et nous allons en profiter pour ajouter une instruction require afin que la librairie aws-s3 soit inclue dans notre code source :

require 'rubygems'
require 'sinatra'
require 'aws/s3'

set :bucket, 'mybucket'
set :s3_key, THISISANEXAMPLEKEYID
set :s3_secret, Thi$isJu5taNExamp/etO0itSh0u1dBel0NgeR

Bien entendu, pour un site en production il faut définir ces variables en passant par des paramètres d'environnement de Heroku pour que vos clés restent secrètes. Vous pouvez vous reporter au billet Configuration et paramétrage avec Sinatra pour avoir plus d'explications à ce sujet.

Nous devons ensuite nous occuper de nos handlers. Le premier handler pour le GET reste tel quel alors que le second pour le POST doit être légèrement modifié de façon à utiliser la librairie aws-s3 pour établir la connexio avec Amazon S3 et enregistrer le fichier. Vous pouvez voir que nous utilisons pour cela les variables définies auparavant et qu'à part cela, le code Sinatra final reste tel qu'il était :

get '/upload' do
  haml :upload
end

post '/upload' do
  unless params[:file] && (tmpfile = params[:file][:tempfile]) && (name = params[:file][:filename])
    return haml(:upload)
  end
  while blk = tmpfile.read(65536)
    AWS::S3::Base.establish_connection!(
      :access_key_id     => settings.s3_key,
      :secret_access_key => settings.s3_secret)
    AWS::S3::S3Object.store(name,open(tmpfile),settings.bucket,:access => :public_read)     
  end
 'terminé'
end

__END__

@@upload
%h2 Upload
%form{:action=>"/upload",:method=>"post",:enctype=>"multipart/form-data"}
  %input{:type=>"file",:name=>"file"}
  %input{:type=>"submit",:value=>"Télécharger"}

Et c'est tout ! Tout cela devrait amplement vous suffire pour gérer les bases du téléchargement de fichiers avec Sinatra. Il est bien évident que cela peut être amélioré, notamment dans les domaines suivants :

• Un formulaire un peu plus sexy
• Un meilleur retour à la fin du téléchargement (y compris dans le cas où aucun fichier n'a été sélectionné)
• Une barre de progression au fur et à mesure du téléchargement du fichier
• La possibilité de télécharger dans différents dossiers
• Un contrôle du type de fichier téléchargé
• Un traitement des images téléchargées (créer une vignette automatiquement par exemple), bien qu'il s'agisse là d'un sujet qui mérite un billet à lui tout seul,
• La possibilité de pouvoir télécharger plusieurs fichiers à la fois

Une demande répétée des lecteurs de I Dit It My Way est un billet sur l'authentification. Il existe des tas de gems qui permettent de faire ça, mais je préfère programmer ça par moi-même. Voici donc une méthode vraiment simple pour construire le côté administration d'un site web avec Sinatra.

Pour démarrer, il faut créer quelques paramètres :

set :username,'michel'
set :password,'topsecret'
set :token,'1truklong&complike@$e$ouven!r'

Puis les handlers pour les différentes routes. En commençant par l'URL "/admin" pour pouvoir se connecter.

get('/admin') { haml :admin }

Ca ne prend qu'une ligne parce que tout ce qu'il y a à faire c'est d'afficher la vue "admin.haml" :

%form(action="/login" method="post")
  %label(for="username")Code utilisateur :
  %input#username(type="text" name="username")
  %label(for="password")Mot de passe :
  %input#password(type="password" name="password")
  %input(type="submit" value="Connexion") or <a href="/">Annuler</a>

C'est un formulaire tout simple qui contient deux zones de texte pour saisir le code utilisateur et le mot de passe plus un bouton pour valider. Ce formulaire est renvoyé à l'aide d'une requête POST vers l'URL "/login" et nous devons donc ajouter un handler pour la traiter. C'est à ce niveau que nous allons accomplir le plus gros du travail pour authentifier l'utilisateur.

post '/login' do
  if params['username'] == settings.username && params['password'] == settings.password
      response.set_cookie(settings.username,settings.token) 
      redirect '/'
    else
      "Code utilisateur ou mot de passe incorrect"
    end
end

Ce code vérifie tout d'abord si le code utilisateur et le mot de passe saisi via le formulaire (stockés dans le hash params) correspondent à ceux définis dans le paramétrage (les valeurs settings.xxxxx). Si c'est le cas, on crée un cookie en utilisant le code utilisateur comme clé et pour la valeur le "token" qu'on avait configuré au tout début. On pourrait se contenter d'utiliser "true" pour la valeur, mais le fait d'utiliser un token renforce le niveau de sécurité (si quelqu'un sait expliquer comment ?). Lorsque l'utilisateur n'a pas donné le bon code utilisateur ou le bon mot de passe, on renvoie simplement un message d'avertissement.

Et maintenant, tout ce qu'il nous reste à faire c'est de donner la possibilité de se déconnecter. Ce que nous allons faire en gérant l'URL "/logout".

get('/logout') { response.set_cookie(settings.username, false) ; redirect '/' }

Là on modifie le cookie correspondant à l'utilisateur en lui donnant la valeur "false" puis on le renvoie à la racine du site.

On a donc géré tout ce qui concerne l'authentification d'un utilisateur. Il nous reste à traiter la partie autorisation pour réellement autoriser ou interdire l'accès à certaines pages. Pour cela, on va simplement ajouter deux fonctions helper à notre code Ruby :

helpers do
  def admin? ; request.cookies[settings.username] == settings.token ; end
  def protected! ; halt [ 401, 'Not Authorized' ] unless admin? ; end
end

Le premier helper, nommé "admin?", va nous servir pour vérifier si l'utilisateur est connecté ou non, en contrôlant que la valeur du cookie correspond à la valeur configurée pour le token. On pourra l'utiliser cet helper dans le code des handlers ou des vues pour par exemple afficher un message différent selon que l'utilisateur est connecté ou non.

Le second helper, nommé "protected!", utilise le premier helper pour vérifier si l'utilisateur est connecté et si ce n'est pas le cas il interrompt le code te renvoie une erreur HTTP 401 pour indiquer que l'action n'est pas autorisée. On l'utilisera au début du handler d'une route pour indiquer que l'utilisateur doit être connecté pour visualiser ce contenu.

Et pour finir le code source complet d'une application qui regroupe tout le code présenté ci-dessus. Libre à vous de à l'utiliser et de faire vos propres essais avec.

require 'rubygems'
require 'sinatra'

set :username,'Bond'
set :password,'007'
set :token,'osh@kerp@$@l@cuill3re'

helpers do
  def admin? ; request.cookies[settings.username] == settings.token ; end
  def protected! ; halt [ 401, 'Not Authorized' ] unless admin? ; end
end

get '/' do
  haml :index
end

get('/admin') { haml :admin }

post '/login' do
  if params['username'] == settings.username && params['password'] == settings.password
    response.set_cookie(settings.username,settings.token) 
    redirect '/'
  else
      "Code utilisateur ou mot de passe incorrect"
  end
end

get('/logout') { response.set_cookie(settings.username, false) ; redirect '/' }

get '/public' do
  'Tout le monde peut voir ça'
end

get '/private' do
  protected!
  'Rien que pour vos yeux !'
end

__END__
@@layout
!!! 5
%html
  %head
    %meta(charset="utf-8")
    %title Authentication Super Simple
  %body
    %a(href='/admin')Connexion
    %a(href='/logout')Déconnexion
    %a(href='/public')Public
    %a(href='/private')Privé
    = yield
@@admin
%form(action="/login" method="post")
  %label(for="username")Code utilisateur :
  %input#username(type="text" name="username")
  %label(for="password")Mot de passe :
  %input#password(type="password" name="password")
  %input(type="submit" value="Connexion") or <a href="/">Cancel</a>
@@index
-if admin?
  %h1 Bienvenue 007 !
-else
  %h1 Bienvenue !

C'est un exemple simple et sans prétention si vous souhaitez expérimenter un système d'authentification et d'autorisations sous Sinatra. Et si vous avez des idées pour le faire évoluer ou l'améliorer, n'hésitez pas à en faire part dans les commentaires ci-dessous.

Définir des paramètres

Pour définir des variables session d'application qui seront accessible partout dans une application, on peut utiliser la commande set en respectant la syntaxe suivante :

set :name, 'MonSite'
set :author, 'Michel'

Ces variables sont ensuite utilisables dans notre code Ruby sous la forme settings.name et settings.author :

get '/hello' do
  "Cette page a été rédigée par " + settings.author
end

Puis en se connectant à l'URL "/hello" on obtient alors :

Cette page a été rédigée par Michel.

On peut également utiliser la commande set pour modifier les paramètres de certains gems, comme par exemple :

set :haml, { :format => :html5 }

Grâce à quoi Haml génèrera du code HTML5 avec le doctype correct, pas de barre fermante pour la balise image, etc...

Il est même possible de modifier les paramètres par défaut de Sinatra. C'est ce qui permet par exemple de redéfinir le répertoire "public" :

set :public, Proc.new { root }

De cette façon, le répertoire "public" sera identique au répertoire racine du site.

Et pour modifier le répertoire où sont enregistrées les vues :

set :views, Proc.new { File.join(root, "templates") }

Après cela, Sinatra recherchera dans le dossier "templates" pour tous les fichiers de vues de notre application (en lieu et place du répertoire "views" utilisé par défaut).

Quand le paramètre correspond à un booléen, il est possible d'utiliser les commandes enable et disable plutôt que la commande set :

enable :sessions
disable :twitter

Ce qui est exactement identique à :

set :sessions, true
set :twitter, false

La documentation officielle de Sinatra fourni d'autres explications et des exemple, entre autre la liste des paramètres internes de Sinatra.

Les blocs de configuration

Sinatra permet de regrouper un ensemble de paramètres dans un bloc de configuration :

configure do
  set :name, 'michel'
  set :haml, { :format => :html5 }
end

Cela va initialiser tous les paramètres ainsi que tout ce qui est nécessaire au démarrage.

Et cerise sur le gâteau, on peut définir un bloc de configuration pour chaque environnement :

configure :development do
  set :db, File.join("sqlite3://",settings.root, "development.db"
end

configure :test do
  set :db, File.join("sqlite3://",settings.root, "test.db"
end

configure :production do
  File.join("sqlite3://",settings.root, "production.db"
  set :sass, { :style => :compressed }
end

Comme vous pouvez le voir, j'ai configuré Sass pour que sa sortie soit compressée en production et que le fichier généré soit le plus petit possible. Il existe tout un tas d'autres options pour Sass et Haml qui peuvent être initialisées de cette façon.

Gérer des paramètres d'environnement sur Heroku

Pour finir, on a la possibilité de définir des variables d'environnement directement sur Heroku, ce qui nous évite d'avoir à rendre la valeur de certains paramètres publics. Supposons que nous ayons le code ci-dessous :

set :password, 't0psecret'

Le hic c'est que si on compte partager notre code, les autres personnes auront accès à notre mot de passe top secret ! La solution dans ce cas là c'est de définir une variable d'environnement appelée "PASSWORD", chose de très simple à faire depuis une console bash. Il suffit de se placer dans le répertoire de l'application et d'entrer le code ci-dessous :

$ heroku config:add PASSWORD=t0psecret

Ce qui doit renvoyer le message suivant :

Adding config vars:
  PASSWORD    => t0psecret
Restarting app...done.

Il faut utiliser la commande config seule pour lister toutes les variables d'environnement existantes sur Heroku :

$ heroku config

Comme on peut le voir suite à cette commande, Heroku défini déjà par lui-même un certain nombre de variables d'environnement de façon automatique dans le but de nous faciliter la vie :

PASSWORD => t0psecret
DATABASE_URL => postgres://ibzju...s.com/ibzjubamts
RACK_ENV     => production
URL          => http://bloggl.heroku.com

Si on a besoin de se débarrasser de toutes les variables de configuration, on peut employer la commande suivante :

$ heroku config:clear

Ce que Heroku confirmera avant de redémarrer l'application :

Clearing all config vars and restarting app...done.

Après avoir créé nos variables d'environnement sur Heroku, il ne nous reste plus qu'à modifier notre code source pour en tirer parti :

set :password, ENV['PASSWORD'] || 'secret'

Ce code va utiliser la variable d'environnement enregistrée dans ENV['PASSWORD'] si elle est définie ou sinon se contenter du simple mot de passe "secret" défini en dur dans le code. Grâce à cette méthode vous ne risquez pas de divulguer quoique ce soit d'important ou de personnel dans votre code source Ruby.

Pour être complet, le Dev Center d'Heroku présente d'autres informations concernant l'utilisation des variables de configuration sur Heroku.

Suite au visionnage de la présentation @:The Time is Now de Phil Haack au MIX11, j'ai farfouillé dans Visual Studio 2010 et fureté un peu sur l'internet afin de découvrir comment il s'y prenait pour afficher une liste des fichiers ouverts.

Et j'ai trouvé ! Il faut faire Ctrl+Tab :

Après avoir "réparé" mon Visual Studio 2010, j'ai pu me remettre à la version 2 du tutoriel MVC Music Store pour me confronter aux dernières (pour moi) technologies ASP.NET MVC 3 et entre autre Razor et les Data Annotations.

Et justement, j'ai été un peu embarrassé par le fonctionnement de la validation via les Data Annotations dès lors qu'on n'est pas des yankees pure souche.

Par exemple, si je veux passer le prix d'un album de 8,99 à 8,90 j'obtiens l'erreur "The field Prix must be a number." de la part du plugin jQuery Validation.

Et si j'essaie de contourner en saisissant 8.90 (avec un point au lieu de la virgule), c'est l'erreur "The value '8.90' is not valid for Prix." qui prend le relai. Mais dans ce cas, cette erreur n'est pas renvoyée par jQuery Validation mais par la méthode TryUpdateModel() dans le contrôleur : mon PC étant en français, le .NET exige une virgule comme séparateur décimal.

Zut ! Déjà les messages en anglais c'est pas tip-top. Mais que ça m'affiche des valeurs numériques avec des virgules et que ça me gueule dessus quand j'essaie de saisir c'est un peu pénible quand même.

Jusqu'à présent, plutôt que de chercher à gérer le problème virgule, je me contentais de bidouiller la section «globalization» dans le fichier web.config pour que ASP.NET prenne lui aussi le "." comme séparateur décimal :

<configuration>
   <system.web>
      <globalization culture="en-US" />
   </system.web>
</configuration>

Mais cette fois-ci, je me suis dit que j'allai creuser un peu plus sinon ça enlève pas mal d'intérêt aux Data Annotations.

Localiser les messages du plugin jQuery Validation

Déjà, quand on fait des recherches sur la localisation de jQuery Validation, on se rend compte que c'est un problème général qui semble avoir été un peu laissé de côté...

Par contre, si on regarde dans le repository du plugin, il existe un répertoire localization qui contient un fichier messages_fr.js avec les messages d'erreur en français.

Super ! Mais ça ne sert pas à grand chose parce que les messages d'erreurs sont déjà initialisés directement par ASP.NET MVC :(

<input data-val="true" 
       data-val-number="The field Prix must be a number."
       data-val-range="Le champ Prix doit &amp;#234;tre compris entre 0,01 et 100."
       data-val-range-max="100" 
       data-val-range-min="0.01" 
       data-val-required="Le champ Prix est requis." 
       id="Price" name="Price" type="text" value="8,99" />

C'est malin ça de définir les messages d'erreur alors que le plugin jQuery Validation les initialise déjà de son côté. Et c'est encore plus rigolo d'en mettre certains en français et d'autres en anglais :)

Localiser "The field Xxxxx must be a number."

Première méthode pour traduire ce message : supprimer l'attribut "data-val-number" de toutes les zones de saisie et inclure le fichier messages_fr.js (attention, l'ordre des scripts est important) :

<script type="text/javascript">
    $(document).ready(function () {
        $(":input[data-val-number]").attr("data-val-number", "");
    });
</script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script type="text/javascript">

    /* ----- messages_fr.js ----- */
    /*
    * Translated default messages for the jQuery validation plugin.
    * Locale: FR
    */
    jQuery.extend(jQuery.validator.messages, {
        required: "Ce champ est requis.",
        remote: "Veuillez remplir ce champ pour continuer.",
        email: "Veuillez entrer une adresse email valide.",
        url: "Veuillez entrer une URL valide.",
        date: "Veuillez entrer une date valide.",
        dateISO: "Veuillez entrer une date valide (ISO).",
        number: "Veuillez entrer un nombre valide.",
...

Après ça, la saisie d'une valeur incorrecte dans la zone prix n'affiche plus l'erreur "The field Prix must be a number." mais "Veuillez entrer un nombre valide.".

Deuxième méthode : si on veut continuer à indiquer le nom du champ qui pose problème dans le message d'erreur, il faut sortir l'artillerie lourde et utiliser les expressions régulières (l'ordre des scripts est toujours important) :

<script type="text/javascript">
    $(document).ready(function () {
        var reg_us = /The field (.+) must be a number\./gi;
        var msg_fr = "Le champ $1 doit être un nombre.";
        $(":input[data-val-number]").each(function () {
            var message = $(this).attr("data-val-number");
            message = message.replace(reg_us, msg_fr);
            $(this).attr("data-val-number", message);
        });
    });
</script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script type="text/javascript">

    /* ----- messages_fr.js ----- */
    /*
    * Translated default messages for the jQuery validation plugin.
    * Locale: FR
    */
    jQuery.extend(jQuery.validator.messages, {
        required: "Ce champ est requis.",
...

Dans ce cas, la saisie d'une valeur incorrecte dans le prix affiche le message "Le champ Prix doit être un nombre.".

Faire accepter les nombres à virgule à jQuery Validation

C'est bien beau de parler à l'utilisateur en français, mais c'est quand même plus important de lui permettre de pouvoir saisir le prix qu'il veut sans avoir à abandonner les valeurs décimales.

Et là, le plugin jQuery Validation a tout prévu puisque le répertoire localisation contient également des fichiers methods_de.js, methods_nl.js et methods_pt.js. Mais malheureusement pour moi, pas de methods_fr.js en vue :(

En y regardant de plus près, le fichier methods_de.js devrait faire l'affaire. Ce qui se confirme sur le forum developpez.com.

Ni une, ni deux, il suffit de compléter les scripts de la façon suivante (l'ordre des scripts est important) :

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script type="text/javascript">
jQuery.extend(jQuery.validator.methods, {
    date: function(value, element) {
        return this.optional(element) || /^\d\d?\.\d\d?\.\d\d\d?\d?$/.test(value);
    },
    number: function(value, element) {
        return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value);
    }
});
</script>

Et maintenant si je change mon prix en 8,90, je n'ai plus le message "Le champ Prix doit être un nombre.". Non. Maintenant ça me dit que "Le champ Prix doit être compris entre 0,01 et 100.".

C'est des coriaces !

Gérer les virgules dans jQuery Validation

Si c'est ça, je regarde dans le source de jquery.validate.js. Ah ben bien sûr, y'a un problème avec le "range" :

range: function( value, element, param ) {
    return this.optional(element) || ( value >= param[0] && value <= param[1] );
},

Il compare value (le 8,90 que j'ai saisi) avec param[0] (la valeur minimum de 0.01) et param[1] (la valeur maximum de 100). Personne lui a jamais dit qu'on ne peut pas comparer les points et les virgules ?

Et le pire, c'est qu'il fait pareil avec les fonctions "min" et max" le bougre ! Ca va pas se passer comme ça :

/* ----- methods_fr.js ----- */
/*
* Localized default methods for the jQuery validation plugin.
* Locale: FR
*/
jQuery.extend(jQuery.validator.methods, {
    min: function (value, element, param) {
        return this.optional(element) || replaceComma(value) >= replaceComma(param);
    },
    max: function (value, element, param) {
        return this.optional(element) || replaceComma(value) <= replaceComma(param);
    },
    range: function (value, element, param) {
        value = replaceComma(value);
        return this.optional(element) || (value >= replaceComma(param[0]) && value <= replaceComma(param[1]));
    },
    date: function (value, element) {
        return this.optional(element) || /^\d\d?\.\d\d?\.\d\d\d?\d?$/.test(value);
    },
    number: function (value, element) {
        return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value);
    }
});

function replaceComma(value) {
    // Quick & Dirty replace "," by "." as decimal separators
    return value.replace(",", ".");
}

Et après ça, 8,90 passe enfin alors que 100,01 est bien refusé !

Ouf ! Ca devrait faire l'affaire jusqu'à la sortie de jQuery Validation 2.0.

Mise à jour : si j'avais cherché mieux, j'aurais pu trouver le billet Using MVC 3 with non-English Locales de Rick Anderson, le co-auteur du tutoriel Getting Started With MVC3.

J'aime bien les vidéos de Screencasts.org, surtout leur côté 5/10 minutes vite fait pour aborder (ou réviser) un sujet. Après l'introduction à Sinatra, j'ai donc décidé de suivre l'introduction à Haml. Haml (qui se prononce AMeul, comme dans meule) est un langage de template très concis destiné à remplacer HTML dans les applications Rails ou Sinatra.

Cette fois-ci, la vidéo est accompagnée de sa retranscription complète ce qui rend son visionnage encore plus facile.

Après 10 secondes de publicité, on enchaine sur un rappel de la dure condition des développeurs en quête de beauté et de simplicité dans un monde d'IE6, SOAP et autre Dreamweaver.

On rentre ensuite dans le vif du sujet en démarrant avec un petit morceau de code HTML (beurk beurk beurk) tel qu'on en voit souvent :

<div id="profile">
  <div class="left column">
    <div id="date"> 11 November 2010 </div>
    <div id="address"> 1 Infinite Loop </div>
  </div>
  <div class="right column">
    <div id="email"> steve@apple.com </div>
    <div id="bio"> Makes magical tablets </div>
  </div>
</div>

Puis, à partir de ce truc, on nous retrace par petites touches successives la genèse de Haml (miam miam miam) :

#profile
  .left.column
    #date 11 November 2010
    #address 1 Infinite Loop
  .right.column
    #email steve@apple.com
    #bio Makes magical tablets

Pour bien enfoncer le clou, on fait aussi le parallèle entre le template Erb correspondant (ouuh !) :

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= user.email %></div>
    <div id="bio"><%= user.bio %></div>
  </div>
</div>

Et l'équivalent sous Haml (ouah !) :

#profile
  .left.column
    #date= print_date
    #address= user.address
  .right.column
    #email= user.email
    #bio= user.bio

Viennent ensuite quelques explications sur la syntaxe :

• !!! pour déclarer du doctype
• %element pour définir un élément (%html pour la balise <html ...>, %p pour la balise <p>...)
• %element#id pour définir un identifiant
• %element.class pour définir une classe
• possibilité d'omettre %div qui est la balise par défaut
• ajouter des attributs sous la forme (attribut="valeur")
• importance de l'indentation pour imbriquer les balises

Le tutoriel se termine par l'installation d'Haml (gem install haml), un exemple d'utilisation en ligne de commande et un lien pour tester Haml en ligne.

Pour l'instant, je suis dubitatif et je me demande si c'est une vrai bonne idée de masquer autant que ça HTML ?

Juste pour référence, voilà ce que l'exemple de code donnerait avec Razor où on reste plus calqué sur le code HTML :

<div id="profile">
  <div class="left column">
    <div id="date">@Me.print_date()</div>
    <div id="address">@user.address</div>
  </div>
  <div class="right column">
    <div id="email">@user.email</div>
    <div id="bio">@user.bio</div>
  </div>
</div>

Malgré tout (pour s'entrainer en attendant de suivre l'introduction à Sass) le site Html2Haml permet de convertir du code HTML en Haml et un tutoriel en français sur Haml.