Tạo View cập nhật trong ASP.NET MVC
Chúng ta đã tìm hiểu về cách tạo view cho chức năng xem danh sách sinh viên trong phần trước. Trong phần này, chúng ta sẽ tạo view cho chức năng chỉnh sửa thông tin sinh viên.
Người dùng có thể cập nhật thông tin sinh viên bằng cách sử dụng chức năng Edit như hình sau.
View cập nhật thông tin sinh viên sẽ được hiển thị khi bạn nhấp vào nút Edit trong view danh sách sinh viên (Index). Hình dưới đây mô tả đầy đủ các bước chỉnh sửa thông tin sinh viên.
Hình trên minh họa các bước sau.
1. Người dùng nhấp vào liên kết Edit trong view Index sẽ gửi yêu cầu HTTP GET có URL là http://localhost/student/edit/{Id} với tham số Id tương ứng trong chuỗi truy vấn. Yêu cầu này sẽ được xử lý bằng phương thức hành động Edit có HttpVerbs là HttpGet.
2. Phương thức hành động Edit này sẽ lấy dữ liệu sinh viên từ cơ sở dữ liệu dựa trên tham số Id được cung cấp và hiển thị view Edit với dữ liệu sinh viên cụ thể đó.
3. Người dùng có thể chỉnh sửa dữ liệu sinh viên và nhấp vào nút Save trong view Edit. Nút Save sẽ gửi một yêu cầu HTTP POST có URL là http://localhost/Student/Edit kèm theo các trường của biểu mẫu chứa dữ liệu sinh viên.
4. Phương thức hành động Edit có HttpVerbs là HttpPost trong StudentController sẽ cập nhật dữ liệu sinh viên vào cơ sở dữ liệu và hiển thị trang Index với dữ liệu được làm mới bằng phương thức RedirectToAction.
Vì vậy, đây sẽ là quá trình hoàn chỉnh để chỉnh sửa dữ liệu bằng cách sử dụng view Edit trong ASP.NET MVC.
Bây giờ chứng ta sẽ bắt đầu thực hiện các bước trên.
Chúng tôi sẽ sử dụng lớp Model Student đơn giản sau đây cho view Edit của chúng tôi.
public class Student
{
public int StudentId { get; set; }
[Display( Name="Name")]
public string StudentName { get; set; }
public int Age { get; set; }
}Bước 1:
Chúng tôi đã tạo view Index trong phần trước bằng cách sử dụng mẫu List đã có sẵn liên kết Edit như được hiển thị trong hình bên dưới.
Một liên kết Edit sẽ gửi yêu cầu HTTP GET đến phương thức hành động Edit của StudentController kèm theo Id tương ứng trong chuỗi truy vấn.
Ví dụ: liên kết Edit với sinh viên John sẽ nối chuỗi truy vấn Id = 1 vào URL của yêu cầu vì sinh viên John có StudentId là 1 trong cơ sở dữ liệu. Tương tự như vậy, tất cả liên kết Edit sẽ có Id tương ứng với từng sinh viên trong chuỗi truy vấn.
Bước 2:
Bây giờ, hãy tạo một phương thức hành động Edit có HttpVerbs là HttpGet trong StudentController (mặc định sẽ là HttpGet nếu không chỉ định HttpVerbs cho phương thức hành động). Khi nhấp vào liên kết Edit trong view Index ở trên sẽ gửi yêu cầu HTTP GET kèm theo tham số Id đến phương thức hành động Edit.
Phương thức hành động Edit() này sẽ thực hiện hai tác vụ. Trước tiên nó sẽ tìm nạp thông tin sinh viên từ cơ sở dữ liệu có StudentId khớp với Id trong chuỗi truy vấn. Thứ hai, nó sẽ hiển thị view Edit với thông tin sinh viên để người dùng có thể cập nhật.
Vì vậy, phương thức hành động Edit() phải có một tham số là Id. ASP.NET MVC sẽ tự động liên kết giá trị Id trong URL của yêu cầu với tham số Id của phương thức hành động Edit.
using MVC_BasicTutorials.Models;
namespace MVC_BasicTutorials.Controllers
{
public class StudentController : Controller
{
IList<Student> studentList = new List<Student>()
{
new Student(){ StudentId=1, StudentName="John", Age = 18 },
new Student(){ StudentId=2, StudentName="Steve", Age = 21 },
new Student(){ StudentId=3, StudentName="Bill", Age = 25 },
new Student(){ StudentId=4, StudentName="Ram", Age = 20 },
new Student(){ StudentId=5, StudentName="Ron", Age = 31 },
new Student(){ StudentId=6, StudentName="Chris", Age = 17 },
new Student(){ StudentId=7, StudentName="Rob", Age = 19 }
};
public ActionResult Edit(int Id)
{
//Get the student from studentList sample collection for demo purpose.
//Get the student from the database in the real application
var std = studentList.Where(s => s.StudentId == Id).FirstOrDefault();
return View(std);
}
}
}Như bạn có thể thấy trong phương thức Edit ở trên, chúng tôi đã sử dụng truy vấn LINQ để lấy sinh viên có StudentId khớp với Id được cung cấp từ bộ danh sách sinh viên.
Sau đó chúng tôi đưa đối tượng sinh viên đó vào view Edit. Trong một ứng dụng thực tế, bạn có thể lấy sinh viên từ cơ sở dữ liệu.
Bây giờ, nếu bạn nhấp vào liên kết Edit từ view Index thì bạn sẽ gặp lỗi sau.
Đã xảy ra lỗi ở trên vì chúng tôi chưa tạo view Edit. Theo mặc định, ASP.NET MVC sẽ tìm tệp Edit.cshtml hoặc Edit.vbhtml hoặc Edit.aspx hoặc Edit.ascx trong thư mục Views -> Student hoặc Views -> Shared.
Bước 3:
Để tạo view Edit, bạn nhấp chuột phải vào bên trong phương thức hành động Edit và nhấp vào Add View… Nó sẽ mở hộp thoại Add View.
Trong hộp thoại Add View, giữ nguyên tên view mặc định là Edit. (Bạn cũng có thể thay đổi theo yêu cầu của bạn nhưng bạn phải chỉ định rõ tên view trong phương thức View() khi trả về.)
Chọn Edit trong danh sách thả xuống Template và cũng chọn Student cho lớp Model class như bên dưới.
Bây giờ, nhấp vào nút Add để tạo view Edit.cshtml trong thư mục Views -> Student. View Edit.cshtml đã có sẵn nội dung như bên dưới.
@model MVC_BasicTutorials.Models.Student
@{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Edit</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Student</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.StudentId)
<div class="form-group">
@Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger"< })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>Xin lưu ý rằng Edit.cshtml có phương thức HtmlHelper là @using (Html.BeginForm()) để tạo phần tử biểu mẫu HTML. Html.BeginForm gửi một yêu cầu HTTP POST theo mặc định.
Bây giờ, chạy lại và nhấp vào liên kết Edit của bất kỳ sinh viên nào trong view Index. View Edit sẽ được hiển thị thông tin sinh viên tương ứng như hình bên dưới.
Bạn có thể chỉnh sửa Tên hoặc Tuổi của Sinh viên và nhấp vào Save. Khi nhấp vào Save, biểu mẫu (form) sẽ gửi một yêu cầu HTTP POST tới phương thức hành động Edit có HttpVerbs là HttpPost.
Sử dụng HTTP POST là vì yêu cầu POST gửi dữ liệu của biểu mẫu như một phần của yêu cầu, nó không gửi dữ liệu biểu mẫu trong chuỗi truy vấn như HTTP GET.
Bước 4:
Bây giờ, hãy viết phương thức hành động Edit có HttpVerbs là HttpPost để lưu dữ liệu sinh viên đã chỉnh sửa.
[HttpPost]
public ActionResult Edit(Student std)
{
//write code to update student to database here
return RedirectToAction("Index");
}Như bạn có thể thấy trong đoạn mã trên, phương thức hành động Edit() yêu cầu một đối tượng Student làm tham số đầu vào. ASP.NET MVC sẽ tự động liên kết các trường dữ liệu của biểu mẫu với tham số Student của phương thức hành động Edit(). Vui lòng truy cập phần Model Binding để biết thêm thông tin.
Bây giờ, bạn có thể cập nhật thông tin vào cơ sở dữ liệu và chuyển hướng nó sang phương thức hành động Index. (chúng tôi chưa viết mã để cập nhật cơ sở dữ liệu ở đây cho mục đích demo).
Bây giờ, chạy lại ứng dụng và nhấp vào nút Save trong view Edit. Nó sẽ lưu thông tin cập nhật và chuyển hướng sang phương thức hành động Index().
Theo cách này, bạn có thể tạo chức năng chỉnh sửa thông tin sinh viên bằng cách sử dụng mẫu Edit khi tạo view. Ngoài ra, bạn cũng có thể tạo view Edit mà không cần sử dụng mẫu Edit có sẵn.
Ví dụ sau đây minh họa lớp StudentController với tất cả các phương thức hành động.
using MVC_BasicTutorials.Models;
namespace MVC_BasicTutorials.Controllers
{
public class StudentController : Controller
{
IList<Student> studentList = new List<Student>()
{
new Student(){ StudentId=1, StudentName="John", Age = 18 },
new Student(){ StudentId=2, StudentName="Steve", Age = 21 },
new Student(){ StudentId=3, StudentName="Bill", Age = 25 },
new Student(){ StudentId=4, StudentName="Ram", Age = 20 },
new Student(){ StudentId=5, StudentName="Ron", Age = 31 },
new Student(){ StudentId=6, StudentName="Chris", Age = 17 },
new Student(){ StudentId=7, StudentName="Rob", Age = 19 }
};
// GET: Student
public ActionResult Index()
{
return View(studentList);
}
public ActionResult Edit(int Id)
{
//Get the student from studentList sample collection for demo purpose.
//Get the student from the database in the real application
var std = studentList.Where(s => s.StudentId == Id).FirstOrDefault();
return View(std);
}
[HttpPost]
public ActionResult Edit(Student std)
{
//write code to update student
return RedirectToAction("Index");
}
}
}