ASP.NET - MVC - Tạo Edit View
Tạo View Edit Trong MVC ASP.NET
Chúng ta đã có View Index trong bài học trước, trong phần này, chúng ta sẽ tạo một View Edit sử dụng template scaffolding. Người sử dụng có thể cập nhật sinh viên trong Edit view
View Edit sẽ được hiển thị khi nhấp vào nút Edit trong chế độ xem Index. Hình dưới đây mô tả tập hợp đầy đủ các bước chỉnh sửa.
Giải thích các bước hình trên
- Người sử dụng click vào link Edit sẽ gửi một yêu cầu đến link http://localhost/student/edit/{Id} cùng tham số id trong chuỗi truy vấn. Yêu cầu này sẽ được xử lý bằng phương thức Edit.
- Phương thức Edit sẽ lấy dữ liệu sinh viên từ cơ sở dữ liệu, dựa vào tham số id được cung cấp và hiển thị chế độ chỉnh sửa.
- Người dùng có thể chỉnh sửa dữ liệu và click vào nút Save. Nút Save sẽ gửi yêu cầu httpPOST ttp://localhost/Student/Edit cùng với dữ liệu.
- phương thức Edit httpPOST trong StudentControll cuối cùng sẽ cập nhật dữ liệu vào cơ sở dữ liệu và hiển thị dữ liệu lên trang Index với dữ liệu được làm mới bằng phương thức RedirectToAction như bước thứ tư.
Đây sẽ là quá trình hoàn chỉnh để chỉnh sửa dữ liệu bằng cách sử dụng Edit trong ASP.NET MVC.
Giờ chúng ta sẽ làm các bước trên
Chúng ta sẽ sử dụng lớp model Student để Edit.
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 ta đã tạo một View Index trong phần trước.
Một liên kết Edit sẽ gửi yêu cầu HttpGet đến phương thức Edit trong StudentController với StudentId tương ứng trong chuỗi truy vấn.
Bước 2:
Bây giờ, chúng ta tạo một phương thức Edit trong lớp StudentController. Trang Index hiển thị dữ liệu như ở trên sẽ gửi tham số StudentId đến phương thức Edit khi vào liên kết Edit
Phương thức HttpGet Edit() phải 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ừ nguồn dữ liệu, có StudentId khớp với StudentId trong chuỗi truy vấn. Thứ hai, nó sẽ hiển thị chế độ xem 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 Edit() nên có một tham số StudentId. Framework MVC sẽ tự động liên kết một chuỗi truy vấn với các tham số của phương thức hành động nếu tên đó khớp.phải luôn luôn đảm bảo rằng tên tham số khớp với chuỗi truy vấn.
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 để đưa Sinh viên mẫu có StudentId khớp với StudentId được cung cấp, sau đó chúng tôi đưa đối tượng Sinh viên đó vào View. Trong một ứng dụng thực tế, bạn có thể lấy sinh viên từ cơ sở dữ liệu thay vì lấy mẫu.
Bây giờ, nếu bạn nhấp vào liên kết Edit từ chế độ xem Chỉ mục thì bạn sẽ gặp lỗi sau.
Đã xảy ra lỗi ở trên vì chúng ta chưa tạo chế độ xem Chỉnh sửa. Theo mặc định, Framework MVC sẽ tìm tệp Edit.cshtml hoặc Edit.vbhtml hoặc Edit.aspx hoặc Edit.ascx trong thư mục View -> Student hoặc Shared.
Bước 3:
Để tạo View, nhấp chuột phải vào bên trong phương thức Edit và nhấp vào Add View .. Nó sẽ mở đối thoại Add View.
Trong hộp thoại Add View., giữ tên Edit. (Bạn có thể thay đổi theo yêu cầu của bạn.)
Chọn Edit trong Template và chọn Student trong Model Class
Bây giờ, nhấp vào Add để tạo view Edit.cshtml trong thư mục View/ Student như hiển thị 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 bao gồm phương thức HtmlHelper @USE (Html.BeginForm ()) để tạo một form html. Html.BeginForm gửi một yêu cầu HTTPPost theo mặc định.
Bây giờ, nhấp vào liên kết Edit của bất kỳ sinh viên nào trong trang Index. Edit sẽ được hiển thị thông tin sinh viên có liên kết Edit được nhấp, như hiển thị 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. Phương thức lưu phải gửi yêu cầu HttpPOST vì yêu cầu POST gửi dữ liệu form như một phần của yêu cầu, không phải trong chuỗi truy vấn. Vì vậy, viết một phương thức POST là bước thứ tư.
Bước 4:
Bây giờ, hãy viết phương thức POST Edit để lưu học sinh đã chỉnh sửa như dưới đây
[HttpPost]
public ActionResult Edit(Student std)
{
//write code to update student
return RedirectToAction("Index");
}
Như bạn có thể thấy trong đoạn mã trên, phương thức Edit () yêu cầu một đối tượng Student làm tham số đầu vào. Phương thức Edit () sẽ tự động liên kết dữ liệu của form với tham số sinh viên. Tại đây, 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 trang Index.
Bây giờ, nhấp vào nút Save trong chế Edit sẽ lưu thông tin cập nhật và chuyển hướng nó sang phương thức Index ().
Theo cách này, bạn có thể cung cấp chức năng chỉnh sửa bằng cách sử dụng mẫu scaffolding. Tuy nhiên, bạn cũng có thể tạo chế Edit mà không cần sử dụng mẫu scaffolding.
Ví dụ sau đây minh họa lớp StudentControll 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");
}
}
}