Giới thiệu ASP MVC - Hướng dẫn cơ bản để tạo một website ASP MVC đầu tiên (P2)

Trong bài Giới thiệu ASP MVC - Hướng dẫn cơ bản để tạo một website ASP MVC đầu tiên (P1) tôi đã giới thiệu với các bạn sơ qua về ASP.NET MVC và cách tạo một trang web MVC đơn giản. Trong phần 2 này tôi sẽ giúp bạn code 1 vài trang cho web site và 1 vài tiện ích liên quan tới MVC.

I. Tổ chức code MVC

Đầu tiên là trang chủ - trang hiển thị thông tin các sản phẩm. Vì yêu cầu trả về thông tin sản phẩm + loại sản phẩm, tức là lấy thông tin từ 2 bảng khác nhau vì thế ta khai báo thêm 1 class có các trường: ID, TenSP, TenLSP như sau:

public class Product
    {
        public int ID { get; set; }
        public string TenSP { get; set; }
        public string TenLoaiSP { get; set; }
    }

Trong DefaultController, để làm việc với DB Entity ta khai báo 1 biến toàn cục để sử dụng trong tất cả các Action:

SanPhamDB db = new SanPhamDB(); // SanPhamDB là tên Database, db là biến Entity

Controller thực hiện các câu lệnh và trả về kết quả cho browser thông qua View. Để có thể làm được điều đó ta phải khai báo 1 hàm có kiểu trả về là ActionResult (các hàm kiểu này có nhiều loại kiểu trả về, đọc tài liệu đính kèm để biết thêm chi tiết). Cụ thể với phần Index của dự án này (hiển thị thông tin sản phẩm, loại sản phẩm) có phần code như sau:

#region Trang chủ
        public ActionResult Index()
        {
            // Entity
            // LINQ
            // //Query syntax:
            var product = (from p in db.tbSanPhams select p).ToList(); // Biến danh sách chọn từ Database tbSanPham

            List<Product> prod = new List<Product>(); // Khai báo ‘prod’ là kiểu List các Product (Product là class khai báo ở trên)
            
            for (int i = 0; i < product.Count(); i++)
            {
                Product p = new Product();
                p.ID = product[i].Id;
                p.TenSP = product[i].TenSanPham;

                int type = product[i].LoaiSanPham; // Lấy ID loại sản phẩm của sản phẩm ‘i’ 

                // LInQ 
                // Method systax
                var p2 = (db.tbLoaiSanPhams.Where(p1 => type == p1.LoaiSanPham).Select(p1 => p1.TenLoaiSanPham)).ToList();
// Chọn tên loại sản phẩm từ bảng ‘tbLoaiSanPham’ với điều kiện ‘LoaiSanPham’ ở 2 bảng bằng nhau.

                p.TenLoaiSP = p2[0];
                prod.Add(p); // Thêm ‘p’ vào List ‘prod’
            }
            return View(prod);
        }
#endregion

Giao diện trang Index (hiển thị danh sách các sản phẩm)

Lưu ý:

• Kiểu List() là kiểu danh sách tương tự như Array nhưng nó linh hoạt hơn Array: không cần phải khai báo số phần tử của mảng, có các hàm, thủ tục: Add, Sort…
• Có hai loại sử dụng cú pháp Entity (LINQ):
  + Query syntax: Cú pháp la lá giống SQL
  + Method systax: Cú pháp theo kiểu các class được khai báo sẵn: db.tb.Where(…).Select… Điểm chú ý là các biến của kiểu khai báo này không có sẵn, do đó ta phải khai báo chúng trực tiếp trong câu lệnh. Ví dụ: db.tbLoaiSanPhams.Where(p1 => type == p1.LoaiSanPham).Select(p1 => p1.TenLoaiSanPham). Trong đó khai báo biến là p1.
• Còn #region … #endregion chỉ đơn giản là tạo ra 1 khu vực với nhiệm vụ nhất định, trong này ta có thể khai báo nhiều hàm, thủ tục khác nhau. Sau này ta có thể thu gọn các khu vực này để code trông đơn giản, dễ nhìn hơn

Để trả về thông tin cho HTML ta phải sử dụng View().

View là phần hiển thị thông tin được sử lý dựa vào thông tin trả về từ Controller. View cũng tương tự như các trang HTML thông thường. View cũng có thể dùng các trang Master (như ASP Webform) hoặc Layout (ở Razor)

View phải có tên giống với tên hàm tương ứng ở Controller. Như trên ta phải tạo 1 view có tên là Index.aspx hoặc Index.cshtml

Để tạo view nhanh ta trỏ con trỏ đến tên hàm, ấn Ctrl M >> Ctrl V.

Lưu ý hàm trên trả về 1 giá trị là ’View(prod);’

II. Cách trả dữ liệu về View để hiển thị ra trình duyệt

 1.  Trả về dưới dạng Dynamic Data tức là bằng ViewBag.<name> hoặc ViewData[“<name>”]; trong đó <name> là tên tùy ý do lập trình viên đặt (ta nên đặt chúng theo đúng quy cách, hạn chế các trường hợp đặc biệt…). Hai dạng này có chức năng, cách dùng tương tự nhau. Ở Controller gán giá trị cho chúng như 1 biến thông thường mà không cần phải khai báo

ViewBag.Sloaisp = “Hello”;
ViewData[“Sloaisp”] = “Hello”;

Ở View ta lấy các giá trị này như sau:

ASP: <%= ViewBag.Sloaisp %>   <%= ViewData[“Sloaisp”] %> 
Razor: @ViewBag.Sloaisp;  @ViewData[“Sloaisp”]

2.  Trả về dữ liệu có cấu trúc: 
Như hàm trên trả về 1 List giá trị có kiểu Product. View sẽ nhận List này rồi xử lý, trả về HTML tương ứng Cụ thể trong phần khai báo của aspx ta khai báo như sau:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/View.Master" Inherits="System.Web.Mvc.ViewPage<DEMOmvc.Models.Product>" %>

Trong phần thân ta lấy thông tin “prod” như sau:

<% foreach(var item in Model)
{ %><%= item.ID %>

<%= item.TenSP %>  

<%= item.TenLoaiSP %>  

<%= Html.ActionLink("Sửa", "Edit", new { ID = item.ID }) %> | <%= Html.ActionLink("Xóa", "Delete", new { ID = item.ID })%>

<% } %>

Với các trang Edit, Delete, New ta cũng thực hiện tương tự.

III. LinQ và làm việc với LinQ

          LinQ là một cách giao tiếp với CSDL. Nó giúp ta làm việc với CSDL một cách ra dễ dàng thông qua những hàm, thủ tục được khai báo sẵn. LinQ giúp ta dễ dàng trong việc sử dụng Bindding sau này.

Trong nội dung bài viết này tôi sẽ sử dụng LinQ và biến SanPhamDB db được khai báo ở trên.

- Thêm một bản ghi vào bảng:

tbSanPham SP = new tbSanPham(); // Khai báo class “SP” có kiểu tbSanpham  (tương ứng với tên bảng do Entity tự động tạo ra)

string TenSP = Fcollect["TenSP"]; // Lấy thông tin từ Form HTML chuyển vào, khi có hàm ActionResult phải nhận 1 tham số tương ứng: “FormCollection Fcollect”

int LoaiSP = int.Parse(Fcollect["LoaiSP"]);
SP.TenSanPham = TenSP; // Thêm thông tin vào biến SP
SP.LoaiSanPham = LoaiSP;
db.tbSanPhams.Add(SP); // Thếm biến SP vào List tbSanPhams
db.SaveChanges(); // Lưu lại

- Sửa bản ghi có Id = ID:

tbSanPham SP = db.tbSanPhams.First(m => m.Id == ID); // Lấy bản ghi đầu tiên có Id bằng ID truyền vào từ HTML (viết theo kiểu Method Syntax)

SP.TenSanPham = TenSP; // Sửa các thông tin lấy từ HTML
SP.LoaiSanPham = LoaiSP;
UpdateModel(SP);
db.SaveChanges();

- Xóa 1 bản ghi có Id = ID

tbSanPham SP = db.tbSanPhams.First(m => m.Id == ID);
db.tbSanPhams.Remove(SP);
db.SaveChanges();

Trên đây là các thao tác cơ bản để làm việc với LinQ, bạn có thể tham khảo.

IV. Rewrite URL trong MVC

        Các Controller, View đã được tạo vậy nó sẽ được map đến địa chỉ URL như thế nào???
Các thông tin về URL được quy định trong RouteConfig.cs trong thư mục App_Start. Trong hàm RegisterRoutes ta khai báo như sau:

routes.MapRoute(
                name: "Default1",
                url: "{action}/{ID}",
                defaults: new { controller = "Default", action = "Index", ID = 0 }
);
routes.MapRoute(
                name: "Default",
                url: "{action}.html",
                defaults: new { controller = "Default", action = "Index" }
);

Mỗi cái đăng ký Route có các tham số: Tên, địa chỉ URL, action và các tham số mặc định…
Bằng cách này bạn có thể tạo ra những địa chỉ "thân thiện" cho website của mình.

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