Phần 1: Bắt đầu với ASP.NET Core MVC

Nguồn: Get started with ASP.NET Core MVC

Hướng dẫn này dạy bạn phát triển web ASP.NET Core MVC (Model-View-Controller) với controllers (bộ điều khiển) và views (giao diện). Nếu bạn mới làm quen với phát triển web ASP.NET Core, hãy xem xét phiên bản Razor Pages của hướng dẫn này, vì đó là điểm khởi đầu dễ hơn. Xem Choose an ASP.NET Core UI, so sánh Razor Pages, MVC và Blazor để phát triển UI (giao diện người dùng).

Đây là hướng dẫn đầu tiên trong loạt bài dạy phát triển web ASP.NET Core MVC với controllers và views.

Cuối loạt bài, bạn sẽ có một ứng dụng quản lý và hiển thị dữ liệu phim. Bạn học cách:

Tạo một web app (ứng dụng web).
Thêm và scaffold (tạo scaffolding) một model (mô hình dữ liệu).
Làm việc với database (cơ sở dữ liệu).
Thêm tìm kiếm và validation (xác thực dữ liệu).

Xem hoặc tải code mẫu

Điều kiện tiên quyết

Visual Studio

Visual Studio 2022 với workload ASP.NET and web development.

Visual Studio Code

Hướng dẫn Visual Studio Code sử dụng .NET CLI (giao diện dòng lệnh) cho các chức năng phát triển ASP.NET Core như tạo dự án. Bạn có thể theo dõi các hướng dẫn này trên macOS, Linux hoặc Windows và với bất kỳ trình soạn thảo code nào. Có thể cần thay đổi nhỏ nếu bạn sử dụng công cụ khác ngoài Visual Studio Code.

Tạo web app

Visual Studio

Khởi động Visual Studio và chọn Create a new project (Tạo dự án mới).
Trong hộp thoại Create a new project, chọn ASP.NET Core Web App (Model-View-Controller) > Next.
Trong hộp thoại Configure your new project (Cấu hình dự án mới):
Nhập MvcMovie cho Project name (Tên dự án). Điều quan trọng là phải đặt tên dự án là MvcMovie. Chữ hoa cần khớp với mỗi namespace khi code được sao chép.
Location (Vị trí) cho dự án có thể đặt ở bất kỳ đâu.
Chọn Next.
Trong hộp thoại Additional information (Thông tin bổ sung):
Chọn .NET 8.0 (Long Term Support).
Xác minh rằng Do not use top-level statements (Không sử dụng top-level statements) không được chọn.
Chọn Create.

Visual Studio sử dụng template dự án mặc định cho dự án MVC được tạo. Dự án được tạo:

Là một ứng dụng hoạt động được.
Là một dự án khởi đầu cơ bản.

Visual Studio Code

Hướng dẫn này giả định bạn đã quen với VS Code. Để biết thêm thông tin, xem Getting started with VS Code.

Chọn New Terminal từ menu Terminal để mở integrated terminal (terminal tích hợp).
Chuyển đến thư mục (cd) sẽ chứa dự án. Dự án có thể đặt ở bất kỳ đâu.
Chạy các lệnh sau:

dotnetcli

dotnet new mvc -o MvcMovie
code -r MvcMovie

Lệnh dotnet new tạo một dự án ASP.NET Core MVC mới trong thư mục MvcMovie.

Lệnh code mở thư mục dự án MvcMovie trong phiên hiện tại của Visual Studio Code.

Visual Studio Code có thể hiển thị hộp thoại hỏi: Do you trust the authors of the files in this folder? (Bạn có tin tưởng tác giả của các tệp trong thư mục này không?)

Nếu bạn tin tưởng tất cả tệp trong thư mục cha, chọn Trust the authors of all files in the parent folder.
Chọn Yes, I trust the authors vì thư mục dự án có các tệp được tạo bởi .NET.
Khi Visual Studio Code yêu cầu bạn thêm assets (tài nguyên) để build và debug dự án, chọn Yes. Nếu Visual Studio Code không đề xuất thêm build và debug assets, chọn View > Command Palette và nhập ".NET" vào ô tìm kiếm. Từ danh sách lệnh, chọn lệnh .NET: Generate Assets for Build and Debug.

Visual Studio Code thêm thư mục .vscode với các tệp launch.json và tasks.json được tạo tự động.

Chạy ứng dụng

Visual Studio

Nhấn Ctrl+F5 để chạy ứng dụng không có debugger (trình gỡ lỗi).

Visual Studio hiển thị hộp thoại sau khi dự án chưa được cấu hình để sử dụng SSL:

> This project is configured to use SSL. To avoid SSL warnings in the browser you can choose to trust the self-signed certificate that IIS Express has generated. Would you like to trust the IIS Express SSL certificate?

Chọn Yes nếu bạn tin tưởng chứng chỉ SSL của IIS Express.

Hộp thoại sau được hiển thị:

> Security warning

Chọn Yes nếu bạn đồng ý tin tưởng chứng chỉ development.

Visual Studio chạy ứng dụng và mở trình duyệt mặc định.

Thanh địa chỉ hiển thị localhost:<port#> thay vì example.com. Tên host tiêu chuẩn cho máy tính cục bộ của bạn là localhost. Khi Visual Studio tạo một dự án web, một port ngẫu nhiên được sử dụng cho web server.

Khởi chạy ứng dụng không có debugging bằng cách nhấn Ctrl+F5 cho phép bạn:

Thay đổi code.
Lưu tệp.
Nhanh chóng làm mới trình duyệt và xem các thay đổi code.
Đóng cửa sổ trình duyệt. Visual Studio sẽ dừng ứng dụng.

Visual Studio Code

Tin tưởng chứng chỉ HTTPS development bằng cách chạy lệnh sau:

dotnetcli

dotnet dev-certs https --trust

Lệnh trên hiển thị hộp thoại sau, nếu chứng chỉ chưa được tin tưởng trước đó:

> Security warning

Chọn Yes nếu bạn đồng ý tin tưởng chứng chỉ development.

Trong Visual Studio Code, nhấn Ctrl+F5 (Windows)/^+F5 (macOS) để chạy ứng dụng không có debugging.

Visual Studio Code:

Khởi động Kestrel
Khởi chạy trình duyệt.
Điều hướng đến https://localhost:<port#>.

Thanh địa chỉ hiển thị localhost:<port#> thay vì example.com. Localhost chỉ phục vụ các yêu cầu web từ máy tính cục bộ.

Đóng cửa sổ trình duyệt.
Trong Visual Studio Code, từ menu Run, chọn Stop Debugging hoặc nhấn Shift+F5 để dừng ứng dụng.

Trợ giúp Visual Studio

Trợ giúp Visual Studio Code

Trong hướng dẫn tiếp theo trong loạt bài này, bạn sẽ tìm hiểu về MVC và bắt đầu viết một số code.

Tiếp theo: Thêm controller