Rendu partiel et asynchrone avec ASP MVC & jQuery

Publié le 17/08/2015

En faisant du chargement asynchrone, on donne l'impression à l'utilisateur que la page se charge plus rapidement qu'elle ne se charge réellement: le serveur répond une première fois avec le squelette (et le contenu) de la page racine, et une fois que cette page est complètement chargée, nous allons récupérer le reste des données (équivalent à un $(document).ready(function(...) { ... }); en jQuery).

Les contr√īleurs

Au niveau des contr√īleurs, nous d√©finissons une premi√®re m√©thode Details (qui retourne un ActionResult) et qui envoie les donn√©es vers une vue pour l'affichage de la page principale.

public ActionResult Details(int? id)
{
	/* fetch objects */

	return View(...);
}

Nous d√©finissons ensuite une deuxi√®me m√©thode, qui retourne cette fois un objet de type PartialViewResult (mais qui fonctionne grosso-modo de la m√™me mani√®re que la premi√®re, dans la mesure o√Ļ le r√©sultat sera √©galement transmis √† un template Razor):

public PartialViewResult GetAdUser(string samAccountName)
{
	/* fetch objects */

	return PartialView(...);
}

Inclure jQuery dans nos templates

Dans la page principale (celle qui correspond à la méthode /Details), nous allons inclure jQuery

<script src="/Assets/js/jquery-1.8.2.js" type="text/javascript"></script>

Oui. C'est tout.

Implémentation

Finalement, nous allons écrire un petit morceau de code pour charger les données une fois que la page est complètement chargée.

En détails, nous devons d'abord:

  1. d√©finir l'emplacement o√Ļ le r√©sultat sera stock√©, soit avec une classe, soit avec un identifiant, de mani√®re √† pouvoir le r√©cup√©rer facilement au travers d'un s√©lecteur jQuery.
  2. Définir un attribut data-url, permettant de spécifier l'endpoint à contacter.

Par exemple:

<div class="partialContent" data-url="/GetAdUser?samAccountName=fred">
	Loading...
</div>

Le Loading... peut être remplacé par une petite image qui s'agite, ça rendra très très bien. Dans cet exemple, nous utilisons l'attribut class pour identifier les éléments devant être chargés de manière asynchrone, quand la page a terminé son rendu. L'attribut data-url permet de spécifier l'URL qui doit être contactée.

Finalement, le code Javascript permettant d'opérer la magie est le suivant:

<script type="text/javascript">
	$(document).ready(function(e) {
		$(".partialContent").each(function (index, item) {
			var url = $(item).data("url");
			if (url && url.length > 0)
				$(item).load(url);
		});
	});
</script>

Pour chaque élément ramené par le sélecteur $(".partialContent") (= tous les éléments ayant la classe partialContent), nous récupérons la valeur de l'attribut data-url et nous chargeons le résultat de cette action à l'intérieur de l'élément actuel.

Dans l'exemple ci-dessus, le résultat va donc remplacer le Loading....