Ce billet est le second d’une série sur les techniques d’optimisation du temps de chargement d’une application ASP.NET MVC. Le premier article sur la compression et la minification du CSS et JavaScript peut être consulté sur cette page.

Les requêtes des utilisateurs sur une page d’un site Web qu’il soit statistique ou dynamique engendre couramment le chargement de plusieurs éléments et de nombreuses opérations (chargement des images, CSS, JavaScript, données depuis une en base de données, etc.). Imaginez un intervalle de temps pendant lequel près de 100 requêtes sont effectuées sur votre site, et que durant cette période, le même contenu est retourné par votre application. Tout le long ce moment, votre application reprend 100 fois les mêmes opérations pour retourner un contenu identique.

La mis en cache est un procédé permettant d’améliorer considérablement le temps de chargement d’une page Web et économiser la bande passante, en évitant d’exécuter plusieurs fois certaines opérations (chargement des données, lecture d’une information dans la base de données, etc.) en stockant le contenu de cette page quelque part.

Activer la mise en cache

Le Framework ASP.NE MVC depuis la version 1 dispose d’un mécanisme pour la mise en a cache d’une application, qui repose essentiellement sur la même technique utilisée par ASP.NET. Il a été amélioré à partir de la version 3 pour coller avec les spécificités de la plateforme.

L’activation de la mise en cache se fait via l’attribut [OutputCache] qui peut être ajoutée soit individuellement à une action contrôleur, ou alors à une classe entière d’un contrôleur

Le code ci-dessous permet de mettre en cache pendant 30 secondes la sortie de l’action Index.

[OutputCache(Duration = 30)] //mise en cache pour 30 secondes
public ActionResult Index()
{
    ViewBag.Message = "Cette page a été mise e cache à " + DateTime.Now;

    return View();
}

Pour mettre en cache une classe entière d’un contrôleur, il suffit de décorer la classe avec l’attribut OutputCache comme l’illustre le code ci-dessous :

[OutputCache(Duration = 30)] //mise en cache pour 30 secondes
    public class HomeController : Controller
    {
       
        public ActionResult Index()
        {
            ViewBag.Message = "Cette page a été mise e cache à " + DateTime.Now;

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }
}

Si vous exécutez ce code, vous vous rendrez compte que la date et l’heure affichées ne vont pas varier chaque fois que vous allez actualiser la page, jusqu’à ce que les 30 secondes soient écoulées.

NB: Il faut noter que le temps de sauvegarde des données de la page n’est pas garanti. En cas de manque de ressources mémoires, le cache va commencer à vider automatiquement son contenu.

Personnaliser la mise en cache

En dehors de la propriété Duration qui permet de définir le temps de mise en cache, d’autres propriétés dont il est important de connaitre sont disponibles pour vous permettre de personnaliser la mise en cache des données de votre page selon votre convenance et les spécificités de la page.

Location

La propriété location permet de définir l’emplacement pour enregistrer l’objet mis en cache. Il est possible d’enregistre l’objet mis en cache sur le serveur, le client, les deux ou toutes les autres options de l’enum OutputCacheLocation. Les différentes valeurs qu’elle peut prendre sont :

– Any
– Client
– Downstream
– Server
– None
– ServerAndClient

Par défaut, la valeur Any est utilisée lorsque cette propriété n’est pas spécifiée. L’orientation vers la mise en cache côté client, côté serveur ou les deux doit se faire suivant vos besoins. Si vous souhaitez afficher par exemple des informations personnalisées à l’utilisation comme son heure de connexion, son login, ses statistiques, etc. vous devez utiliser dans ce cas la mise en cache côté client.

Le code ci-dessous permet de mettre en cache la méthode d’action Index uniquement chez le client.

[OutputCache(Duration = 10, Location = OutputCacheLocation.Client)]
 public ActionResult Index()
 {
     ViewBag.Message = "Cette page a été mise en cache à " + DateTime.Now;

     return View();
 }

VaryByParam

Supposons un instant que vous voulez afficher les détails sur un produit à partir de son identifiant. Cela suppose qu’à chaque fois que l’identifiant du produit va changer, les détails affichés doivent également changer. Comment modifier la mise en cache pour que le contenu change automatiquement lorsque l’ID change. C’est à ce stade qu’intervient la propriété VaryByParam. Cette propriété permet de créer différentes versions d’un même contenu, dès que l’un des paramètres du formulaire ou de l’URL change.

Le code ci-dessous illustre comment vous pouvez l’utiliser.

[OutputCache(Duration = 3600, VaryByParam="id")]
        public ViewResult Details(short id)
        {
            Articles article = db.Articles.Find(id);
            return View(article);
        }

En procédant ainsi, plusieurs versions du contenu de la méthode d’action sont mises en cache jusqu’à expiration de la période de mise en cache.

Créer un profil de cache dans le Web.Config

Le fichier de configuration de votre application peut être utilisé pour créer un profil un cache. L’utilisation de cette technique présente plusieurs avantages :

– vous pouvez créer un profil de cache et appliquer celui-ci à plusieurs actions ou contrôleurs.

– vous pouvez modifier le comportement de votre profil de cache dans le Web.config sans avoir besoin de recompiler votre application.

Par exemple, la section de configuration Web « caching » définit un profil de cache nommé MyCacheProfil. Cette section « caching » doit apparaître dans la section « system.web » du fichier Web.Config.

<system.web>
    <caching>
      <outputCacheSettings>
        <outputCacheProfiles>
          <add name="MyCacheProfile"  duration="60" />
        </outputCacheProfiles>
      </outputCacheSettings>
    </caching>
  </system.web>

Le contrôleur suivant illustre comment appliquer le profil MyCacheProfile sur une action contrôleur à l’aide de l’attribut [OutputCache].

[OutputCache(CacheProfile="MyCacheProfile")]
        public ActionResult Index()
        {
            ViewBag.Message = "Cette page a été mise en cache à " + DateTime.Now;

            return View();
        }

Le cache de sortie fournir un moyen simple pour améliorer radicalement les performances de vos applications ASP.Net MVC. Au travers de cet article, vous avez découvert comment vous pouvez utiliser cette technique. Restez connecté à mon blog pour la suite des astuces sur l’optimisation du temps de chargement d’une page Web.

En dehors d’un foutu message “Unable to load one or more of the requested types. Retrieve the LoaderExceptions property for more information”, rien ne permet d’identifier clairement la source de cette erreur.

Après plusieurs recherches, il semblerait que l’erreur soit générée par Entity Framework. En effet, lorsque vous utilisez Entity Framework, celui-ci est configuré par défaut pour charger tous les types des assemblys référencées, afin d’identifier les différents types des entités pour votre modèle objet. Si l’un des types ne peut être chargé, alors Entity Framework va générer cette erreur.

Il existe plusieurs solutions pour fixer ce problème :

– vous pouvez marquer la copie locale de toutes les assemblys référencées dans votre application à True ;

– dans une autre mesure, il suffit de supprimer toutes les DLL dans le dossier bin et procéder à une nouvelle génération de votre application.

– il est également possible que les bibliothèques System.Data.Entity et System.Web.Entity soient corrompues. Pour mon cas par exemple, lors du déploiement de mon application, après investigation, je me suis rendu compte que les fichiers System.Data.Entity.dll et System.Web.Entity.dll avaient respectivement pour tailles 1640 Ko et 63 ko, pourtant dans le framework .NET, ces fichiers avaient pour tailles 4360 Ko et 135 Ko. En les remplaçant simplement avant le déploiement de l’application, cela a résolu ce bug.

Mais, le véritable problème ici, c’est d’identifier réellement l’assemblys qui pose problème. Pour cela, vous pouvez simplement utiliser le code suivant :

try
{
    //Le code qui pose problème.
}
catch (ReflectionTypeLoadException ex)
{
    StringBuilder sb = new StringBuilder();
    foreach (Exception exSub in ex.LoaderExceptions)
    {
        sb.AppendLine(exSub.Message);
        if (exSub is FileNotFoundException)
        {
            FileNotFoundException exFileNotFound = exSub as FileNotFoundException;
            if(!string.IsNullOrEmpty(exFileNotFound.FusionLog))
            {
                sb.AppendLine("Fusion Log:");
                sb.AppendLine(exFileNotFound.FusionLog);
            }
        }
        sb.AppendLine();
    }
    string errorMessage = sb.ToString();
   }

N’oubliez pas d’ajouter une référence à System.IO et System.Reflection;

Et voilà. Dorénavant, lorsque vous allez exécuter votre application et qu’il y’aura un problème avec le chargement d’un composant, vous aurez un message clair et les détails sur l’assembly qui pose problème.

À noter que ce bug n’existe plus lorsque l’on utilise Entity Framework avec le framework .NET 4.5, il ne scanne plus toutes les assemblys de l’application lors de son exécution.

– 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

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

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

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

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

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

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

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

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

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

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

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

BundleTable.Bundles.EnableDefaultBundles();

Et c’est tout ;).

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

using Microsoft.Web.Optimization;

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

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

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

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

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

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

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

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

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

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

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

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

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

BundleTable.Bundles.EnableDefaultBundles();

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

BundleTable.Bundles.Add(jsBundle);

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

BundleTable.Bundles.Add(cssBundle);

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

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

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

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

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

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

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

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

À première vue, il semblerait qu’il y ait une référence circulaire dans ma hiérarchie d’objets qui n’est pas prise en charge par le sérialiseur JSON.

En essayant de procéder au débogage de la procédure, je me suis rendu compte que le problème n’était pas au niveau de mon code, mais plutôt au niveau de la classe qui s’occupe de la sérialisation.

Quelle est donc la cause de cette erreur :

Pour les tables ayant des relations, l’utilitaire de mappage objet relationnel, génère des propriétés de référence dans chaque entité.

Prenons par exemple le schéma suivant de ma base de données :

Pour la table Liste_produit, L’objet généré aura une propriété Facture. Cependant, pour la table Facture, l’objet généré aura également une propriété Liste_produit. Conséquence : l’objet facture est lié à l’objet Liste_produit et vice-versa.

Ce scénario permet bien évidemment de bénéficier de beaucoup plus d’options lors du traitement de ces entités, mais crée cependant une ambiguïté pour le sérialiseur JSON lors de l’opération de sérialisation. D’où la génération de cette erreur.

Comment résoudre cela ?

Pour résoudre ce type de problème, nous pouvons utiliser deux solutions.

La première solution qui est plutôt simple est de marquer la relation comme une propriété interne.

Perso, je préfère ne pas utiliser cette méthode, car elle m’oblige à modifier mon EDM (Entity Data Model).

La seconde solution, qui est celle pour laquelle j’ai opté, consiste en l’utilisation d’un autre ViewModel en lieu et place de celui généré automatiquement par l’utilitaire de mappage objet/relationnel (ORM).

Cette approche est plus élégante dans la mesure ou elle permettra de sélectionner uniquement les données dont nous avons besoin et sérialiser uniquement celles qui nous intéressent. La conséquence directe est la réduction de la taille des données qui seront retournées dans notre vue et une amélioration de performance de notre application.

Pour utiliser cette méthode, nous devons :

– Dans un premier temps, créer une nouvelle classe qui contiendra uniquement les propriétés dont nous avons besoin.

public partial class ProduitL
    {

        public short Id_produit 
        {
            get; 
            set; 
        }
        public string Libelle_produit 
        { 
            get; 
            set; 
        }
        public string Conditionnement 
        { 
            get; 
            set; 
        }
        public int Quantite 
        { 
            get; 
            set; 
        }
        public decimal Prix 
        { 
            get; 
            set; 
        }
    }

Nous allons ensuite modifier la méthode d’action de notre contrôleur comme suit :

public JsonResult Facture(short id)
        {

            var results = from lp in db.Liste_produit
                    where lp.Id_facture == id
                    select new ProduitL
                    {
                        Id_produit = lp.Id_produit,
                        Libelle_produit = lp.produit.Libelle_ produit,
                        Conditionnement = lp. produit.Conditionnement,
                        Quantite = lp.Quantite,
                        Prix = lp.Prix  
                        
                    };
            return Json(results);
        }

ET voilà, à l’exécution de notre application, nous n’aurons plus cette erreur qui peut s’avérer désorientant pour certains.

Dans le même ordre d’idée, nous allons continuer à explorer les nouveautés du Framework Web avec cette fois, une analyse détaillée des améliorations apportées au modèle Web par défaut.

Pour cela, nous allons comme d’habitude lancer notre environnement Visual Studio, qui bien évidemment contient ASP.NET MVC 4 Developer Preview et procéder à la création d’un nouveau projet.

Dans la zone de sélection des modèles de projet, nous allons choisir le modèle Internet Application et valider ensuite sur OK.

Procédons à l’exécution de notre application (ctrl + f5) :

On peut s’apercevoir que le design du modèle par défaut auquel nous avons été habitués depuis la première version d’ASP.NET MVC jusqu’à la version trois a été totalement remanié et est désormais beaucoup plus esthétique.

Rendu adaptatif (Adaptive Rendering) avec CSS Media Query et Viewport

La nouveauté la plus intéressante que je vais noter est cependant ce qui se cache derrière ce nouveau Template. Pour illustrer cela, je vais exécuter un modèle de base d’ASP.NET MVC 3 et celui de MVC4 avec un terminal mobile. Ici, je vais utiliser un émulateur d’Opera Mobile :

À première vue, on se rend compte que le texte de notre site sur MVC 3 est carrément illisible, tandis que le contenu de celui en MVC 4 a été adapté en fonction de la taille du terminal.

Ceci est possible grâce à l’implémentation d’une nouvelle fonctionnalité de rendu adaptatif, qui couple le tag meta viewport et le CSS Media Queries.

Tag meta viewport

Pour un site Web classique de largeur par exemple 980px, le navigateur mobile va se charger de redimensionner le contenu proportionnellement. Du coup, à l’affichage, l’on peut se retrouver avec des caractères beaucoup trop petits, carrément illisibles, comme c’est le cas avec notre site sous ASP.NET MVC 3.

La balise meta viewport permet au navigateur de comprendre que l’affichage de notre page doit être adapté en fonction de la taille du terminal sur lequel est exécutée l’application. En spécifiant cette balise dans une page, au lieu de procéder à une réduction du texte, le navigateur redessine plutôt la page de telle sorte qu’elle soit parfaitement conforme aux dimensions de l’appareil.

La balise meta viewport est renseignée dans le fichier _layout de votre projet :

<meta name="viewport" content="width=device-width">

CSS Media Queries

Nous avons grâce au meta viewport, spécifié à notre navigateur qu’il peut adapter le contenu de notre page en fonction de la taille du terminal. Cependant, celui-ci n’est pas assez futé pour définir automatiquement les règles d’affichages et les dispositions graphiques de votre page.

C’est à ce stade qu’interviennent les Media Queries. Cette fonctionnalité introduite par le CSS3 va permettre de définir des règles d’affichage personnalisées en fonction du type de média, de la taille de la fenêtre, de la résolution de l’écran, etc.

À titre d’exemple, avec le script suivant, l’affichage de ma page dans un navigateur ayant une taille supérieure à 850px sera en bleu, tandis que sur un navigateur ayant une taille max de 850px, elle aura un background noir.

body {background-color:blue;
      color:black;}
@media only screen and (max-width: 850px) {
    body {background-color:black;
          color :white ;}
}

En effet, lors du chargement de la page, le navigateur applique plutôt le code CSS contenu dans le bloc @media si la résolution de l’écran est inférieure ou égale à celle définie par l’attribut max-width.

Vous trouverez les règles d’affichage personnalisées pour le modèle de projet par défaut d’ASP.NET MVC4 dans le fichier Site.css, dans le bloc de code @media only screen and (max-width: 850px).

Utilisation de jQuery UI

Une autre amélioration qui a été apportée au modèle est l’utilisation du JavaScript pour fournir une interface utilisateur plus riche. Les pages connexion et inscription utilisent désormais jQuery UI pour afficher à l’écran une page beaucoup ergonomique :

Conclusion

Il est intéressant de constater que des règles CSS ont été définies dans le Template Web par défaut pour prendre en charge les tailles d’écrans différents. Mais, je tiens à signaler que ce modèle n’est pas adapté pour la navigation sur les écrans tactiles. Par exemple, vous pouvez remarquer qu’il n’utilise pas la bibliothèque jQuerie Mobile.

À mon humble avis, se serait bien que soit introduit un autre template dans ASP.NET MVC 4 qui couple le modèle mobile et le modèle Web pour fournir une application optimisée à la fois pour les terminaux mobiles et les navigateurs Desktop.

En tout cas peut-être d’ici à la publication de la version finale, ce sera le cas ;).

Je vais aujourd’hui m’attarder sur un autre Helper Razor qui m’a été d’une grande utilité récemment pour implémenter une nouvelle fonctionnalité dans une application Web.

En effet, je devais intégrer une fonction pour envoyer des mails dans l’application Web que j’avais migré récemment d’ASP.NET MVC 2 vers ASP.NET MVC 3.

Au lieu de procéder de façon standard comme j’en avais l’habitude, j’ai jeté un rapide coup d’œil sur le Helper Razor WebMail qui m’a permis en l’espace de quelques minutes d’écrire mon module d’envoi des mails, au point ou je n’ai pas pu m’empêcher d’utiliser le temps de libre qui me restait pour écrire ce billet de blog sur ce composant.

Je vais donc vous montrer dans ce petit article comment configurer le WebMail Helper et l’utiliser dans une application ASP.MVC 3 pour l’expédition des mails.

Vous devez disposer de Visual Studio 2010 et ASP.NET MVC 3. Dans votre projet, vous allez dans un premier temps créer le modèle qui sera utilisé.

Pour la validation des données, j’ai utilisé les DataAnnotations. Le code du modèle est le suivant :

public class WebMailModel
    {

        [Required(ErrorMessage = "L'adresse mail est obligatoire")]
        [DataType(DataType.EmailAddress)] 
        [Display(Name = "Adresse mail")]
        public string AMail { get; set; }
        [Required(ErrorMessage = "L'objet est obligatoire")]
        [Display(Name = "Objet")]
        public string MObjet { get; set; }
        [Display(Name = "Corps du message")]
        public string MCorps { get; set; }
    }

Nous allons maintenant créer l’action du contrôleur dans le dossier correspondant.

Le contrôleur doit contenir les méthodes suivantes :

//
      // GET: /WebMailModel/
      public ActionResult MailSend()
      {
          return View();
      }

      //
      // POST: /WebMailModel/
      [HttpPost]
      public ActionResult MailSend(WebMailModel M)
      {
          
      }

Dans la méthode post, nous allons écrire le code permettant d’envoyer des mails en utilisant le Helper WebMail.

Dans un premier temps, nous allons ajouter un bloc If qui nous permettra de vérifier la validation des données. Ensuite nous devons configurer la classe WebMail en fournissant le nom du serveur STMP. Vous pouvez également définir un compte utilisateur et un port si cela est requis par votre serveur de messagerie en fournissant des valeurs pour les attributs UserName, Password, SmtpPort.

La méthode Send du Helper Webmail sera ensuite utilisée pour envoyer le mail, en passant en paramètre l’adresse du destinataire, l’objet du message, le corps du message et enfin l’adresse de l’expéditeur.

En cas d’erreur (serveur SMTP incorrect par exemple), un message sera affiché dans le formulaire avec le tracé de la pile de l’erreur. Sinon, l’utilisateur sera rédirectionné vers une page de confirmation de l’envoi du message. Le code complet de cette méthode est le suivant :

public ActionResult MailSend()
        {
            return View();
        }

        [HttpPost]
        public ActionResult MailSend(WebMailModel M)
        {
            if (ModelState.IsValid)
            {
                try
                {
                    WebMail.SmtpServer = "mail.monserveur.com";
                    WebMail.Send(M.AMail, M.MObjet, M.MCorps, "st@monserveur.com");

                }

                catch (Exception Ex)
                {

                    ViewData.ModelState.AddModelError("Error", Ex.Message);
                
                }

                return RedirectToAction("Index", "Accueil");
            }
              
            return View();
        }

Nous allons enfin générer la vue fortement typée associée à l’action MailSend(). Je ne vais pas m’attarder dessus. Pour cela, je vous renvois à mon billet de blog sur la création d’un formulaire Razor avec ASP.NET MVC 3 pour voir comment créer une vue fortement typée.

Le code de votre vue doit ressembler à ceci.

@model MvcApplication2.Models.WebMailModel

@{
    ViewBag.Title = "MailSend";
}

<h2>Envoyez vos suggestions par Mail</h2>

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

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>WebMailModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.AMail)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.AMail)
            @Html.ValidationMessageFor(model => model.AMail)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.MObjet)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MObjet)
            @Html.ValidationMessageFor(model => model.MObjet)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.MCorps)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.MCorps)
            @Html.ValidationMessageFor(model => model.MCorps)
        </div>

        <p>
            <input type="submit" value="Envoyer" />
        </p>
    </fieldset>
}

Et à l’exécution vous obtiendrez le résultat suivant :

Et voilà ;), nous venons en l’espace de quelques minutes de mettre sur pied notre fonction d’expédition de mails.

Vous vous rendre compte une fois de plus de la puissance de ces méthodes d’aides introduites par Razor qui fournissement un moyen simple et cohérent d’effectuer des tâches de développement Web dynamique qui, autrement, exigeraient beaucoup de code personnalisé.

Référence :

– Description de la classe WebMail.

Logiquement, étend plus à l’aise avec le moteur de vue Razor qui – à mon avis – est plus facile, expressif, compact, fluide et rend la vue beaucoup plus simple, j’ai donc décidé pour mes développements futurs de l’utiliser.

Certes, il est possible au sein d’une même application ASP.NET d’utiliser des moteurs de vue différents pour chaque vue ASP.NET. Mais je n’en veux pas autant le gars d’à côté qui pourra maintenir cette application, au point de l’obliger à avoir une maitrise à la fois du moteur ASP.NET standard et le moteur Razor.

Donc l’utilisation de Razor et le moteur ASP.NET classique dans ma solution pour moi la rend un peu difficile à maintenir et je trouve la solution plutôt indigeste. Au final, j’ai donc décidé de convertir tous mes fichiers ASPX (moteur ASP.NET classique) en fichiers cshtml (moteur Razor).

Comment procéder ? Réécrire entièrement mes formulaires avec Razor ? Ça ! Pas question.

Heureusement, après quelques recherches je suis tombé sur l’extension WebFormsRazorConverterVsExtension pour Visual Studio 2010 (merci aux développeurs de Telerik pour cet outil ;)).

L’outil a été développé à la base par Telerik pour la migration de ses applications d’exemples en ASP.NET standard vers Razor, l’éditeur a décidé de mettre cet outil à la disposition des développeurs gratuitement.

L’extension peut être téléchargée et installée depuis Visual Studio.
Pour cela, cliquez sur le menu Tools, ensuite sur Extension Manager pour afficher la fenêtre de gestion des extensions Visual Studio.

Effectuez une recherche pour retrouver l’extension WebFormsRazorConverterVsExtension, et cliquez ensuite sur le bouton Install pour lancer son téléchargement et son installation.

Lorsque vous aurez la fenêtre de confirmation de la fin de l’installation du composant, redémarrez votre environnement de développement pour que les modifications apportées à Visual Studio soient prises en compte.

Vous verrez désormais un nouvel item « Convert to Razor CSHTML) ajouté dans le menu Tools, cliquez dessus pour afficher la fenêtre de conversion des fichiers aspx en cshtml.

Dans cette fenêtre, cliquez sur le bouton Select Web Forms View(s) et sélectionnez les fichiers aspx que vous souhaitez convertir et cliquez sur le bouton Convert pour lancer la conversion de fichiers aspx en fichier Razor cshtml.

Par exemple, je vais convertir mon fichier aspx contenant le code suivant en cshtml :

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Clients>" %>

<asp:Content ID="clientTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Client
</asp:Content>

<asp:Content ID="ClientContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Nouveau client</h2>
    
    <% using (Html.BeginForm()) { %>
        <%: Html.ValidationSummary(true) %>
        <fieldset>
            <legend>Clients</legend>
    
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Nom) %>
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.Nom) %>
                <%: Html.ValidationMessageFor(model => model.Nom) %>
            </div>
    
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Prenom) %>
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.Prenom) %>
                <%: Html.ValidationMessageFor(model => model.Prenom) %>
            </div>
    
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Email) %>
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.Email) %>
                <%: Html.ValidationMessageFor(model => model.Email) %>
            </div>
    
            <p>
                <input type="submit" value="Valider" />
            </p>
        </fieldset>
    <% } %>
    
    </asp:Content>

J’ouvre donc la fenêtre de conversion, je sélectionne mon fichier et l’emplacement de sauvegarde et je clic ensuite sur Convert.

Et hop, il me génère le fichier .cshtml correspondant, contenant l’équivalent avec Razor du code ASP.NET dans mon fichier ASPX.
@model MvcApplication1.Models.Clients

@section TitleContent {

    Client

}


    <h2>Nouveau client</h2>
    
    @using (Html.BeginForm()) { 
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Clients</legend>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Nom)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Nom)
                @Html.ValidationMessageFor(model => model.Nom)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Prenom)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Prenom)
                @Html.ValidationMessageFor(model => model.Prenom)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>
    
            <p>
                <input type="submit" value="Valider" />
            </p>
        </fieldset>
     } 

Bon, un petit problème qui est tout à fait logique avec le Layout, mais le résultat est assez intéressant et je dirais correct à 100 % sur de vues simples et 95% sur des vues compliquées. Néanmoins, il est toujours nécessaire de vérifier si la conversion est correcte pour chaque fichier.

Seul petit bémol pour les développeurs VB.NET, l’outil ne prend pas en charge la syntaxe VB.NET de Razor, donc vous ne pouvez pas l’utiliser pour convertir des fichiers aspx en vbhtml.

L’outil peut être téléchargé manuellement sur cette page.

Nous allons dans cet article découvrir ce nouveau moteur de rendu ASP.NET, sa syntaxe et comment créer des pages ASP.NET en utilisant 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.

L’article est regroupé au sein des chapitres suivants :

– Présentation de Razor

– Prise en charge dans Visual Studio 2010

– Syntaxe de base de Razor

– Les Layouts

– Les Helpers Razor

– Les formulaires dans les vues Razor

– Manipulation des données

– Razor references

L’article complet est disponible sur cette page.

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

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

Bonne lecture

En ce jour, nous allons nous pencher sur le Helper Chart qui est un puissant outil permet de générer avec le minimum d’effort et de code des graphiques dans une page Web.

Le Helper Chart est disponible au sein de l’espace de nom System.Web.Helper. Il supporte de nombreuses options de formatage, plusieurs sources de données (BD, fichier XML, etc.), permettant de générer plus de 30 types (histogrammes, camembert, diagramme en bâton, diagramme en secteur, etc.) de graphiques différents.

Nous verrons donc dans ce billet de blog comment utiliser ce composant dans une application ASP.NET MVC 3 Razor pour afficher un graphique à partir des données d’un fichier XML, comment formater les données et définir les thèmes qui seront appliqués au graphique.

Pour commencer, nous allons d’abord créer une nouvelle application Web ASP.NET MVC 3.

Dans le dossier App Data, nous allons ajouter un fichier XML ayant pour nom « Produits.xml ».

Ensuite, nous allons copier les données suivantes dans ce fichier :

<?xml version="1.0" encoding="utf-8" ?>
<Produits>
  <Produit>
    <Libelle>Disque dur</Libelle>
    <Qte_vendu>45</Qte_vendu>
  </Produit>
  <Produit>
    <Libelle>Clé USB</Libelle>
    <Qte_vendu>66</Qte_vendu>
  </Produit>
  <Produit>
    <Libelle>Barette memoire</Libelle>
    <Qte_vendu>15</Qte_vendu>
  </Produit>
  <Produit>
    <Libelle>Souris</Libelle>
    <Qte_vendu>22</Qte_vendu>
  </Produit>
  <Produit>
    <Libelle>Clavier</Libelle>
    <Qte_vendu>12</Qte_vendu>
  </Produit>
  <Produit>
    <Libelle>Moniteur</Libelle>
    <Qte_vendu>3</Qte_vendu>
  </Produit>
</Produits> 

Nous allons dans un premier temps créer le modèle qui permettra de retourner les données du fichier XML dans un DataView. Le code qui sera utilisé est le suivant :

public class ChartModel
    {
        public DataView Getdata()
        {
            DataSet Ds = new DataSet();
            Ds.ReadXml(HttpContext.Current.Server.MapPath("~/App_Data/Produits.xml"));
            var Dv = new DataView(Ds.Tables[0]);
            return Dv;
        }
    }

On va ensuite ajouter au contrôleur une méthode d’action ChartProduit. Le code de cette méthode est le suivant :

public ActionResult ChartProduit()
        {
            var model = new ChartModel();
            var dataView = model.Getdata();

            var Mychart = new Chart(width: 600, height: 400)
           .AddTitle("Produits et quantités vendus le 05/08/2011")
           .AddSeries("Default",
                 xValue: dataView, xField: "Libelle",
                 yValues: dataView, yFields: "Qte_vendu")
            .GetBytes("png");
            return File(Mychart, "image/png");
        }

Avant de continuer, jetons un petit coup d’œil sur le code de la méthode d’action.

var Mychart = new Chart(width: 600, height: 400)

Est utilisé pour instancier un nouvel objet Chart en spécifiant sa taille.

.AddSeries("Default",
                 xValue: dataView, xField: "Libelle",
                 yValues: dataView, yFields: "Qte_vendu")

Permet de définir le type de graphique, les colonnes qui seront utilisées en abscisse et en ordonnée.

.GetBytes("png"); 

Va retourner une image de notre graphique au format png sous forme d’un tableau de bytes.

Dans la vue (la page index de l’application), nous allons simplement ajouter la ligne de code suivante pour afficher l’image qui sera retournée par le contrôleur.

<img src="@Url.Action("ChartProduit")" />

À l’exécution, nous obtenons le résultat suivant :

L’exemple ci-dessous montre un graphique avec le thème par défaut. Je vais maintenant définira moi-même le thème qui sera appliqué à celui-ci.

public ActionResult ChartProduit()
        {
            var model = new ChartModel();
            var dataView = model.Getdata();

            var Mychart = new Chart(width: 600, height: 400)
           .AddTitle("Produits et quantités vendus le 05/08/2011")
           .AddSeries(chartType: ChartTheme.Green, 
                 xValue: dataView, xField: "Libelle",
                 yValues: dataView, yFields: "Qte_vendu")
            .GetBytes("png");
            return File(Mychart, "image/png");
        }

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

Je peux également changer le type de graphique et afficher un diagramme en secteur.

public ActionResult ChartProduit()
      {
          var model = new ChartModel();
          var dataView = model.Getdata();
          var Mychart = new Chart(width: 600, height: 400, theme: ChartTheme.Vanilla3D)
             .AddSeries("Default",chartType: "pie",
               xValue: dataView, xField: "Libelle",
               yValues: dataView, yFields: "Qte_vendu")
             .GetBytes("png");
          return File(Mychart, "image/png");
      }

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

À noter que vous pouvez définir vos propres thèmes qui seront appliqués au graphique.

La création d’un graphique s’avère relativement simple avec ASP.NET MVC3 grâce au Helper Chart. Vous vous rendez compte à travers ce billet de blog qu’il est facile d’utiliser ce composant. Vous constatez également que le Helper Chart dispose de plusieurs types de graphiques et de plusieurs thèmes pour styler l’affichage à votre convenance.