Trang web đầu tiên của mình thật đơn giản với mô hình MVC trong ASP .Net Framework

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)

    Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm xử lý…

  • View (tầng hiển thị – display layer):

    Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả các đối tượng GUI như textbox, images…Hiểu một cách đơn giản, nó là tập hợp các form hoặc các file HTML.

  • Controller (điều khiển đầu vào – input control):

    Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng… Chẳng hạn thành phần này sẽ nhận request từ url và form để thao tác trực tiếp với Model.

MVC làm việc như thế nào?

Nhìn lại sơ đồ phía trên, ta thấy có mũi tên nét liền và những mũi tên nét đứt. Những mũi tên nét đứt được hình thành trên quan điểm của người dùng mà không phải là của những nhà thiết kế phần mềm thực sự. Do đó chúng ta chỉ quan tâm đến những mũi tên còn lại.

Đây là một cách đơn giản để mô tả lại luồng sự kiện được xử lý trong MVC:

– User tương tác với View, bằng cách click vào button, user gửi yêu cầu đi.

– Controller nhận và điều hướng chúng đến đúng phương thức xử lý ở Model.

– Model nhận thông tin và thực thi các yêu cầu.

– Khi Model hoàn tất việc xử lý, View sẽ nhận kết quả từ Model và hiển thị lại cho người dùng.

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:
 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

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
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é 😇