Framework MVC - Support Ajax

Comme vous le savez peut-être, Ajax est un raccourci pour JavaScript et XML asynchrones. Le MVC Framework contient un support intégré pour Ajax discret. Vous pouvez utiliser les méthodes d'assistance pour définir vos fonctionnalités Ajax sans ajouter de code dans toutes les vues. Cette fonctionnalité de MVC est basée sur les fonctionnalités de jQuery.

Pour activer la prise en charge AJAX discrète dans l'application MVC, ouvrez le fichier Web.Config et définissez la propriété UnobtrusiveJavaScriptEnabled dans la section appSettings à l'aide du code suivant. Si la clé est déjà présente dans votre application, vous pouvez ignorer cette étape.

<add key = "UnobtrusiveJavaScriptEnabled" value = "true" />

Après cela, ouvrez le fichier de mise en page commun _Layout.cshtmlfichier situé sous le dossier Views / Shared. Nous ajouterons ici des références aux bibliothèques jQuery en utilisant le code suivant -

<script src = "~/Scripts/jquery-ui-1.8.24.min.js" type = "text/javascript">
</script> 

<script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" type = "text/javascript">
</script>

Créer une application Ajax discrète

Dans l'exemple qui suit, nous allons créer un formulaire qui affichera la liste des utilisateurs du système. Nous allons placer une liste déroulante avec trois options: Admin, Normal et Invité. Lorsque vous sélectionnez l'une de ces valeurs, il affichera la liste des utilisateurs appartenant à cette catégorie en utilisant une configuration AJAX discrète.

Step 1 - Créez un fichier Model.cs et copiez le code suivant.

using System;  

namespace MVCAjaxSupportExample.Models { 
   
   public class User { 
      public int UserId { get; set; } 
      public string FirstName { get; set; } 
      public string LastName { get; set; } 
      public DateTime BirthDate { get; set; } 
      public Role Role { get; set; } 
   }  
   
   public enum Role { 
      Admin, 
      Normal, 
      Guest 
   } 
}

Step 2 - Créez un fichier Controller nommé UserController.cs et créez deux méthodes d'action à l'intérieur de celui-ci en utilisant le code suivant.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web.Mvc; 
using MVCAjaxSupportExample.Models;  

namespace MVCAjaxSupportExample.Controllers {
   
   public class UserController : Controller { 
      
      private readonly User[] userData = 
      { 
         new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin}, 
         new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin}, 
         new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal}, 
         new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal}, 
         new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest} 
      }; 
      
      public ActionResult Index() { 
         return View(userData); 
      } 
      
      public PartialViewResult GetUserData(string selectedRole = "All") { 
         IEnumerable data = userData; 
         
         if (selectedRole != "All") { 
            var selected = (Role) Enum.Parse(typeof (Role), selectedRole); 
            data = userData.Where(p => p.Role == selected); 
         } 
         
         return PartialView(data); 
      }  
      
      public ActionResult GetUser(string selectedRole = "All") { 
         return View((object) selectedRole); 
      } 
   } 
}

Step 3- Créez maintenant une vue partielle nommée GetUserData avec le code suivant. Cette vue sera utilisée pour afficher la liste des utilisateurs en fonction du rôle sélectionné dans la liste déroulante.

@model IEnumerable<MVCAjaxSupportExample.Models.User> 

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.BirthDate) 
      </th> 
      <th></th> 
   </tr>  

   @foreach (var item in Model) { 
   <tr> 
      <td> 
         @Html.DisplayFor(modelItem => item.FirstName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.LastName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.BirthDate) 
      </td> 
      
      <td> 
         
      </td> 
   </tr> 
}  
</table>

Step 4- Créez maintenant un View GetUser avec le code suivant. Cette vue obtiendra de manière asynchrone les données de l'action GetUserData du contrôleur créé précédemment.

@using MVCAjaxSupportExample.Models 
@model string 

@{ 
ViewBag.Title = "GetUser"; 

AjaxOptions ajaxOpts = new AjaxOptions { 
UpdateTargetId = "tableBody" 
}; 
} 

<h2>Get User</h2> 
<table> 
   <thead>
      <tr>
         <th>First</th>
         <th>Last</th>
         <th>Role</th>
      </tr>
   </thead> 
   
   <tbody id="tableBody"> 
      @Html.Action("GetUserData", new {selectedRole = Model }) 
   </tbody> 
</table>  

@using (Ajax.BeginForm("GetUser", ajaxOpts)) { 
   <div> 
      @Html.DropDownList("selectedRole", new SelectList( 
      new [] {"All"}.Concat(Enum.GetNames(typeof(Role))))) 
      <button type="submit">Submit</button> 
   </div> 
}

Step 5 - Enfin, modifiez les entrées Route.config pour lancer le contrôleur utilisateur.

defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }

Step 6 - Exécutez l'application qui ressemblera à la capture d'écran suivante.

Si vous sélectionnez Admin dans la liste déroulante, il ira chercher tous les utilisateurs de type Admin. Cela se produit via AJAX et ne recharge pas la page entière.