Tạo nhanh website ASP.NET CORE MVC theo mô hình Model View Controller

tao-website-asp-net-core-mvc

Lập trình website với ASP.NET Core đang ngày càng được nhiều lập trình viên yêu thích. Và giờ đây với ASP.NET core bạn có thể dễ dàng tạo được website theo nhiều mô hình nhiều Template khác nhau.

Trong bài viết này, ChickenIT sẽ hướng dẫn các bạn tạo nhanh website bằng Asp.net core MVC (mô hình Model View Controller). Mời các bạn theo dõi nhé.

Yêu cầu

Trong bài hướng dẫn này mình sử dụng Visual Studio 2019 với .NET Core SDK bản 3.1

Các bước tạo website ASP.NET CORE MVC

Mở Visual Studio. Mình dùng bản Visual Studio 2019 đối với các phiên bản Visual Studio 2017 hoặc Visual Studio 2015 các bạn có thể làm tương tự nhé.

Mở công cụ lập trình Visual Studio
Mở công cụ lập trình Visual Studio

Tiếp theo chọn Create a new project

Tạo 1 project mới
Tạo 1 project mới

Tiếp theo chọn ASPNET Core Web Application rồi nhấn Next. Các bạn nhập tên Project, đường dẫn lưu project, tên Solution rồi chọn Create

Tạo website asp.net core và configure project
Tạo website asp.net core và configure project

Tiếp theo các bạn chọn Template muốn render theo. Với bài hướng dẫn này thì mình sẽ chọn Template Web Application (Model-View-Controller).

Ngoài ra 1 số thông số quan trọng khác mà các bạn nên lưu ý là

  • .NET Core: có 2 lựa chọn cho bạn ở vị trí này là .NET Framework.NET Core. .NET Core là Framework mới và được hỗ trợ lập trình tốt hơn .NET Framework
  • ASP.NET Core 3.1 đây là phiên bản của .NET core mà bạn muốn cài đặt cho website.
  • Configure for HTTPS: cài đặt website với giao thức bảo mật SSL
Chọn Template Web Application (Model-View-Controller)
Chọn Template Web Application (Model-View-Controller)
Tạo thành công project các bạn sẽ thấy giao diện Visual Studio tương tự trên
Tạo thành công project các bạn sẽ thấy giao diện Visual Studio tương tự trên

Giới thiệu về cấu trúc của project ASP.NET MVC

Cấu trúc của mỗi project ASP.NET CORE gồm các thành phần sau:

Solution

Đây là nơi chứa tất cả các dự án mà bạn đã tạo. Ví dụ bạn có dự án web quản lý thư viện chẳng hạn nhưng bạn lại tạo 2 dự án với 1 dự án chuyên viết API và 1 dự án chuyên về giao diện web. 2 dự án này sẽ cùng thuộc 1 Solution để bạn dễ quản lý và lập trình.

Nếu trong trường hợp Visual Studio của bạn không hiển thị cửa sổ này thì bạn có thể từ menu View ta chọn  Solution Explorer hoặc nhấn phím  CTRL + W, S.

Project

Đây là nơi chứa toàn bộ configure, giao diện, code của website. Mình sẽ đi sâu vào các thành phần của project ngay bên dưới nhé các bạn.

Properties

Trong Properties chứa file launchSettings.json chứa các cài đặt được sử dụng khi chạy ứng dụng .NET core từ Visual Studio hoặc bằng cách sử dụng .NET Core CLI.

launchSettings.json chứa các cài đặt nhằm chạy ứng dụng web
launchSettings.json chứa các cài đặt nhằm chạy ứng dụng web

wwwroot

Đây là nơi chứa các tệp tĩnh của website như: các file HTLM, CSS, Hình ảnh, Javascript … là các file mà phục vụ trực tiếp cho website trên client.

Hình ảnh 1 thư mục wwwroot minh họa
Hình ảnh 1 thư mục wwwroot minh họa

Controllers

Đây là nơi xử lý code chính của website: như kết nối CSDL, Thêm, sửa, xóa dữ liệu, thực hiện xử lý nghiệp vụ cho website. Controlles chính là 1 mắt xích trong mô hình MVC

Controllers nơi xử lý code chính cho website
Controllers nơi xử lý code chính cho website

Models

Là thành phần có chức năng lưu trữ toàn bộ dữ liệu của ứng dụng. Khi bạn kết nối trang web với Database thì Model sẽ là nơi ánh xạ CSDL qua các class.

View

Đây là nơi xử lý giao diện cho trang web của bạn. Trong View ASP.NET Core còn tổ chức thư mục rất tốt.

Thư mục Share là nơi chứa các thành phần giao diện chung của trang web. File _Layout.cshtml tương tự như trang master page trong ứng dụng web form cũ vậy.

 _Layout.cshtml  chứa giao diện dùng chung của trang web
_Layout.cshtml chứa giao diện dùng chung của trang web

Lưu ý là @RenderBody() chính là nơi render dữ liệu của các trang content lên trang _Layout.cshtml để hiện thị đến người dùng.

appsettings.json

appsettings.json là nơi lưu trữ các cài đặt cấu hình ứng dụng, chẳng hạn như chuỗi kết nối cơ sở dữ liệu, các biến có phạm vi toàn ứng dụng và nhiều thứ khác.

Program.cs

Đây là nơi cấu hình, cài đặt máy chủ cho trang web của bạn.

Startup.cs

Như tên gọi của mình ở đây chứa các phương thức được chạy đầu tiên mỗi khi ứng dụng web của bạn được gọi.

Để tìm hiểu thêm về các thành phần và cách sử dụng Startup.cs các bạn có thể tham khảo document của Microsoft tại đây

Kết luận

Như vậy mình đã giới thiệu cho các bạn cách tạo và các thành phần mà Visual Studio đã tự động render cho các bạn dễ dàng hơn trong việc lập trình web theo mô hình MVC.

Và đây là thành quả của chúng ta. Trang web được tạo rất nhanh với các thao tác đơn giản.

Nhấn Ctrl + F5 để chạy website mà không Debug hoặc F5 để chạy web cùng chế độ Debug.

Trang web Asp.net core theo mô hình MVC vửa được tạo
Trang web Asp.net core theo mô hình MVC vửa được tạo
Giới thiệu ChickenIT 9 bài viết
Chào các bạn, mình là ChickenIT (gà IT). Sở thích của mình là máy tính, viết lách và lang thang trên mạng. Blog này là nơi mình chia sẻ những sở thích bên cạnh những kiến thức, kinh nghiệm của bản thân. Hy vọng sẽ giúp ích được cho các bạn.

Hãy bình luận đầu tiên

Để lại một phản hồi

Thư điện tử của bạn sẽ không được hiện thị công khai.


*