ASP.NET Core - Razor Edit Form là gì?

ASP.NET Core - Razor Edit Form là gì?

ASP.NET Core - Razor Edit Form là gì?

Trong chương này, chúng tôi sẽ tiếp tục thảo luận về những người trợ giúp thẻ. Chúng tôi 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 các chi tiết của một nhân viên hiện có. Chúng tôi 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ẽ đi đến hành động Chỉnh sửa trên HomeContoder.

@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 tôi chưa có hành động Chỉnh sửa, nhưng chúng tôi sẽ cần ID nhân viên mà chúng tôi có thể chỉnh sửa. Vì vậy, trước tiên chúng ta hãy tạo 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.

Xem nhà
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 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 tôi có thể nói rằng chúng tôi 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ị nằm 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 điều khiển cụ thể.

Trong trường hợp này, chúng tôi muốn đi đến hành động Chỉnh sửa trên cùng một bộ điều khiển và chúng tôi 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ó nên được sử dụng một HTTPPost.

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

Trong thẻ nhãn, chúng tôi đã sử dụng trình trợ giúp thẻ asp-for nói rằng đâ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, như tên nhân viên.

Chúng ta hãy đến lớp HomeContoder và thêm hành động Chỉnh sửa trả về dạng xem cung cấp cho người dùng một biểu mẫu để chỉnh sửa một 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 với một httpPost như 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); 
}

Đầu tiên, chúng ta cần một hành động chỉnh sửa sẽ đáp ứng yêu cầu GET. Nó sẽ mất 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. Trước tiên chúng tôi 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 tôi 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 tôi sẽ hiển thị chế độ xem Chỉnh sửa.

Chúng tôi cũng cần phản hồi với httpPost mà biểu mẫu sẽ gửi.

Chúng ta hãy thêm một lớp mới trong tệp HomeControll.cs như trong chương trình sau đây.

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

Trong Hành động chỉnh sửa sẽ phản hồi với httpPost sẽ lấy EmployeeEditViewModel, nhưng không phải là nhân viên, vì chúng tôi 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 tôi, đại loại như / home / edit / 1.

Biểu mẫu sẽ luôn được gửi trở 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 tôi luôn cần kiểm tra xem ModelState có hợp lệ 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 tôi 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 tôi sẽ trả về chế độ xem và cho phép người dùng thử lại. Mặc dù trong một rea

Nguyễn Minh Tuấn

Nguyễn Minh Tuấn

Bài viết liên quan

Trả lời tới ASP.NET Core - Razor Edit Form là gì?

Đăng nhập

Cảm ơn bạn đã phản hồi!