I. ASP .NET và mô hình MVC là gì?
ASP.NET MVC là một framework web được phát triển bởi Microsoft, thực thi mô hình MVC (model–view–controller). ASP.NET MVC là 1 phần mềm mã mở, tách rời với thành phần độc quyền ASP.NET Web Forms. ASP.NET MVC đang nổi lên là phương pháp phát triển web mạnh nhất và phổ biến nhất trên nền ASP.NET hiện nay.
Trong các phiên bản sau của ASP.NET, ASP.NET MVC, ASP.NET Web API, và ASP.NET Web Pages (nền tảng chỉ dùng trang Razor) sẽ được trộn chung vào MVC 6.
- Dựa trên nền ASP.NET, ASP.NET MVC cho phép các nhà phát triển phần mềm xây dựng ứng dụng web như là một cấu thành của 3 vai trò: Model, View và Controller. Mô hình MVC định nghĩa ứng dụng web với 3 tầng logic:
- Model (tầng business – business layer)
- View (tầng hiển thị – display layer)
- Controller (điều khiển đầu vào – input control)
II. Tạo 1 ứng dụng ASP .NET cơ bản
1. Chuẩn bị
- Để có thể thực hành tốt bạn cần có kiến thức cơ bản về C#, sử dụng 1 IDE có hỗ trợ ASP .NET và hệ quản trị cơ sở dữ liệu SQL Sever, ở đây mình sử dụng Visual studio 2019 và SQL Sever 2014
2. Các bước thực hiện
Bước 1: Khởi tạo project
Mở visual studio và chọn create a new project => chọn project ASP .NET Web Application (.NET Framework)
“Hãy để ý thật kỹ vì có thể nhầm với ASP .NET core hoặc ASP .NET nhưng hỗ trợ ngôn ngữ Visual basic nhé”
Tiếp theo ta sẽ cấu hình thông tin cho project
Được 1 project và thêm cho mình 1 floder Context để được cấu trúc thư mục như sau
Bước 2: Khởi tạo thành phần và các chức năng
Đầu tiên mình sẽ tạo 1 model
– Mình sẽ sử dụng entity framework nên các bạn hãy vào project => Manage nuget package và install framework sau vào cho mình nhé :
- Tạo Product.cs trong thư mục models và cấu hình như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Web; namespace ProductApps.Models { public class Product { [Key] public int Id { get; set; } public string ProductName { get; set; } public decimal Price { get; set; } public string Description { get; set; } } } |
Click chuột phải vào thư mục controller và chọn add => Controller :
Cấu hình lại như sau để được 2 action Index – dùng hiển thị danh sách và , detail để hiện thị chi tiết sản phẩm và create để thêm mới sản phẩm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | using ProductApps.Context; using ProductApps.Models; using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Web; using System.Web.Mvc; namespace ProductApps.Controllers { public class ProductController : Controller { private ProductContext db = new ProductContext(); // Tạo 1 thể hiện để kết nối ProductContext và sử dụng // GET: Product //Hiển thị danh sách tất cả các sản phẩm public ActionResult Index() { return View(db.Products.ToList()); } // GET: Product/Details/5 public ActionResult Details(int? id) //Khi khai báo int? thì giá trị id sẽ được phép null, nếu khôông thì khi gặp id = null sẽ báo lỗi :( { if(id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Product product = db.Products.Find(id); if(product == null) { return HttpNotFound(); } return View(product); } // GET: Product/Create //Hiển thị form thêm mới sản phẩm [HttpGet] public ActionResult Create() { return View(); } // POST: Product/Create [HttpPost] public ActionResult Create(Product product) { try { if (ModelState.IsValid) { db.Products.Add(product); db.SaveChanges(); return RedirectToAction("Index"); } return View(product); } catch { return View(); } } // GET: Product/Edit/5 public ActionResult Edit(int id) { return View(); } // POST: Product/Edit/5 [HttpPost] public ActionResult Edit(int id, FormCollection collection) { try { // TODO: Add update logic here return RedirectToAction("Index"); } catch { return View(); } } // GET: Product/Delete/5 public ActionResult Delete(int id) { return View(); } // POST: Product/Delete/5 [HttpPost] public ActionResult Delete(int id, FormCollection collection) { try { // TODO: Add delete logic here return RedirectToAction("Index"); } catch { return View(); } } } } |
- Kế tiếp là thêm View để hiển thị cho phần thêm dánh sách sản phẩm, form thêm mới sản phẩm và chi tiết sản phẩm
- Click chuột phải vào phần ‘return view’ trong Action Index và chọn add view như sau
- Click chuột phải vào phần ‘return view’ trong Action Detail và chọn add view như sau
- Click chuột phải vào phần ‘return view’ trong Action Create và chọn add view như sau
- Cuối cùng vào App_start/RouteConfig.cs và chỉnh sửa như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace ProductApps { public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Product", action = "Index", id = UrlParameter.Optional } ); } } } |
- Run App hoặc nhấn F5 và được kết quả như sau
Còn 2 chức năng là Edit và Delete các bạn làm tương tự nhé - Trên đây mình đã trình bày quá trình làm quen với mô hình mvc trong ASP .NET Framework MVC của mình, quả thật mình thấy so với các ngôn ngữ lập trình khác thì ở đây chúng ta phải code rất ít, khá hợp so với 1 người lười như mình
- Bài viết đầu tiên nên không tránh khỏi các thiếu sót rất mong các bạn thông cảm và để lại ý kiến để mình sửa đổi trong các bài viết tiếp theo nhé
