Tutorial: Creating a Simple CRUD Web Application Using ASP.NET MVC 2 (Part 2)

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.

crud_aspmvc_28

crud_aspmvc_29

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.

crud_aspmvc_2

Để 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).

crud_aspmvc_31

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.

crud_aspmvc_32

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.

crud_aspmvc_33

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

crud_aspmvc_34

crud_aspmvc_35

 

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.

crud_aspmvc_36

crud_aspmvc_37

 

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ả.

crud_aspmvc_38

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.

crud_aspmvc_39

 

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ả.

crud_aspmvc_40

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

crud_aspmvc_41

 

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.

crud_aspmvc_2

 

Chúc các bạn thành công Smile!

P/s: link download source-code của bài tutorial này (here).

 

 

 

 

 

 

 

 

 

 

 

 

 

5 thoughts on “Tutorial: Creating a Simple CRUD Web Application Using ASP.NET MVC 2 (Part 2)

  1. chào anh, chị và các bạn. em hiện đang tìm hiểu và làm về MVC nhưng em chưa hiểu hết về mvc anh chị và các bạn nào có demo và ebook về mvc thi giúp đỡ em với. Em hiện đang ở hà nội. Em cảm ơn.

    • Chào bạn,
      Trong bài này mình có ghi chi tiết cách thức hoạt động của ASP.NET MVC và ứng dụng vào 1 app cụ thể đó bạn. Link mã nguồn thì mình cũng đã có cung cấp ở cuối bài. Bạn có phần nào chưa hiểu thì hãy post lên để mọi người giúp đỡ. Bạn cũng có thể gửi thắc mắc cho mình qua email cũng được.
      Chúc bạn làm tốt với ASP.NET MVC,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s