+3

Series ASP.NET MVC - Part 3: Sử dụng ViewModel

Mối quan hệ giữa Controller và View

  • Tại sao đối với các action Create, Edit, Delete đều có 2 action:
  • Ở đây có các khái niệm Request Method: HttpPost, HttpGet:
    • HttpPost: Hiểu đơn giản là đưa dữ liệu được gửi từ Client về Server để xử lý.
    • HttpGet: Truy xuất dữ liệu từ Server trả về cho Client để hiển thị.
  • Đối với bài này sử dụng 2 method trên HttpGet để sử dụng việc hiển thị ra trang Create Product. Còn HttpPost sẽ sử dụng cho việc bạn submit dữ liệu lên để lưu xuống database.
  • Khi bạn Create new tương ứng với việc bạn gọi đến Request Method HttpGet.
  • Khi bạn Submit tương ứng với việc bạn gọi đến Request Method HttpPost để lưu lại dữ liệu.

Tạo ViewModel để sử dụng cho hiển thị.

  • Tạo thư mục ViewModels:
  • Trong thư mục ViewModels tạo class ProductViewModel.cs (Theo dõi dưới code bên dưới mình có update - trên hình bị thiếu).
using ProductManagement.Models;
using System.ComponentModel;

namespace ProductManagement.ViewModels
{
    public class ProductViewModel
    {
        public ProductViewModel(){
            GetCategory();
        }
        public ProductViewModel(int productID, string nameOfProduct, int categoryOfProductID)
        {
            ProductID = productID;
            NameOfProduct = nameOfProduct;
            CategoryOfProductID = categoryOfProductID;
            GetCategory();
        }
        [DisplayName("Mã sản phẩm")]
        public int ProductID { get; set; }

        [DisplayName("Tên sản phẩm")]
        public string NameOfProduct { get; set; }

        public int CategoryOfProductID { get; set; }

        [DisplayName("Tên loại sản phẩm")]
        public string CategoryName { get; set; }

        public void GetCategory()
        {
            if (CategoryOfProductID > 0)
            {
                using (ProductDBContext db = new ProductDBContext())
                {
                    this.CategoryName = db.CategoryOfProducts.Find(this.CategoryOfProductID) != null ?
                        db.CategoryOfProducts.Find(this.CategoryOfProductID).Description : string.Empty;
                }
            }
        }
    }
}
  • Trong controller ProductController bạn cần sửa như sau:
public ActionResult Index()
        {
            var lsProducts = new List<ProductViewModel>();
            db.Products.ToList().ForEach(product =>
            {
                lsProducts.Add(new ProductViewModel(product.ProductID, product.NameOfProduct, product.CategoryOfProductID));
            });
            return View(lsProducts);
        }
  • Trong view Index của Product bạn cũng cần sử như sau:
  • Kết quả sau khi sử dụng ViewModel
  • Tương tự đối với trang Details cũng cần sửa lại như sau:
  • Và trong View Details
  • Kết quả

Customize lại trang Create, Edit và Delete Product.

  • Thông thường ở trường mã loại sản phẩm sẽ được thay bằng dạng Dropdownlist để chọn loại sản phẩm chứ không phải nhập mã loại sản phẩm như thế này.
  • Trong thư mục ViewModels tạo view model EditProductViewModel.cs
using ProductManagement.Models;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;

namespace ProductManagement.ViewModels
{
    public class EditProductViewModel
    {
        public EditProductViewModel(int productID, string nameOfProduct, int categoryOfProductID)
        {
            ProductID = productID;
            NameOfProduct = nameOfProduct;
            CategoryOfProductID = categoryOfProductID;
            GetCategories();
        }

        public int ProductID { get; set; }

        [DisplayName("Tên sản phẩm")]
        public string NameOfProduct { get; set; }

        public int CategoryOfProductID { get; set; }

        public IEnumerable<CategoryOfProduct> CategoryOfProducts { get; set; }

        public void GetCategories()
        {
            using (ProductDBContext db = new ProductDBContext())
            {
                CategoryOfProducts = db.CategoryOfProducts.ToList().AsEnumerable();
            }
        }
    }
}
  • Ở đây tại sao trong ViewModel này mình lại tạo thêm 1 dạng IEnumerable<CategoryOfProduct> mục đích để sử dụng cho việc hiển thị ra danh sách các Category của DropdownList.
  • Trong Action Create với Request Method Get:
public ActionResult Create()
{
    EditProductViewModel editViewModel = new EditProductViewModel();
    return View(editViewModel);
}
  • Trong Views => Products => Create.cshtml:
  • Trong Action Edit với Request Method Get bạn cũng cần sửa lại như sau:
public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Product product = db.Products.Find(id);
            if (product == null)
            {
                return HttpNotFound();
            }
            EditProductViewModel editModel = new EditProductViewModel(product.ProductID, product.NameOfProduct, product.CategoryOfProductID);
            return View(editModel);
        }
  • Trong Views => Products => Edit.cshtml:
  • Tương tự với Action Delete với Request Method Get
// GET: Products/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Product product = db.Products.Find(id);
            if (product == null)
            {
                return HttpNotFound();
            }
            ProductViewModel delModel = new ProductViewModel(product.ProductID, product.NameOfProduct, product.CategoryOfProductID);
            return View(delModel);
        }
  • Trong Views => Products => Delete.cshtml

Kết quả

  • Index
  • Create
  • Details
  • Edit
  • Delete

Phần kế tiếp

phần sau mình sẽ hướng dẫn các bạn sử dụng Migration Data để thay đổi cấu trúc dữ liệu.


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.