Razor plugin pour SyntaxHighlighter

Publié par Fabrice Michellonet sous le(s) label(s) , le 28 février 2011

Comme beaucoup d'entre vous j'utilise l'excellent SyntaxHighlighter d'Alex Gorbatchev, pour mettre en forme les snippets de code sur mon blog.

Bien qu'il dispose de nombreux plugin de prise en charge de language, parfois très ésotérique, je n'ai encore rien vu pour le language préféré de tous ceux qui font du MVC 3 ou du WebMatrix, j'ai nommé razor.

razor

Du coup, je me suis lancé et voici une toute première version téléchargeable ici

et voici un exemple de mise en forme

@model CustomMVCScaffolder.Models.Employee

@* This partial view defines form fields that will appear when creating and editing entities *@
@Html.LabelFor(model => model.NationalIdNumber)
@Html.EditorFor(model => model.NationalIdNumber) @Html.ValidationMessageFor(model => model.NationalIdNumber)
@foreach (var ourItem in ourList) { if (ourItem != ourList.First()) { outItem.Name } } @Html.ActionLink("Edit", "Edit", new { id=item.UserName }) | @Html.ActionLink("Details", "Details", new { id=item.UserName }) | @Html.ActionLink("Delete", "Delete", new { id=item.UserName }) @Html.Hidden("UserName", Model.UserName)

Voici comment l'utiliser :

  <pre style="brush:razor">
    @Html.Hidden("UserName", Model.UserName)
  </pre>

J'espère que cette petite contribution à la communauté viendra enjoliver les snippets de code que l'on voit ça et là.

Ho... j'oubliais, si vous avez des propositions pour améliorer la mise en forme, je suis preneur.

Transformations web.config d'une Web application.

Publié par Fabrice Michellonet sous le(s) label(s) , le 22 février 2011

On a tous connu ce cas de figure, ou l'on doit déployer une application web sur une plateforme autre que celle sur laquelle on développe (serveur de dev, recette, prod etc...);
A minima on se retrouve à modifier les chaines de connexions vers la/les bases de données, au mieux on a prévu une copie tweakée du web.config par plateforme (avec le gros inconvénient d'avoir maintenant plusieurs fichiers à maintenir en parallèle), on fait ça dans l'urgence et hop ça plante :p.
Surement un petit bout de configuration non que l'on a oublié de reporté dans ce fichier de conf spécifique à l'environnement visé. Ça sent le vécu, tout ça !

Réjouissez-vous ce temps est révolu!

Dans Visual Studio 2010, il possible de mettre en œuvre des transformations sur les fichiers de configuration. L'idée est d'avoir un fichier web.config servant de base, puis pour chaque Configuration de Solution (Debug, Release, etc..) un fichier de transformation contient les modifications apportés vis à vis du fichier de base.

Si l'on ajoute deux Configurations de solutions, par exemple Recette et Prod, puis que l'on clique sur Add Config Transform deux nouveaux fichiers apparaissent Web.Recette.config & Web.Prod.config

L'idée de ce billet n'est pas d'expliquer en détail la syntaxe de transformation bien expliquée sur MSDN; mais afin de poursuivre l'exemple voici mon web.config initial


    

et la transformation pour l'environnement de recette :




Bon maintenant la mauvaise nouvelle (haaa ? j'vous avais pas dit qu'il y avait une mauvaise nouvelle?), c'est que la transformation du fichier de config ne se fait pas lors du build.
Malheureusement, elle n’a lieu que lorsqu'on utilise webDeploy.
La bonne nouvelle? C’est qu'en trafiquant un peu le csproj on peut lancer la tache MSBuild en charge de la transformation.

Allez tout en bas du fichier et modifiez-le comme suit :


    


A partir de maintenant après chaque build le fichier web.config sera transformé et copié dans le répertoire obj/Nom_De_La_Config/web.config

Voilà, c'est tout pour ce soir, j’espère que cette astuce vous facilitera la vie lors de vos futurs déploiements.

MVC3 - Utiliser facilement le Datepicker de JQuery.

Publié par Fabrice Michellonet sous le(s) label(s) le 18 février 2011

Un des points apportant le plus de productivité dans le framework ASP.NET MVC est surement l'avènement des Display & Editor Templates.

Je m'explique si vous suivez les best practices et que vos vues ressemblent plus ou moins à cela :

@model CustomMVCScaffolder.Models.Employee

@* This partial view defines form fields that will appear when creating and editing entities *@
@Html.LabelFor(model => model.NationalIdNumber)
@Html.EditorFor(model => model.NationalIdNumber) @Html.ValidationMessageFor(model => model.NationalIdNumber)
@Html.LabelFor(model => model.Login)
@Html.EditorFor(model => model.Login) @Html.ValidationMessageFor(model => model.Login)
@Html.LabelFor(model => model.JobTitle)
@Html.EditorFor(model => model.JobTitle) @Html.ValidationMessageFor(model => model.JobTitle)
@Html.LabelFor(model => model.BirthDate)
@Html.EditorFor(model => model.BirthDate) @Html.ValidationMessageFor(model => model.BirthDate)
@Html.LabelFor(model => model.Maried)
@Html.EditorFor(model => model.Maried) @Html.ValidationMessageFor(model => model.Maried)
@Html.LabelFor(model => model.Gender)
@Html.EditorFor(model => model.Gender) @Html.ValidationMessageFor(model => model.Gender)
@Html.LabelFor(model => model.HireDate)
@Html.EditorFor(model => model.HireDate) @Html.ValidationMessageFor(model => model.HireDate)

alors au runtime, le framework choisira le composant graphique HTML (Input, select etc...) le plus adapté à afficher les propriétés du model et ca sur toutes vos vues.

La bonne nouvelle, c'est que l'on peut créer nous même des templates pour les nouveaux types et encore mieux modifier les templates liés aux types de base (int, string, DateTime etc..)

Stop le blabla, place au Datepicker.

Ok, on commence par créer dossier un EditorTemplates sous Views/Shared et on y place une nouvelle vue que l'on nommera DateTime.cshtml.

adding an editor

@using MVCTest
@model DateTime?

@Html.Datepicker("", Model.HasValue ? Model.Value.ToShortDateString() : string.Empty, 0)

Remarquez la simplicité, on ne fait qu'appeler une méthode d'extension (que nous allons étudier de suite) et on formatte très légèrement la date (ToShortDateString).

Rajoutons une classe dans notre projet comportant le code suivant :

using System.Collections.Generic;
using System.Web.Mvc;

namespace MVCTest
{
    public static class JQueryHtmlHelpers
    {
        public static MvcHtmlString Datepicker(this HtmlHelper htmlHelper, string name, object value)
        {
            return System.Web.Mvc.Html.InputExtensions.TextBox(htmlHelper, name, value, new Dictionary { { "class", "datepicker" } });
        }
    }
}

Dans cette méthode d'extension, on se contente de demander le rendu d'une TextBox (input html) a laquelle on applique la class css datepicker.
Vous l'aurez compris il ne nous reste plus qu'a écrire un peu de JQuery dans la master page pour que toute les texbox du site ayant la class datepicker se transforment par magie en DatePicker.

$(document).ready(function () {
    $(".datepicker").datepicker();
});

Voila ce que ça donne :

Avant Apres

Je vous laisse imaginer tous les widgets que l'on peut intégrer facilement!