grimboite/articles/dev/2015-08-17-asp-mvc-partial-rendering.md

Title	Date	Slug	Tags
Rendu partiel (et asynchrone) avec ASP MVC & jQuery	2015-08-17	partial-render-using-asynchronous-js	dev, code, jquery, js

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 d'abord une première fois avec le squelette (et le contenu) de la page racine, puis une fois que cette page est complètement chargée, on va récupérer le reste des données (équivalent du $(document).ready(function(...) { ... });.

Au niveau des contrôleurs, on va définir une première méthode (qui retourne un ActionResult) et qui envoie les données vers une vue pour l'affichage de la page principale. On définit ensuite une deuxième méthode, qui retourne un objet de type PartialViewResult (mais qui fonctionne grosso-modo de la même manière):

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

	return View(...);
}

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

	return PartialView(...);
}

Dans la page principale (celle qui correspond à la méthode /Details), il faut:

• Inclure jQuery
• Ecrire un petit morceau de code pour charger les données une fois que la page est complètement chargée

Inclure jQuery

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

Oui. C'est tout.

Le morceau de code

En fait, on doit d'abord définir l'emplacement où le résultat sera stocké. Soit avec une classe, soit avec un identifiant. 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, on va utiliser l'attribut class pour identifier les éléments devant être appelés après le chargement de la page, et l'attribut data-url pour initier l'URL à contacter.

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>

En gros, pour chaque élément du sélecteur $(".partialContent"), on récupère la valeur de l'attribut data-url et on charge le contenu de cette action en dessous de l'élément actuel. Ici, le résultat va donc remplacer le Loading....