ASP.NET Web API - Sử dụng phương thức Post
Sử dụng phương thức Post của Web API trong ASP.NET MVC
Trong phần trước, chúng ta đã học cách sử dụng phương thức Get của Web API và hiển thị bản ghi trong ASP.NET View. Ở đây, chúng ta sẽ xem cách sử dụng phương thức Post của Web API để tạo bản ghi mới trong nguồn dữ liệu.
Chúng ta đã tạo Web API bằng phương thức Post trong phần Implement Post Method được hiển thị bên dưới.
Ví dụ: Web API mẫu với phương thức Post
public class StudentController : ApiController
{
public StudentController()
{
}
//Get action methods of the previous section
public IHttpActionResult PostNewStudent(StudentViewModel student)
{
if (!ModelState.IsValid)
return BadRequest("Not a valid model");
using (var ctx = new SchoolDBEntities())
{
ctx.Students.Add(new Student()
{
StudentID = student.Id,
FirstName = student.FirstName,
LastName = student.LastName
});
ctx.SaveChanges();
}
return Ok();
}
}
Trong Web API ở trên, phương thức PostNewStudent sẽ xử lý yêu cầu HTTP POST http://localhost:64189/api/student. Nó sẽ chèn bản ghi mới vào cơ sở dữ liệu bằng Entity Framework và sẽ trả về trạng thái phản hồi 200 OK.
Sau đây là cấu trúc dự án Web API + MVC được tạo ở các phần trước. Chúng tôi sẽ thêm các lớp cần thiết vào dự án này.
Chúng tôi đã tạo lớp StudentViewModel sau đây trong thư mục Models.
Ví dụ: Lớp Model
public class StudentViewModel
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public AddressViewModel Address { get; set; }
public StandardViewModel Standard { get; set; }
}
Bây giờ, hãy tạo chế độ xem MVC để tạo bản ghi mới bằng cách sử dụng phương thức Post của Web API ở trên.
Bước 1:
Đầu tiên, chúng ta cần thêm phương thức hành động "create" để hiển thị chế độ xem "Create New Student" nơi người dùng có thể nhập dữ liệu và gửi dữ liệu. Chúng ta đã tạo lớp StudentController trong phần trước để hiển thị chế độ xem danh sách sinh viên. Ở đây, hãy thêm phương thức hành động "create" để hiển thị chế độ xem "Create New Student" được hiển thị bên dưới.
Ví dụ: MVC Controller
public class StudentController : Controller
{
public ActionResult Index()
{
//consume Web API Get method here..
return View();
}
public ActionResult create()
{
return View();
}
}
Bây giờ, nhấp chuột phải vào phương thức hành động ở trên và chọn Thêm chế độ xem. Thao tác này sẽ mở cửa sổ bật lên Thêm chế độ xem.
Bây giờ, chọn Create Template, StudentViewModel class làm model và nhấp vào nút Add như hình trên. Thao tác này sẽ tạo createcshtml trong thư mục Views > Student như bên dưới.
create.cshtml
@model WebApiDemo.Models.StudentViewModel
@{
ViewBag.Title = "Create New Student - MVC";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create New Student</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
Trong chế độ xem ở trên, Html.BeginForm() tạo thẻ biểu mẫu HTML <form> action="/Student/Create" method="post" </form> sẽ gửi yêu cầu đăng khi người dùng nhấp vào nút tạo.
Bây giờ, hãy chạy dự án và điều hướng đến http://localhost:64189/student/create. Nó sẽ hiển thị chế độ xem nhập dữ liệu đơn giản như được hiển thị bên dưới.
Ngay khi người dùng nhập dữ liệu sinh viên và nhấp vào nút Create trong chế độ xem ở trên, nó sẽ gửi yêu cầu Post đến bộ điều khiển Student MVC. Để xử lý yêu cầu post này, hãy thêm phương thức hành động HttpPost "create" như hiển thị bên dưới.
Ví dụ: Phương thức Post trong MVC Controller
public class StudentController : Controller
{
public ActionResult Index()
{
//consume Web API Get method here..
return View();
}
public ActionResult create()
{
return View();
}
[HttpPost]
public ActionResult create(StudentViewModel student)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri("http://localhost:64189/api/student");
//HTTP POST
var postTask = client.PostAsJsonAsync<StudentViewModel>("student", student);
postTask.Wait();
var result = postTask.Result;
if (result.IsSuccessStatusCode)
{
return RedirectToAction("Index");
}
}
ModelState.AddModelError(string.Empty, "Server Error. Please contact administrator.");
return View(student);
}
}
Như bạn thấy trong phương thức hành động HttpPost create() ở trên, nó sử dụng HttpClient để gửi yêu cầu HTTP POST đến Web API với đối tượng StudentViewModel. Nếu phản hồi trả về trạng thái thành công thì nó sẽ chuyển hướng đến chế độ xem danh sách. Truy cập phần HttpClient để tìm hiểu thêm về nó.
Bây giờ, hãy chạy dự án và điều hướng đến http://localhost:64189/student/create, nhập thông tin sinh viên như hiển thị bên dưới.
Bây giờ, khi nhấp vào nút tạo ở trên, nó sẽ chèn một bản ghi mới vào DB và chuyển hướng đến chế độ xem danh sách như hiển thị bên dưới.
Vì vậy, theo cách này, chúng ta có thể sử dụng phương thức Post của Web API để thực thi yêu cầu HTTP POST để tạo bản ghi mới.
Tiếp theo, sử dụng phương thức Put của Web API để chỉnh sửa bản ghi hiện có.
