Nhật ký học tập

Trong các bài trước, chúng ta đã làm quen với ô Search tổng quát. Tuy nhiên, khi dữ liệu trở nên phức tạp, người dùng thường có nhu cầu lọc chính xác theo từng trường thông tin (ví dụ: chỉ xem sản phẩm "Hết hàng" hoặc thuộc loại "Điện tử"). Hôm nay, mình sẽ hướng dẫn các bạn cách tạo bộ lọc dạng Popup Dropdown ngay trên Header của DataTable Chúng ta sẽ sử dụng Icon tam giác và Popup Menu của Bootstrap graph LR subgraph "Thẻ TH (Table Header Cell)" Title[Text: Category] --- Icon[Icon: bi-caret-down-fill] end Icon -.-> Menu[Dropdown Menu - Absolute Position] subgraph "Dropdown Menu Items" Option1[Tất cả] Option2[Giá trị 1] Option3[Giá trị 2] end Menu --- Option1 Menu --- Option2 Menu --- Option3 Cài đặt giao diện CSS Tham khảo: https://getbootstrap.com/docs/4.0/components/dropdowns/ Cấu Trúc HTML Dropdown <div class="dropdown d-inline-block filter-container ms-2"> <!...

Nếu bạn đang xây dựng các hệ thống quản trị hoặc các ứng dụng quản lý kho, tài chính, việc hiển thị hàng nghìn dòng dữ liệu lên trình duyệt là một thách thức. jQuery DataTables chính là "cứu cánh" giúp biến các bảng HTML thô sơ thành những bảng dữ liệu thông minh. Trong bài viết này, chúng ta sẽ bắt đầu với những bước thiết lập nền móng đầu tiên. DataTable là gì DataTables là một plug-in mã nguồn mở cho thư viện jQuery giúp nâng cao khả năng tương tác cho các bảng HTML thông thường. Nó cung cấp các tính năng nâng cao như phân trang, tìm kiếm tức thì và sắp xếp dữ liệu chỉ với một dòng mã JavaScript Chuẩn bị môi trường Để sử dụng DataTables, bạn cần tích hợp thư viện vào project. Bạn có thể sử dụng CDN để nhanh chóng bắt đầu. Thêm vào file _Layout.cshtml hoặc trực tiếp vào View: <link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.min.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"...

Fluxor là một thư viện giúp quản lý trạng thái (State Management) một cách chặt chẽ và dễ dự đoán. Để hiểu cách nó hoạt động, chúng ta hãy nhìn vào luồng dữ liệu sau: 1. Luồng hoạt động graph LR A[UI / View] -- Dispatch --> B(Action) B --> C{Dispatcher} C --> D[Reducer] E[(Current State)] --> D D -- Create New --> F[(New State)] F --> A Hiểu đơn giản: State (Trạng thái): Là dữ liệu duy nhất và không thể thay đổi (immutable) đại diện cho một phần của ứng dụng. Action (Hành động): Một thông điệp gửi đi để yêu cầu thay đổi trạng thái. Nó không chứa logic, chỉ chứa dữ liệu cần thiết. Reducer (Bộ chuyển đổi): Một hàm thuần túy (pure function) nhận vào State cũ + Action và trả về một State mới. Dispatcher (Bộ điều phối): Công cụ dùng để gửi Action vào hệ thống. State State trong Blazor là dữ liệu hiện tại của ứng dụng tại một thời điểm cụ thể (ví dụ: giỏ hàng, thông tin đăng nhập, biến Lưu ý: Không ai được sửa State trực tiếp. Tại sao St...

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 ...

Blazor Server là một mô hình hosting của framework web Microsoft Blazor, trong đó ứng dụng được thực thi trên server bên trong một ứng dụng ASP.NET Core. Khác với các ứng dụng web truyền thống phải tải lại toàn bộ trang, Blazor Server sử dụng một kết nối thời gian thực để cập nhật giao diện người dùng (UI) một cách linh hoạt và tức thì. 1. Cơ chế vận hành: Sức mạnh từ SignalR Điểm khác biệt lớn nhất của Blazor Server (nay gọi là Interactive Server ) so với MVC hay Razor Pages truyền thống là Stateful Connection : Khi trình duyệt kết nối, một kênh SignalR (dựa trên WebSockets) được thiết lập. Toàn bộ logic UI và trạng thái component chạy trên server. Mỗi khi có sự kiện người dùng (click, gõ phím...), server chỉ tính toán phần thay đổi nhỏ nhất của HTML (gọi là UI diff ) và gửi đoạn dữ liệu cực nhỏ về trình duyệt để cập nhật giao diện. 2. Cấu trúc một ứng dụng Blazor Web App (.NET 10) Từ .NET 8 trở đi, Microsoft khuyến nghị sử dụng template Blazor Web App . Cấ...