Accueil > Asp.Net MVC, jQuery > jQuery Templates et ASP.Net MVC 3

jQuery Templates et ASP.Net MVC 3

MVC3 nous offre une prise en charge très complète d’Ajax. En standard, il est possible de faire un appel Ajax pour injecter du HTML dans notre page à un endroit donné. Il est aussi possible de récupérer avec un appel Ajax des objets sérialisés en JSON grâce à l’objet JsonResult. Mais une fois ce JSON récupéré il faut bien le traiter en JavaScript pour en faire quelque chose.
C’est là qu’entre en jeu jQuery et surtout un plugin très intéressant développé par Microsoft et qui est actuellement en bêta : jQuery templates. Ce plugin permet de créer des templates html et de les remplir avec des données mais tout ça côté client. On peut voir ce mécanisme comme un portage du bien connu contrôle Repeater d’asp.net du serveur vers le client. Les avantages sont énormes: il nous suffit de récupérer une source de données sérialisée en JSON et de la mapper sur un template html défini. Tout le fastidieux travail de reconstruction d’une partie du DOM en javascript pour mettre à jour des données qu’on a récupérées devient inutile. Voyons plus en détail comment fonctionne ce plugin et comment l’utiliser dans un site MVC.

Les bases de jQuery Templates

Je vais voir avec vous comment faire un template simple. Pour ce qui est plus compliqué, vous avez pleins d’exemples ICI.
En gros, si vous connaissez Razor vous ne serez pas trop dépaysés: un template se présente comme du html dans lequel on incorpore avec une syntaxe particulière des propriétés de notre objet source.
Par exemple:

<script id="detailTemplate" type="text/x-jquery-tmpl">
    <div>
        Elément sélectionné: ${Prenom} ${Nom}
        <table>
            <tbody>
                <tr>
                    <td>
                        Prenom: 
                    </td>
                    <td>
                        <input type="text" value="${Prenom}"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Nom: 
                    </td>
                    <td>    
                        <input type="text" value="${Nom}"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</script>

Ici on a créé un tableau contenant des textbox ayant pour valeur les propriétés Prenom et Nom de notre source de données grâce à la syntaxe ${Prenom} et ${Nom}. Simple n’est-ce pas?

Il existe également des moyens de contrôler plus finement le template avec par exemple les instructions {{each}}, {{if}} et {{else}} ou même de composer des templates. Si vous voulez en savoir plus là dessus faites moi un feedback et je ferai un article détaillé sur la création de templates.

Pour lancer le rendu, il suffit d’appeler la fonction .tmpl().
Par exemple si je veux utiliser le template #detailTemplate avec les données data et l’insérer dans la page dans la div #Detail j’appellerai:

$(« #detailTemplate »).tmpl(data).appendTo(« #Detail »);

Un gros inconvénient: le référencement

Tout ça a l’air très bien et très simple mais il y a cependant des inconvénients. Le premier et le plus gros: tout ce qui est injecté dans la page via client templating ne sera évidemment pas référencé par google!
Pour un site qui a besoin de référencement, il est donc obligatoire de faire le rendu via le serveur et non via une requête Ajax. Pour cela, il faut que tous les liens qui déclenchent des actions ajax soient en fait de vrais liens qui fonctionnent même avec le javascript désactivé et le serveur doit être capable de rendre la page dans n’importe quel état possible. Une fois que c’est le cas, il est toujours temps de plugger sur les liens des fonctions javascript qui iront renseigner un template client pour profiter du gain de performance et de bande passante qui vont avec.

Ce travail peut être très fastidieux et très compliqué à maintenir. En effet dans ce cas, il faut non seulement maintenir un template client mais aussi une vue générée par le serveur et les maintenir en cohérence. Cela complique énormément les développements et augmente les coûts de maintenance.

NB: Cet inconvénient n’est pas spécifique aux templates client, le problème se pose pour tout appel se faisant en Ajax et même toute mise à jour de l’affichage faite via du javascript. A quand des robots de référencement qui exécuteront le javascript des pages? Vu l’évolution du web et l’importance que prennent les traitements côté client cela me paraît plus qu’indispensable et avec l’arrivée de html 5 ça n’ira pas en s’arrangeant.

Mesure du gain

J’ai fait une petite appli toute bête qui servira à comparer un appel ajax classique en MVC via @Ajax.ActionLink qui renvoie une vue partielle et un autre appel qui renvoie un JsonResult qui sert à renseigner un template équivalent à la vue partielle.

Vous pouvez voir l’application ici pour tester vous même.

Voilà l’onglet réseau de firebug pour la requête en Ajax ActionLink:

Requete Ajax Action Link

La requête prend 8ms et télécharge 545B de données.

Voyons maintenant la version Json:

Requête Ajax Json

Requête Ajax Json

La requête prend maintenant 4ms et ne télécharge que 42B de données.

Le résultat est sans appel en terme de performance et de bande passante… C’est compréhensible d’un côté on ne télécharge que des données brutes et de l’autre on met en branle tout le système de génération d’une vue du framework MVC et on ne télécharge pas que des données mais un markup html complet.

Le code source de l’application de démo est disponible ICI si vous voulez vous amuser avec.

Pour conclure, les templates client amènent un gain énorme de performance et s’insèrent très bien dans un site MVC grâce à la possibilité de renvoyer directement du JSON sur une action. Attention cependant sur les sites qui doivent être référencés à bien être capable de naviguer sur le site même avec le javascript désactivé.

Enjoy…

  1. Aucun commentaire pour l’instant.
  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :