Bạn đã định nghĩa được UI cho web app của bạn. Bây giờ chúng ta sẽ tìm hiểu thêm về việc làm thế nào để thêm các logic vào web app trong Blazor. Trong Blazor app bạn có thể thêm code C# riêng biệt trong file .cs hoặc là dạng inline trong your Razor components
C# code-behind trong file riêng biệt
Trong Blazor, bạn có thể thêm file C# trưc tiếp vào app như các project .NET khác. Nó thường được gọi là code-behind, Kỹ thuật này sử dụng 1 file code tách biệt để lưu các logic của ứng dụng. Các file riêng biệt là một chiến lược tuyệt vời khi logic nghiệp vụ của bạn phức tạp, dài hoặc có nhiều lớp. Trong template blazor mẫu bạn có thể tham khảo file Page/Error.cs.
khi bạn muốn tách code-behind cho 1 component nào đó thì bạn chỉ đơn giản là add 1 class và đặt trùng tên với tên của file . razor. ví dụ mình tạo file code-behind cho FetchData.razor như sau: click phải vào Page -> add new class và đặt tên là FetchData.razor.cs , sau đó mở file FetchData.razor.cs và sửa class FetchData -> partial class FetchData.
Đối với logic đơn giản, không phải lúc nào bạn cũng cần tạo các tệp .cs mới.
C# inline trong các component
Một thực tế phổ biến là trộn HTML và C # trong một tệp thành phần Razor duy nhất. Đối với các thành phần đơn giản với yêu cầu mã nhẹ hơn, cách tiếp cận này hoạt động tốt. Để thêm mã vào tệp Razor, bạn sẽ sử dụng các directives.
Razor directives là gì?
Các Razor directives là đánh dấu thành phần được sử dụng để thêm C# inline với HTML. Với các directives , các nhà phát triển có thể định nghĩa các câu lệnh, phương thức đơn lẻ hoặc các khối mã lớn hơn.
Các Razor directives được biểu thị bằng các biểu thức ngầm định với các từ khóa dành riêng theo sau ký hiệu @.
@{ var quote = “Getting old ain’t for wimps! – Anonymous”; } <div>Quote of the Day: @quote</div>
Code directives
Bạn có thể sử dụng @expression () để thêm câu lệnh C # inline với HTML. Nếu bạn yêu cầu thêm mã, hãy sử dụng chỉ thị @code để thêm nhiều câu lệnh được đặt trong dấu ngoặc đơn.
Bạn cũng có thể thêm phần @functions vào mẫu cho các phương thức và thuộc tính. Chúng được thêm vào đầu lớp đã tạo, nơi tài liệu có thể tham chiếu đến chúng.
Page directive
@Page directive là đánh dấu đặc biệt đinh nghĩa component là một page. Sử dụng directive này để chỉ định một tuyến đường (route). Lộ trình ánh xạ tới một attribute route mà Blazor engine nhận ra để đăng ký và truy cập trang.
@page “/fetchdata”
Razor data binding
Trong các Razor component, bạn có thể liên kết dữ liệu các phần tử HTML với C# fields, thuộc tính và giá trị biểu thức Razor. Liên kết dữ liệu cho phép đồng bộ hóa hai chiều giữa HTML và Microsoft .NET.
Dữ liệu được đẩy từ HTML sang .NET khi một thành phần được hiển thị. Các thành phần tự hiển thị sau khi mã xử lý sự kiện thực thi. Đó là lý do tại sao các bản cập nhật thuộc tính được phản ánh trong giao diện người dùng ngay sau khi trình xử lý sự kiện được kích hoạt.
Sử dụng đánh dấu @bind để liên kết một biến C# với một đối tượng HTML. Bạn xác định biến C# theo tên dưới dạng một chuỗi trong HTML.
<input type=”number” @bind=”numberA” />
…
@code {
private int numberA = 0;
}