ASP.NET Core - Razor Edit Form và các thông tin liên quan

 Chúng ta sẽ tiếp tục thảo luận về tag helpers. chúng ta cũng sẽ thêm một tính năng mới trong ứng dụng của mình và cung cấp cho nó khả năng chỉnh sửa thông tin chi tiết của một nhân viên hiện có. chúng ta sẽ bắt đầu bằng cách thêm một liên kết ở bên cạnh mỗi nhân viên sẽ chuyển đến hành động Chỉnh sửa trên HomeController.

@model HomePageViewModel  
@{  
   ViewBag.Title = "Home"; 
} 
<h1>Welcome!</h1> 

<table> 
   @foreach (var employee in Model.Employees) { 
      <tr> 
         <td>@employee.Name</td> 
         
         <td> 
            <a asp-controller = "Home" asp-action = "Details" 
               asp-routeid = "@employee.Id">Details</a> 
            
            <a asp-controller = "Home" asp-action = "Edit" 
               asp-routeid = "@employee.Id">Edit</a> 
               
         </td> 
      </tr> 
   } 
</table>

chúng ta chưa có hành động Chỉnh sửa, nhưng chúng ta sẽ cần ID nhân viên mà chúng ta có thể chỉnh sửa. Vì vậy, trước tiên chúng ta hãy tạo một chế độ xem mới bằng cách nhấp chuột phải vào thư mục Lượt xem → Trang chủ và chọn Thêm → Mục mới .

Trong ngăn giữa, chọn Trang xem MVC; gọi trang Edit.cshtml. Bây giờ, bấm vào nút Thêm.

Thêm đoạn mã sau vào tệp Edit.cshtml .

@model Employee 
@{ 
   ViewBag.Title = $"Edit {Model.Name}"; 
} 
<h1>Edit @Model.Name</h1>  

<form asp-action="Edit" method="post"> 
   <div> 
      <label asp-for = "Name"></label> 
      <input asp-for = "Name" /> 
      <span asp-validation-for = "Name"></span> 
   </div> 
   
   <div> 
      <input type = "submit" value = "Save" /> 
   </div> 
</form>

Đối với tiêu đề của trang này, chúng ta có thể nói rằng chúng ta muốn chỉnh sửa và sau đó cung cấp tên nhân viên.

• Ký hiệu đô la phía trước Chỉnh sửa sẽ cho phép bộ thực thi thay thế Model.Name bằng một giá trị trong thuộc tính đó như tên nhân viên.

• Bên trong thẻ biểu mẫu, chúng ta có thể sử dụng các trình trợ giúp thẻ như asp-action và asp-controller. để khi người dùng gửi biểu mẫu này, nó sẽ chuyển trực tiếp đến một hành động cụ thể của bộ điều khiển.

• Trong trường hợp này, chúng ta muốn chuyển đến hành động Chỉnh sửa trên cùng một bộ điều khiển và chúng ta muốn nói rõ ràng rằng đối với phương thức trên biểu mẫu này, nó phải sử dụng một HttpPost.

• Phương thức mặc định cho biểu mẫu là GET và chúng ta không muốn chỉnh sửa nhân viên bằng thao tác GET.

• Trong thẻ nhãn, chúng ta đã sử dụng trình trợ giúp thẻ asp-for cho biết đây là nhãn cho thuộc tính Tên của mô hình. Trình trợ giúp thẻ này có thể thiết lập thuộc tính Html.For để có giá trị chính xác và đặt văn bản bên trong của nhãn này để nó thực sự hiển thị những gì chúng ta muốn, chẳng hạn như tên nhân viên.

Chúng ta hãy chuyển đến lớp HomeController và thêm hành động Chỉnh sửa trả về chế độ xem cung cấp cho người dùng một biểu mẫu để chỉnh sửa nhân viên và sau đó chúng ta sẽ cần một hành động Chỉnh sửa thứ hai sẽ phản hồi một HttpPost như được hiển thị bên dưới.

[HttpGet] 
public IActionResult Edit(int id) { 
   var context = new FirstAppDemoDbContext(); 
   SQLEmployeeData sqlData = new SQLEmployeeData(context); 
   var model = sqlData.Get(id); 
   
   if (model == null) { 
      return RedirectToAction("Index"); 
   } 
   return View(model); 
}

Trước tiên, chúng ta cần một hành động chỉnh sửa sẽ phản hồi yêu cầu GET. Nó sẽ lấy một ID nhân viên. Mã ở đây sẽ tương tự như mã mà chúng ta có trong hành động Chi tiết. Đầu tiên chúng ta sẽ trích xuất dữ liệu của nhân viên mà người dùng muốn chỉnh sửa. chúng ta cũng cần đảm bảo rằng nhân viên đó thực sự tồn tại. Nếu nó không tồn tại, chúng ta sẽ chuyển hướng người dùng trở lại chế độ xem Chỉ mục. Nhưng khi một nhân viên tồn tại, chúng ta sẽ hiển thị chế độ xem Chỉnh sửa.

chúng ta cũng cần phản hồi HttpPost mà biểu mẫu sẽ gửi.

Hãy để chúng ta thêm một lớp mới trong tệp HomeController.cs như trong chương trình sau.

public class EmployeeEditViewModel { 
   [Required, MaxLength(80)] 
   public string Name { get; set; } 
}

Trong Hành động chỉnh sửa sẽ phản hồi HttpPost sẽ lấy một EmployeeEditViewModel chứ không phải chính nhân viên, vì chúng ta chỉ muốn chụp các mục có dạng trong tệp Edit.cshtml.

Sau đây là việc thực hiện hành động Chỉnh sửa.

[HttpPost] 
public IActionResult Edit(int id, EmployeeEditViewModel input) { 
   var context = new FirstAppDemoDbContext(); 
   SQLEmployeeData sqlData = new SQLEmployeeData(context); 
   var employee = sqlData.Get(id); 
   
   if (employee != null && ModelState.IsValid) { 
      employee.Name = input.Name; 
      context.SaveChanges();  
      return RedirectToAction("Details", new { id = employee.Id }); 
   } 
   return View(employee); 
}

Biểu mẫu chỉnh sửa phải luôn được gửi từ một URL có ID trong URL theo quy tắc định tuyến của chúng ta, chẳng hạn như /home/edit/1 .

• Biểu mẫu sẽ luôn đăng lại cùng một URL đó, /home/edit/1.

• Khung MVC sẽ có thể lấy ID đó ra khỏi URL và chuyển nó dưới dạng tham số.

• chúng ta luôn cần kiểm tra xem ModelState có hợp lệ hay không và cũng đảm bảo rằng nhân viên này có trong cơ sở dữ liệu và nó không phải là null trước khi chúng ta thực hiện thao tác cập nhật trong cơ sở dữ liệu.

• Nếu không có điều nào đúng, chúng ta sẽ trả về một chế độ xem và cho phép người dùng thử lại. Mặc dù trong một ứng dụng thực với người dùng đồng thời, nếu nhân viên là null, có thể là do chi tiết nhân viên đã bị ai đó xóa.

• Nếu nhân viên đó không tồn tại, hãy nói với người dùng rằng nhân viên đó không tồn tại.

• Nếu không, hãy kiểm tra ModelState. Nếu ModelState không hợp lệ, thì hãy trả lại chế độ xem. Điều này cho phép sửa lỗi chỉnh sửa và làm cho ModelState hợp lệ.

• Sao chép tên từ mô hình chế độ xem Đầu vào cho nhân viên được lấy từ cơ sở dữ liệu và lưu các thay đổi. Phương thức SaveChagnes() sẽ xóa tất cả những thay đổi đó vào cơ sở dữ liệu.

Sau đây là phần triển khai đầy đủ của HomeController.

using Microsoft.AspNet.Mvc; 

using FirstAppDemo.ViewModels; 
using FirstAppDemo.Services; 
using FirstAppDemo.Entities; 
using FirstAppDemo.Models; 

using System.Collections.Generic; 
using System.Linq; 
using System.ComponentModel.DataAnnotations;  

namespace FirstAppDemo.Controllers { 
   public class HomeController : Controller { 
      public ViewResult Index() { 
         var model = new HomePageViewModel(); 
         using (var context = new FirstAppDemoDbContext()) { 
            SQLEmployeeData sqlData = new SQLEmployeeData(context); 
            model.Employees = sqlData.GetAll(); 
         }  
         return View(model); 
      }  
      public IActionResult Details(int id) { 
         var context = new FirstAppDemoDbContext(); 
         SQLEmployeeData sqlData = new SQLEmployeeData(context); 
         var model = sqlData.Get(id)
         
         if (model == null) { 
            return RedirectToAction("Index"); 
         } 
         return View(model); 
      } 
      [HttpGet] 
      public IActionResult Edit(int id) { 
         var context = new FirstAppDemoDbContext(); 
         SQLEmployeeData sqlData = new SQLEmployeeData(context); 
         var model = sqlData.Get(id); 
            
         if (model == null) { 
            return RedirectToAction("Index"); 
         } 
         return View(model); 
      }  
      [HttpPost] 
      public IActionResult Edit(int id, EmployeeEditViewModel input) { 
         var context = new FirstAppDemoDbContext(); 
         SQLEmployeeData sqlData = new SQLEmployeeData(context); 
         var employee = sqlData.Get(id); 
         
         if (employee != null && ModelState.IsValid) { 
            employee.Name = input.Name; 
            context.SaveChanges();  
            return RedirectToAction("Details", new { id = employee.Id }); 
         } 
         return View(employee); 
      } 
   }
   public class SQLEmployeeData {
      private FirstAppDemoDbContext _context { get; set; }
      public SQLEmployeeData(FirstAppDemoDbContext context) {
         _context = context;
      }
      public void Add(Employee emp) {
         _context.Add(emp);
         _context.SaveChanges();
      }
      public Employee Get(int ID) {
         return _context.Employees.FirstOrDefault(e => e.Id == ID);
      }
      public IEnumerable<Employee> GetAll() {
         return _context.Employees.ToList<Employee>();
      }
   }
   public class HomePageViewModel {
      public IEnumerable<Employee> Employees { get; set; }
   }
   public class EmployeeEditViewModel {
      [Required, MaxLength(80)]
      public string Name { get; set; }
   }
}

>>> Tham khảo: Khóa học ASP.NET MVC