State trong Blazor là một trong những khái niệm quan trọng nhất. Nếu hiểu đúng, bạn sẽ thấy Blazor rất "mượt"; nếu hiểu sai, code sẽ nhanh chóng thành… mì gói 🍜. Bài này đi từ ví dụ đơn giản nhất (click button) đến các pattern nâng cao như StateContainer, PersistentState, Fluxor và Undo/Redo. 1. State là gì? State = dữ liệu hiện tại của ứng dụng tại một thời điểm. Ví dụ: Counter = 5 User đã đăng nhập Giỏ hàng có 3 sản phẩm UI luôn được render dựa trên state. 2. Ví dụ cơ bản nhất: Click Counter Counter.razor <h3>Counter</h3> <p>Current count: @count</p> <button @onclick="Increment">Click me</button> @code { int count = 0; void Increment() { count++; } } Điều gì đang xảy ra? Flow rất đơn giản: User click ↓ Increment() ↓ count thay đổi ↓ Blazor re-render UI Đây chính là nền tảng: UI = f(state) 3. Khi state nằm trong component Cách trên hoạt động tốt khi: S...
Trong kiến trúc hiện đại của Blazor, việc chia nhỏ giao diện thành các Component giúp mã nguồn dễ bảo trì và tái sử dụng hơn. Tuy nhiên, thách thức lớn nhất thường nằm ở việc: Làm thế nào để các Component "communicate" được với nhau? Bài viết này sẽ giúp bạn nắm vững 3 kỹ thuật cốt lõi để truyền dữ liệu và điều khiển hành vi giữa các Component trong Blazor 1. EventCallback EventCallback là cách chuẩn nhất để một Component con thông báo cho Component cha rằng một sự kiện nào đó đã xảy ra (ví dụ: người dùng click nút, chọn item). Giả sử bạn có 2 components: Parent và Child Ở Component Child, bạn thêm 1 button và gọi event click của component Parent ParentComponent.razor @page "/parentcomponent" @namespace BlazorGettingStarted.Components.Pages @rendermode InteractiveServer <ChildComponent Text="Tăng giá trị" OnButtonClicked="IncrementCount" /> <p>Giá trị hiện tại: @count</p> @code { private int count = 0; private ...