ASP.NET Core: ASP.NET Core Blazor

Chào mừng đến với Blazor!

Blazor là một framework để xây dựng giao diện người dùng web tương tác phía máy khách với .NET:

• Tạo giao diện người dùng tương tác phong phú bằng C# thay vì JavaScript.
• Chia sẻ logic ứng dụng phía máy chủ và phía máy khách được viết bằng .NET.
• Kết xuất giao diện người dùng dưới dạng HTML và CSS để hỗ trợ nhiều trình duyệt, bao gồm cả trình duyệt di động.
• Tích hợp với các nền tảng lưu trữ hiện đại, chẳng hạn như Docker.
• Xây dựng ứng dụng kết hợp giữa máy tính để bàn và thiết bị di động với .NET và Blazor.

Sử dụng .NET để phát triển web phía máy khách mang lại những lợi ích sau:

• Viết mã bằng C# thay vì JavaScript.
• Tận dụng hệ sinh thái .NET hiện có của các thư viện .NET.
• Chia sẻ logic ứng dụng trên máy chủ và máy khách.
• Hưởng lợi từ hiệu suất, độ tin cậy và bảo mật của .NET.
• Duy trì năng suất trên Windows, Linux hoặc macOS với môi trường phát triển, chẳng hạn như Visual Studio hoặc Visual Studio Code.
• Xây dựng trên một bộ ngôn ngữ, khuôn khổ và công cụ chung ổn định, giàu tính năng và dễ sử dụng.

Lưu ý

Để có hướng dẫn bắt đầu nhanh về Blazor, hãy xem Xây dựng ứng dụng Blazor đầu tiên của bạn.

Các component

Các ứng dụng Blazor dựa trên các component. Một component trong Blazor là một thành phần của giao diện người dùng, chẳng hạn như trang, hộp thoại hoặc biểu mẫu nhập dữ liệu.

Các component là các lớp .NET C# được tích hợp trong các tập hợp .NET:

• Xác định logic hiển thị giao diện người dùng linh hoạt.
• Xử lý các sự kiện của người dùng.
• Có thể được lồng vào nhau và tái sử dụng.
• Có thể được chia sẻ và phân phối dưới dạng thư viện lớp Razor hoặc gói NuGet.

Lớp component thường được viết dưới dạng  trang đánh dấu Razor với phần mở rộng file là .razor. Các component trong Blazor được gọi chính thức là các component Razor, không chính thức là các component Blazor. Razor là một cú pháp để kết hợp đánh dấu HTML với mã C# được thiết kế cho năng suất tốt của nhà phát triển. Razor cho phép bạn chuyển đổi giữa đánh dấu HTML và C# trong cùng một file với hỗ trợ lập trình IntelliSense trong Visual Studio. Razor Pages và MVC cũng sử dụng Razor. Không giống như Razor Pages và MVC, được xây dựng xung quanh mô hình request/response, các component được sử dụng riêng cho logic và thành phần giao diện người dùng phía máy khách.

Blazor sử dụng các thẻ HTML tự nhiên để tạo thành phần giao diện người dùng. Đánh dấu Razor sau minh họa một component ( Dialog.razor) hiển thị hộp thoại và xử lý một sự kiện khi người dùng chọn một nút:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Trong ví dụ trên, phương thức OnYes C# được kích hoạt bởi sự kiện onclick của nút. Văn bản của hộp thoại (ChildContent) và tiêu đề (Title) được cung cấp bởi component sau sử dụng component này trong giao diện người dùng của nó.

Component Dialog được lồng trong một component khác bằng cách sử dụng thẻ HTML. Trong ví dụ sau, component Index (Pages/Index.razor) sử dụng component Dialog trước đó. Attribute của thẻ Title truyền một giá trị cho tiêu đề sang thuộc tính Dialog của component Title . Văn bản (ChildContent) của component Dialog được đặt theo nội dung của component <Dialog>. Khi component Dialog được thêm vào component Index, thì IntelliSense trong Visual Studio sẽ tăng tốc độ phát triển bằng cách hoàn thành cú pháp và tham số.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

Hộp thoại được hiển thị khi component Index được truy cập trong trình duyệt. Khi người dùng chọn nút, bảng điều khiển công cụ dành cho nhà phát triển của trình duyệt sẽ hiển thị thông báo được viết theo phương thức OnYes:

Các component kết xuất thành một biểu diễn trong bộ nhớ của Mô hình đối tượng tài liệu (DOM) của trình duyệt  được gọi là cây kết xuất, được sử dụng để cập nhật giao diện người dùng theo cách linh hoạt và hiệu quả.

Máy chủ Blazor

Blazor Server cung cấp hỗ trợ lưu trữ các component Razor trên máy chủ trong ứng dụng ASP.NET Core. Cập nhật giao diện người dùng được xử lý qua  kết nối SignalR.

Thời gian chạy vẫn ở trên máy chủ và xử lý:

• Thực thi code C# của ứng dụng.
• Gửi các sự kiện giao diện người dùng từ trình duyệt đến máy chủ.
• Áp dụng các bản cập nhật giao diện người dùng cho component được hiển thị do máy chủ gửi lại.

Kết nối được Blazor Server sử dụng để liên lạc với trình duyệt cũng được sử dụng để xử lý các cuộc gọi tương tác JavaScript.

Ứng dụng Blazor Server hiển thị nội dung khác với các mô hình truyền thống để hiển thị giao diện người dùng trong ứng dụng ASP.NET Core bằng cách sử dụng view Razor hoặc Razor Page. Cả hai mô hình đều sử dụng ngôn ngữ Razor để mô tả nội dung HTML để hiển thị, nhưng chúng khác nhau đáng kể về cách hiển thị đánh dấu.

Khi Razor Page hoặc view được hiển thị, mọi dòng mã Razor đều phát ra HTML ở dạng văn bản. Sau khi kết xuất, máy chủ xử lý trang hoặc phiên bản xem, bao gồm bất kỳ trạng thái nào đã được tạo. Khi một yêu cầu khác cho trang xảy ra, toàn bộ trang được hiển thị lại thành HTML và được gửi tới ứng dụng khách.

Blazor Server tạo ra một biểu đồ các component để hiển thị tương tự như Mô hình đối tượng tài liệu HTML hoặc XML (DOM). Biểu đồ component bao gồm trạng thái được giữ trong các property và field. Blazor đánh giá biểu đồ component để tạo ra biểu diễn nhị phân của đánh dấu, được gửi tới ứng dụng khách để hiển thị. Sau khi kết nối được thực hiện giữa máy khách và máy chủ, các phần tử kết xuất trước tĩnh của component được thay thế bằng các phần tử tương tác. Hiển thị trước nội dung trên máy chủ giúp ứng dụng cảm thấy phản hồi nhanh hơn trên máy khách.

Sau khi các component tương tác trên máy khách, các bản cập nhật giao diện người dùng được kích hoạt bởi sự tương tác của người dùng và sự kiện trong ứng dụng. Khi một bản cập nhật xảy ra, biểu đồ component được hiển thị lại và độ lệch giao diện người dùng (sự khác biệt) được tính toán. Sự khác biệt này là tập hợp các chỉnh sửa DOM nhỏ nhất cần thiết để cập nhật giao diện người dùng trên máy khách. Khác biệt được gửi đến máy khách ở định dạng nhị phân và được trình duyệt áp dụng.

Một component được xử lý sau khi người dùng điều hướng khỏi component đó.

Blazor WebAssembly

Blazor WebAssembly là một framework ứng dụng một trang (SPA) để xây dựng các ứng dụng web tương tác phía máy khách với .NET.

Việc chạy mã .NET bên trong trình duyệt web được thực hiện nhờ WebAssembly (viết tắt là wasm). WebAssembly là một định dạng mã byte nhỏ gọn được tối ưu hóa để tải xuống nhanh và tốc độ thực thi tối đa. WebAssembly là một tiêu chuẩn web mở và được hỗ trợ trong trình duyệt web mà không cần plugin. WebAssembly hoạt động trong tất cả các trình duyệt web hiện đại, bao gồm cả trình duyệt cho di động.

Mã WebAssembly có thể truy cập toàn bộ chức năng của trình duyệt thông qua JavaScript, được gọi là khả năng tương tác JavaScript, thường được rút ngắn thành JavaScript interop hoặc JS interop. Mã .NET được thực thi qua WebAssembly trong trình duyệt chạy trong hộp cát JavaScript của trình duyệt với các biện pháp bảo vệ mà hộp cát cung cấp chống lại các hành động độc hại trên máy khách.

Khi ứng dụng Blazor WebAssembly được xây dựng và chạy:

• Các file code C# và file Razor được biên dịch thành các assembly .NET.
• Các assembly và thời gian chạy .NET được tải xuống trình duyệt.
• Blazor WebAssembly khởi động thời gian chạy .NET và định cấu hình thời gian chạy để tải các tập hợp cho ứng dụng. Thời gian chạy Blazor WebAssembly sử dụng tương tác JavaScript để xử lý  thao tác Mô hình đối tượng tài liệu (DOM) và lệnh gọi API trình duyệt.

Kích thước của ứng dụng đã xuất bản, kích thước tải trọng của nó, là yếu tố hiệu suất quan trọng đối với khả năng sử dụng của ứng dụng. Một ứng dụng lớn mất khá nhiều thời gian để tải xuống trình duyệt, điều này làm giảm trải nghiệm người dùng. Blazor WebAssembly tối ưu hóa kích thước tải trọng để giảm thời gian tải xuống:

• Code không sử dụng sẽ bị loại bỏ khỏi ứng dụng khi được xuất bản bởi Trình chỉnh sửa ngôn ngữ trung gian (IL).
• Phản hồi HTTP được nén.
• Thời gian chạy .NET và các assembly được lưu trong bộ nhớ cache trong trình duyệt.

Blazor lai

Ứng dụng lai sử dụng kết hợp công nghệ gốc và công nghệ web. Ứng dụng Blazor Hybrid sử dụng Blazor trong ứng dụng khách gốc. Các component Razor chạy tự nhiên trong quy trình .NET và kết xuất giao diện người dùng web thành điều khiển Web View được nhúng bằng cách sử dụng kênh tương tác cục bộ. WebAssembly không được sử dụng trong các ứng dụng Kết hợp. Các ứng dụng lai bao gồm các công nghệ sau:

• Giao diện người dùng ứng dụng đa nền tảng .NET (.NET MAUI): Framework đa nền tảng để tạo các ứng dụng dành cho thiết bị di động và máy tính để bàn gốc bằng C# và XAML.
• Windows Presentation Foundation (WPF): Khung giao diện người dùng độc lập với độ phân giải và sử dụng công cụ kết xuất dựa trên véc-tơ, được xây dựng để tận dụng phần cứng đồ họa hiện đại.
• Windows Forms: Một framework giao diện người dùng tạo các ứng dụng khách dành cho máy tính để bàn phong phú cho Windows. Nền tảng phát triển Windows Forms hỗ trợ một loạt các tính năng phát triển ứng dụng, bao gồm điều khiển, đồ họa, liên kết dữ liệu và đầu vào của người dùng.

Để biết thêm thông tin về cách tạo ứng dụng Blazor Hybrid với các framework ở trên, hãy xem các bài viết sau:

• Các mô hình lưu trữ ASP.NET Core Blazor
• ASP.NET Core Blazor Hybrid

Tương tác JavaScript

Đối với các ứng dụng yêu cầu thư viện JavaScript của bên thứ ba và quyền truy cập vào API trình duyệt, thì các component sẽ tương tác với JavaScript. Các component có khả năng sử dụng bất kỳ thư viện hoặc API nào mà JavaScript có thể sử dụng. Mã C# có thể gọi vào mã JavaScript và mã JavaScript có thể gọi vào mã C#.

Chia sẻ mã và .NET Standard

Blazor triển khai .NET Standard, cho phép các dự án Blazor tham khảo các thư viện tuân thủ các thông số kỹ thuật của .NET Standard. .NET Standard là một đặc điểm kỹ thuật chính thức của các API .NET phổ biến trên các triển khai .NET. Các thư viện lớp .NET Standard có thể được chia sẻ trên các nền tảng .NET khác nhau, chẳng hạn như Blazor, .NET Framework, .NET Core, Xamarin, Mono và Unity.

Các API không áp dụng được bên trong trình duyệt web (ví dụ: truy cập file system, mở socket và threading) sẽ phát sinh ngoại lệ PlatformNotSupportedException.

Tài nguyên bổ sung

• WebAssembly
• Các mô hình lưu trữ ASP.NET Core Blazor
• Sử dụng ASP.NET Core SignalR với Blazor
• Gọi các hàm JavaScript từ các phương thức .NET trong ASP.NET Core Blazor
• Gọi các phương thức .NET từ các hàm JavaScript trong ASP.NET Core Blazor
• Kho lưu trữ GitHub mono/mono
• Hướng dẫn C#
• Tham chiếu cú ​​pháp dao cạo cho ASP.NET Core
• HTML
• Blazor tuyệt vời (Liên kết đến các tài nguyên Blazor do cộng đồng duy trì)
• Kho lưu trữ GitHub mẫu Blazor (dotnet/blazor-samples)