MVC Framework - Soporte Ajax

Como ya sabrá, Ajax es una abreviatura de JavaScript asincrónico y XML. MVC Framework contiene soporte integrado para Ajax discreto. Puede utilizar los métodos auxiliares para definir sus características de Ajax sin agregar un código en todas las vistas. Esta función en MVC se basa en las funciones de jQuery.

Para habilitar el soporte discreto de AJAX en la aplicación MVC, abra el archivo Web.Config y configure la propiedad UnobtrusiveJavaScriptEnabled dentro de la sección appSettings usando el siguiente código. Si la clave ya está presente en su aplicación, puede ignorar este paso.

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

Después de esto, abra el archivo de diseño común _Layout.cshtmlarchivo ubicado en Vistas / Carpeta compartida. Agregaremos referencias a las bibliotecas jQuery aquí usando el siguiente código:

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

Cree una aplicación Ajax discreta

En el ejemplo que sigue, crearemos un formulario que mostrará la lista de usuarios en el sistema. Colocaremos un menú desplegable con tres opciones: Administrador, Normal e Invitado. Cuando seleccione uno de estos valores, mostrará la lista de usuarios que pertenecen a esta categoría usando una configuración AJAX discreta.

Step 1 - Cree un archivo Model.cs y copie el siguiente código.

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 - Cree un archivo de controlador llamado UserController.cs y cree dos métodos de acción dentro de él usando el siguiente código.

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- Ahora cree una Vista parcial llamada GetUserData con el siguiente código. Esta vista se utilizará para representar la lista de usuarios según el rol seleccionado en el menú desplegable.

@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- Ahora cree un View GetUser con el siguiente código. Esta vista obtendrá de forma asincrónica los datos de la acción GetUserData del controlador creada anteriormente.

@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 - Finalmente, cambie las entradas de Route.config para iniciar el controlador de usuario.

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

Step 6 - Ejecute la aplicación que se verá como la siguiente captura de pantalla.

Si selecciona Administrador en el menú desplegable, buscará todos los usuarios con el tipo de Administrador. Esto está sucediendo a través de AJAX y no recarga toda la página.