Creating a simple CRUD Web Application using ASP.NET MVC 2 (Part 2)

Creating a simple CRUD Web Application using ASP.NET MVC 2 - Phần I

Bây giờ chúng ta sẽ tạo view cho trang Detail để liệt kê thông tin chi tiết một record trong bảng dữ liệu mà chúng ta đã tạo trước đó. Các bạn thực hiện như sau: click phải vào Details trong class HomeController –> Add View.

Khi bạn click vào nút Details trên trang Index, lúc đó trình duyệt sẽ gửi request đến ứng dụng web của chúng ta và lúc này ứng dụng sẽ nhận phương thức GET, lấy PhoneId của record mà chúng ta đã chọn để xem chi tiết. Do đó công việc của controller lúc này là truy vấn dựa trên thông tin PhoneId đã được gửi đến trong phương thức GET và lấy những dữ liệu cần thiết để “đổ” lên Details View và trả reponse là HTML về cho trình duyệt và người dùng sẽ thấy được thông tin cần thiết.

Để thực hiện việc này, trong class HomeController ta gõ mã sau:

public ActionResult Details(int id)
{
var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == id).FirstOrDefault();

return View(phone);
}

Build project và xem kết quả trên trình duyệt (click chọn Details trên trình duyệt).

Tiếp theo chúng ta sẽ tạo View cho trang Edit và thực hiện các xử lý cho chức năng này. Tương tự với Details, click phải vào Edit –> Add View.

Trong class HomeController ta viết mã sau:

//
// GET: /Home/Edit/5

public ActionResult Edit(int id)
{
var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == id).FirstOrDefault();

return View(phone);
}

//
// POST: /Home/Edit/5

[HttpPost]
public ActionResult Edit(Phone editedPhone)
{
try
{
var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == editedPhone.PhoneId) .FirstOrDefault();
phone.Name = editedPhone.Name;
phone.PhoneNum = editedPhone.PhoneNum;
phone.Desciption = editedPhone.Desciption;
phone.GroupName = editedPhone.GroupName;

_db.SaveChanges();

return RedirectToAction("Index");
}
catch
{
return View();
}
}

Build project và xem kết quả trên trình duyệt.

Chỉnh sửa và xem kết quả.

Bây giờ chúng ta sẽ thực hiện 2 chức năng còn lại là tạo mới và xóa. Thực hiện tương tự, chúng ta tạo các view và xử lý trong class HomeController.

Xử lý cho phương thức Create trong class HomeController:

//
// GET: /Home/Create

public ActionResult Create()
{
return View();
}

//
// POST: /Home/Create

[HttpPost]
public ActionResult Create([Bind(Exclude = "PhoneId")]Phone newPhone)
{
try
{
_db.Phones.AddObject(newPhone); _db.SaveChanges();

return RedirectToAction("Index");
}
catch
{
return View();
}
}

Khi thực hiện phương thức Create, người dùng không cần phải biết PhoneId là gì. Do đó, bạn có thể dùng Bind và từ khóa Exclude kèm theo thuộc tính không muốn kết xuất để thực hiện việc này. Bên cạnh đó, bạn cũng không mong muốn người dùng thấy giá trị PhoneId này, bạn có thể xóa phần mã mà hiển thị nội dung PhoneId lên trình duyệt trong tập tin Create.aspx.

<div class="editor-label">
<%: Html.LabelFor(model => model.PhoneId) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.PhoneId) %>
<%: Html.ValidationMessageFor(model => model.PhoneId) %>
</div>

Build project và xem kết quả.

Phần PhoneId không hiển thị đúng như yêu cầu. Và điểm đặc biệt trong ASP.NET MVC mà mình muốn giới thiệu đó là khả năng validate thông tin. Chẳng hạn như trong ví dụ trên, mình không điền vào 2 ô Name và PhoneNum, khi chọn nút Create thì ứng dụng sẽ tự động kiểm tra thông tin những trường (field) này trong model mà mình đã tạo ra, những trường nào không hợp lệ sẽ hiển thị lỗi lên trình duyệt cho người dùng biết. Khi hợp lệ thì việc tạo mới sẽ thành công.

Xử lý cho phương thức Delete trong class HomeController.

//
// GET: /Home/Delete/5

public ActionResult Delete(int id)
{
var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == id)
.FirstOrDefault();
return View(phone);
}

//
// POST: /Home/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == id)
.FirstOrDefault();
if (phone != null)
_db.DeleteObject(phone);
_db.SaveChanges();

return RedirectToAction("Index");
}
catch
{
return View();
}
}

Build project và xem kết quả.

Sau khi xóa thành công.

Như vậy chúng ta đã xây dựng được một ứng dụng web crud đơn giản bằng ASP.NET MVC một cách dễ dàng và nhanh chóng, kết hợp bộ công cụ Visual Studio.
*Tóm lại:
- ASP.NET MVC là nền tảng phát triển web thế hệ mới của Microsoft, được Scott Guthie đề xuất năm 2007 và phiên bản đầu tiên 1.0 được ra mắt vào năm 2009.
- ASP.NET MVC được phát triển dựa trên mẫu thiết kế trong phát triển phần mềm. MVC là từ viết tắt của Model – View – Controller, 3 thành phần trong cấu trúc MVC.
- Vai trò của Model, View và Controller trong nền tảng ASP.NET MVC:
+ Controller: là một (nhiều) lớp (.cs hoặc .vb), đóng vai trò trung tâm và chủ đạo trong kiến trúc MVC. Khi một request được gửi từ trình duyệt đến ứng dụng web MVC của bạn, controller của ứng dụng sẽ xử lý nội dung của request, tìm ra đâu là view cần, dữ liệu nào cần để “đổ” lên view đó. Sau đó nó gửi thông điệp response chứa nội dung cần thiết về lại trình duyệt.
+ Model: đại diện cho dữ liệu được xử lý trên View.
+ View: lấy template cần thiết và dữ liệu từ Model, sau đó gửi trả về trong thông điệp response.