MVC Framework - Suporte Ajax

Como você deve saber, Ajax é uma abreviatura para Asynchronous JavaScript and XML. O MVC Framework contém suporte integrado para Ajax discreto. Você pode usar os métodos auxiliares para definir seus recursos Ajax sem adicionar um código em todas as visualizações. Este recurso no MVC é baseado nos recursos do jQuery.

Para habilitar o suporte AJAX discreto no aplicativo MVC, abra o arquivo Web.Config e defina a propriedade UnobtrusiveJavaScriptEnabled dentro da seção appSettings usando o código a seguir. Se a chave já estiver presente em seu aplicativo, você pode ignorar esta etapa.

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

Depois disso, abra o arquivo de layout comum _Layout.cshtmlarquivo localizado na pasta Views / Shared. Vamos adicionar referências às bibliotecas jQuery aqui usando o seguinte 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>

Crie um aplicativo Ajax discreto

No exemplo a seguir, criaremos um formulário que exibirá a lista de usuários do sistema. Colocaremos um menu suspenso com três opções: Admin, Normal e Convidado. Quando você seleciona um desses valores, ele exibe a lista de usuários pertencentes a esta categoria usando uma configuração AJAX discreta.

Step 1 - Crie um arquivo de modelo Model.cs e copie o código a seguir.

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 - Crie um arquivo de controlador chamado UserController.cs e crie dois métodos de ação dentro dele usando o código a seguir.

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- Agora crie uma visão parcial chamada GetUserData com o código a seguir. Esta visualização será usada para renderizar a lista de usuários com base na função selecionada no menu suspenso.

@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- Agora crie um View GetUser com o seguinte código. Esta visualização obterá de forma assíncrona os dados da ação GetUserData do controlador criado 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, altere as entradas Route.config para iniciar o Controlador de usuário.

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

Step 6 - Execute o aplicativo que será semelhante à imagem a seguir.

Se você selecionar Admin na lista suspensa, ele irá buscar todos os usuários com o tipo Admin. Isso está acontecendo via AJAX e não recarrega a página inteira.