Chargement asynchrone d’une vue partielle avec Razor MVC5 et JS

Lors de projets web, il est fréquent que l’on ai a recharger qu’une partie de la page, et ce serait dommage de recharger complètement la page si le but est d’actualiser qu’une partie des informations.

Nous allons voir le principe de charger une partial view dans une section avec JavaScript et Razor :

1 – Coté contrôleur, C# :

public ActionResult MyFunctionViewRender(int paramKey)
{
     //logique de ma fonction
     return PartialView("_MyCustomPartialView", myModel);
}

2 – Exemple de bouton dans le code html de ma vue :

<!-- en full html -->
<input type="button" class="btn"
       data-targeturl="@Url.Action("MyFunctionViewRender", "MyControllerClassName")"
       value="Click me"  />)

@* razor code *@
@using (Html.BeginForm("MyFunctionViewRender", "MyControllerClassName", null, 
FormMethod.Post, new { id = "myFormId" }))
{
     <a href="javascript:document.getElementById('myFormId').submit()" class="btn">
         Click me
     </a>
}

3 – Coté JS, on effectue l’appel Ajax :

//au document ready, on ajoute l'évènement au bouton
$('.btn').click(clickMe);

//fonction sur l'évènement on_click
function clickMe(event) {   
     event.preventDefault();  
     //pour éviter que l'action continue dans le cas de l'utilisation avec le formulaire Razor  
     $("#render_zone_for_partial").load(
          $(this).attr("data-url"), //l'url de la requête
          { 'paramKey': 1 }, //les parametre en json si besoin
          function (response, status, xhr) { //execute une fois chargé }
     );
}

Le résultat de la requête (ici, le résultat est donc le code html de la partial view), sera chargé dans l’élément spécifié (dans notre cas, l’élément dont l’id est « render_zone_for_partial »).