Tạo ứng dụng ASP.NET MVC đầu tiên

Trong phần này, chúng ta sẽ tạo một ứng dụng web ASP.NET MVC mới bằng Visual Studio và tìm hiểu các thành phần cơ bản của ứng dụng ASP.NET MVC.

Chúng ta sẽ sử dụng ASP.NET MVC 5 và phiên bản Visual Studio 2017 Community và .NET Framework 4.6 để tạo ứng dụng ASP.NET MVC đầu tiên của chúng ta.

Nếu bạn chưa có Visual Studeio thì có thể tải xuống phiên bản mới nhất tại https://visualstudio.microsoft.com/downloads/.

Mở Visual Studio 2017 và chọn menu File -> New -> Project, như hình ảnh bên dưới.

Tạo project ASP.NET MVC đầu tiên

Từ hộp thoại New Project như được hiển thị trong hình ảnh bên dưới, mở rộng nút Visual C # và chọn Web ở khung bên trái, sau đó chọn ASP.NET Web Application (.NET Framework) trong ngăn giữa. Nhập tên dự án của bạn là MyMVCApplication (bạn có thể đặt tên cho ứng dụng tùy ý của mình). Ngoài ra, bạn có thể thay đổi vị trí của ứng dụng ASP.NET MVC bằng cách nhấp vào nút Browse... Cuối cùng, bấm OK.

Tạo ứng dụng ASP.NET MVC đầu tiên

Từ hộp thoại New ASP.NET Web Application, chọn MVC (nếu chưa được chọn) như hiển thị bên dưới.

Tạo ứng dụng ASP.NET MVC đầu tiên

Bạn cũng có thể thay đổi cơ chế xác thực bằng cách nhấp vào nút Change Authentication. Bạn có thể chọn chế độ xác thực phù hợp cho ứng dụng của mình, như hiển thị bên dưới.

Tạo ứng dụng ASP.NET MVC đầu tiên

Ở đây, chúng tôi sử dụng cơ chế xác thực mặc định cho ứng dụng của chúng tôi là No Authentication (Không xác thực). Nhấn OK để tiếp tục.

Đợi một lúc cho đến khi Visual Studio tạo một dự án ASP.NET MVC đơn giản bằng cách sử dụng mẫu mặc định, như hiển thị ở hình ảnh bên dưới.

Tạo ứng dụng ASP.NET MVC đầu tiên

Bây giờ, nhấn phím F5 để chạy dự án ở chế độ debug (gỡ lỗi) hoặc Ctrl + F5 để chạy dự án mà không cần debug. Nó sẽ mở trang chủ trong trình duyệt, như hiển thị trong hình bên dưới.

Tạo ứng dụng ASP.NET MVC đầu tiên

Dự án ASP.NET MVC 5 bao gồm các tập tin JavaScript và CSS của bootstrap 3.0 theo mặc định. Vì vậy, bạn có thể tạo các trang web responsive.

Giao diện người dùng sẽ thay đổi dựa trên kích thước màn hình của các thiết bị khác nhau. Ví dụ: thanh menu trên cùng sẽ được thay đổi trong các thiết bị di động, như hiển thị trong hình bên dưới.

Như vậy là bạn đã tạo ứng dụng ASP.NET MVC 5 đầu tiên của mình bằng Visual Studio 2017.


Cấu trúc thư mục ứng dụng ASP.NET MVC

Chúng ta đã tạo ứng dụng ASP.NET MVC 5 đầu tiên của chúng ta trong phần trước. Visual Studio tạo cấu trúc thư mục sau cho ứng dụng ASP.NET MVC theo mặc định.

Cấu trúc thư mục ứng dụng ASP.NET MVC

Chúng ta sẽ lần lượt tìm hiểu ý nghĩa của từng thư mục.

App_Data

Thư mục App_Data có thể chứa các tập tin dữ liệu ứng dụng như LocalDB, tập tin .mdf, tập tin .xml và các tập tin liên quan đến dữ liệu khác. IIS sẽ không bao giờ cho phép truy cập các tập tin từ thư mục App_Data.

App_Start

Thư mục App_Start có thể chứa các lớp sẽ được thực thi khi ứng dụng khởi động. Thông thường, đây sẽ là các tập tin cấu hình như AuthConfig.cs, BundleConfig.cs, FilterConfig.cs, RouteConfig.cs, v.v. MVC 5 có các tập tin BundleConfig.cs, FilterConfig.cs và RouteConfig.cs theo mặc định. Chúng ta sẽ tìm hiểu ý nghĩa của các tập tin này sau.

Cấu trúc thư mục ứng dụng ASP.NET MVC

Content

Thư mục Content chứa các tập tin tĩnh như tệp css, tập tin hình ảnh và biểu tượng. Ứng dụng ASP.NET MVC 5 bao gồm bootstrap.css, bootstrap.min.css và Site.css theo mặc định.

Cấu trúc thư mục ứng dụng ASP.NET MVC

Controllers

Thư mục Controllers chứa các lớp controller. Controller xử lý yêu cầu của người dùng và trả về một phản hồi. ASP.NET MVC yêu cầu tên của tất cả các lớp controller kết thúc bằng "Controller". Bạn sẽ tìm hiểu về controller trong phần tiếp theo.

Cấu trúc thư mục ứng dụng ASP.NET MVC

fonts

Thư mục fonts chứa các tập tin phông chữ tùy chỉnh cho ứng dụng của bạn.

Cấu trúc thư mục ứng dụng ASP.NET MVC

Models

Thư mục Models chứa các lớp mô hình (model). Thông thường lớp mô hình bao gồm các thuộc tính public, sẽ được ứng dụng sử dụng để lưu trữ và xử lý dữ liệu ứng dụng.

Scripts

Thư mục Scripts chứa các tập tin Javascript hoặc VBScript cho ứng dụng. ASP.NET MVC 5 có các tập tin javascript là bootstrap.js, jquery-x.x.js và modernizer-x.x.js theo mặc định.

Cấu trúc thư mục ứng dụng ASP.NET MVC

Views

Thư mục Views chứa các tập tin làm giao diện cho ứng dụng. Thông thường view là tập tin .cshtml, nơi bạn viết mã html kết hợp với C#.

Thư mục Views có các thư mục riêng cho mỗi controller. Ví dụ: tất cả các tập tin .cshtml của HomeController sẽ nằm trong thư mục Views > Home.

Thư mục Shared trong thư mục Views chứa tất cả các view sẽ được chia sẻ giữa các controller khác nhau, ví dụ: tập tin _Layout.cshtml.

Cấu trúc thư mục ứng dụng ASP.NET MVC

Ngoài ra, dự án ASP.NET MVC cũng có các tập tin cấu hình sau:

Global.asax

Tập tin Global.asax cho phép bạn viết code để phản hồi với các sự kiện ở cấp ứng dụng, chẳng hạn như Application_BeginRequest, application_start, application_error, session_start, session_end, v.v.

Packages.config

Tập tin Packages.config được NuGet quản lý để theo dõi các gói và phiên bản bạn đã cài đặt trong ứng dụng.

Web.config

Tập tin Web.config chứa cấu hình cấp ứng dụng.

Tìm hiểu cách ASP.NET MVC xử lý yêu cầu bằng cách sử dụng routing trong phần tiếp theo.

ASP.NET MVC
Bài Viết Liên Quan:
Lớp HtmlHelper trong ASP.NET MVC
Trung Nguyen 28/05/2020
Lớp HtmlHelper trong ASP.NET MVC

Lớp HtmlHelper trong ASP.NET MVC là gì? Cách sử dụng HtmlHelper để tạo ra các phần tử HTML trong Razor View.

Cú pháp Razor trong ASP.NET MVC
Trung Nguyen 27/05/2020
Cú pháp Razor trong ASP.NET MVC

Cách sử dụng cú pháp Razor để viết mã C# hoặc VB.NET trong Razor View trong ASP.NET MVC.

Tạo View cập nhật trong ASP.NET MVC
Trung Nguyen 27/05/2020
Tạo View cập nhật trong ASP.NET MVC

Tìm hiểu cách tạo view cho chức năng chỉnh sửa thông tin sinh viên trong ASP.NET MVC.

Model Binding trong ASP.NET MVC
Trung Nguyen 26/05/2020
Model Binding trong ASP.NET MVC

Tìm hiểu về Model Binding trong ASP.NET MVC. Tự động nạp các tham số của phương thức hành động.