Chọn giao diện người dùng web ASP.NET Core

Nguồn: Choose an ASP.NET Core web UI | Phiên bản: .NET 8.0

Trong bài viết này

ASP.NET Core là một framework (khung ứng dụng) UI (giao diện người dùng) hoàn chỉnh. Hãy chọn các tính năng phù hợp để kết hợp với nhau nhằm đáp ứng nhu cầu web UI của ứng dụng.

Đối với các dự án mới, chúng tôi khuyến nghị sử dụng ASP.NET Core Blazor.

ASP.NET Core Blazor

Blazor là một framework web UI (giao diện người dùng web) full-stack (toàn diện) và được khuyến nghị cho hầu hết các kịch bản web UI.

Lợi ích khi sử dụng Blazor:

Mô hình component (thành phần) có thể tái sử dụng.
Rendering (kết xuất) component hiệu quả dựa trên diff (so sánh sự khác biệt).
Linh hoạt render component từ server (máy chủ) hoặc client (máy khách) thông qua WebAssembly.
Xây dựng các component web UI tương tác phong phú bằng C#.
Render component tĩnh từ server.
Nâng cao dần các component được render phía server để điều hướng mượt mà hơn, xử lý form (biểu mẫu) tốt hơn và cho phép streaming rendering (kết xuất luồng).
Chia sẻ code (mã nguồn) cho logic chung giữa client và server.
Interop (tương tác) với JavaScript.
Tích hợp các component vào các ứng dụng MVC, Razor Pages hoặc JavaScript hiện có.

Để có cái nhìn tổng quan đầy đủ về Blazor, kiến trúc và lợi ích của nó, xem ASP.NET Core Blazor và ASP.NET Core Blazor hosting models (mô hình lưu trữ). Để bắt đầu với ứng dụng Blazor đầu tiên của bạn, xem Build your first Blazor app (Xây dựng ứng dụng Blazor đầu tiên).

ASP.NET Core Razor Pages

Razor Pages là một mô hình dựa trên trang (page-based model) để xây dựng web UI được render phía server. UI của Razor Pages được render động trên server để tạo ra HTML và CSS của trang nhằm đáp lại yêu cầu từ trình duyệt. Trang được gửi đến client sẵn sàng để hiển thị. Hỗ trợ cho Razor Pages được xây dựng trên nền tảng ASP.NET Core MVC.

Lợi ích của Razor Pages:

Xây dựng và cập nhật UI nhanh chóng. Code cho trang được giữ cùng với trang, trong khi vẫn tách biệt các mối quan tâm về UI và business logic (logic nghiệp vụ).
Có thể kiểm thử (testable) và mở rộng cho các ứng dụng lớn.
Giữ cho các trang ASP.NET Core của bạn được tổ chức theo cách đơn giản hơn so với ASP.NET MVC:
Logic và view model (mô hình giao diện) đặc thù cho view có thể được giữ cùng nhau trong namespace (không gian tên) và thư mục riêng.
Các nhóm trang liên quan có thể được giữ trong namespace và thư mục riêng của chúng.

Để bắt đầu với ứng dụng ASP.NET Core Razor Pages đầu tiên của bạn, xem Tutorial: Get started with Razor Pages in ASP.NET Core (Hướng dẫn: Bắt đầu với Razor Pages trong ASP.NET Core). Để có cái nhìn tổng quan đầy đủ về ASP.NET Core Razor Pages, kiến trúc và lợi ích của nó, xem: Razor Pages architecture and concepts in ASP.NET Core (Kiến trúc và khái niệm Razor Pages trong ASP.NET Core).

ASP.NET Core MVC (Mô hình-Giao diện-Bộ điều khiển)

ASP.NET Core MVC render UI trên server và sử dụng mẫu kiến trúc Model-View-Controller (MVC — Mô hình-Giao diện-Bộ điều khiển). Mẫu MVC tách ứng dụng thành ba nhóm component chính: models (mô hình), views (giao diện) và controllers (bộ điều khiển). Các yêu cầu từ người dùng được định tuyến đến một controller. Controller chịu trách nhiệm làm việc với model để thực hiện các hành động của người dùng hoặc truy xuất kết quả của các truy vấn. Controller chọn view để hiển thị cho người dùng và cung cấp cho nó bất kỳ dữ liệu model nào mà nó cần.

Lợi ích của ASP.NET Core MVC:

Dựa trên một mô hình có khả năng mở rộng và trưởng thành để xây dựng các ứng dụng web lớn.
Separation of concerns (Phân tách mối quan tâm) rõ ràng để đạt được tính linh hoạt tối đa.
Sự phân tách trách nhiệm Model-View-Controller đảm bảo rằng business model (mô hình nghiệp vụ) có thể phát triển mà không bị gắn chặt với các chi tiết triển khai cấp thấp.

Để bắt đầu với ASP.NET Core MVC, xem Get started with ASP.NET Core MVC (Bắt đầu với ASP.NET Core MVC). Để có cái nhìn tổng quan về kiến trúc và lợi ích của ASP.NET Core MVC, xem Overview of ASP.NET Core MVC (Tổng quan về ASP.NET Core MVC).

ASP.NET Core Single Page Applications (SPA — Ứng dụng một trang) với các công nghệ JavaScript frontend

Xây dựng logic phía client cho các ứng dụng ASP.NET Core bằng cách sử dụng các công nghệ JavaScript phổ biến, chẳng hạn như Angular, React và Vue. ASP.NET Core cung cấp các project template (mẫu dự án) cho Angular, React và Vue, đồng thời có thể được sử dụng với các JavaScript framework khác.

Lợi ích của ASP.NET Core SPA với các công nghệ JavaScript, ngoài những lợi ích render phía client đã đề cập trước đó:

Môi trường runtime (thời gian chạy) JavaScript đã được cung cấp sẵn trong trình duyệt.
Cộng đồng lớn và hệ sinh thái trưởng thành.
Xây dựng logic phía client cho các ứng dụng ASP.NET Core bằng các công nghệ JavaScript phổ biến như Angular, React và Vue.

Nhược điểm:

Yêu cầu nhiều ngôn ngữ lập trình, framework và công cụ hơn.
Khó chia sẻ code nên một số logic có thể bị trùng lặp.

Để bắt đầu, xem:

Kết hợp nhiều giải pháp web UI: ASP.NET Core MVC hoặc Razor Pages kết hợp với Blazor

MVC, Razor Pages và Blazor đều là một phần của framework ASP.NET Core và được thiết kế để sử dụng cùng nhau. Các Razor component (thành phần Razor) có thể được tích hợp vào các ứng dụng Razor Pages và MVC. Khi một view hoặc trang được render, các component có thể được prerender (kết xuất trước) cùng lúc.

Lợi ích của MVC hoặc Razor Pages kết hợp với Blazor, ngoài những lợi ích của MVC hoặc Razor Pages:

Prerendering (kết xuất trước) thực thi các Razor component trên server và render chúng vào một view hoặc trang, giúp cải thiện thời gian tải ứng dụng theo cảm nhận của người dùng.
Thêm tính tương tác vào các view hoặc trang hiện có với Component Tag Helper.

Để bắt đầu với ASP.NET Core MVC hoặc Razor Pages kết hợp với Blazor, xem Integrate ASP.NET Core Razor components with MVC or Razor Pages (Tích hợp các Razor component ASP.NET Core với MVC hoặc Razor Pages).

Các bước tiếp theo

Để biết thêm thông tin, xem: