Rendu partiel et asynchrone avec ASP MVC & jQuery

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