Kerangka MVC - Dukungan Ajax

Seperti yang mungkin Anda ketahui, Ajax adalah singkatan dari Asynchronous JavaScript and XML. Kerangka kerja MVC berisi dukungan bawaan untuk Ajax yang tidak mengganggu. Anda dapat menggunakan metode helper untuk menentukan fitur Ajax Anda tanpa menambahkan kode di semua tampilan. Fitur di MVC ini didasarkan pada fitur jQuery.

Untuk mengaktifkan dukungan AJAX yang tidak mengganggu di aplikasi MVC, buka file Web.Config dan setel properti UnobtrusiveJavaScriptEnabled di dalam bagian appSettings menggunakan kode berikut. Jika kunci sudah ada di aplikasi Anda, abaikan langkah ini.

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

Setelah ini, buka file tata letak umum _Layout.cshtmlfile terletak di bawah folder Views / Shared. Kami akan menambahkan referensi ke perpustakaan jQuery di sini menggunakan kode berikut -

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

Buat Aplikasi Ajax yang Tidak Mengganggu

Pada contoh berikut, kita akan membuat formulir yang akan menampilkan daftar pengguna di sistem. Kami akan menempatkan dropdown yang memiliki tiga opsi: Admin, Normal, dan Tamu. Jika Anda memilih salah satu dari nilai-nilai ini, daftar pengguna yang termasuk dalam kategori ini akan ditampilkan menggunakan pengaturan AJAX yang tidak mengganggu.

Step 1 - Buat file Model Model.cs dan salin kode berikut.

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 - Buat file Controller bernama UserController.cs dan buat dua metode aksi di dalamnya menggunakan kode berikut.

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- Sekarang buat Tampilan parsial bernama GetUserData dengan kode berikut. Tampilan ini akan digunakan untuk merender daftar pengguna berdasarkan peran yang dipilih dari tarik-turun.

@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- Sekarang buat View GetUser dengan kode berikut. Tampilan ini akan mendapatkan data secara asinkron dari Tindakan GetUserData pengontrol yang dibuat sebelumnya.

@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 - Terakhir, ubah entri Route.config untuk meluncurkan Pengontrol Pengguna.

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

Step 6 - Jalankan aplikasi yang akan terlihat seperti screenshot berikut.

Jika Anda memilih Admin dari tarik-turun, itu akan pergi dan mengambil semua pengguna dengan tipe Admin. Ini terjadi melalui AJAX dan tidak memuat ulang seluruh halaman.