CardView in BlazorForKids
The CardView component is a great alternative to tabular layouts like GridView. It allows you to display your data in a flexible, card-based format — perfect for dashboards, profile lists, product displays, or any layout where a table might feel too rigid or technical.
Like other components in BlazorForKids, the CardView can be generated with a single line of code. However, since cards can vary significantly in layout and content, the framework requires you to define how each card should be rendered using an ItemTemplate component.
Creating a CardView
Here’s how you define a basic CardView in the ComponentsDesigner section:
publicpartialclassHomeLayout:IBkApplicationLayout
{
publicvoidLayoutDesigner(IBkLayoutBuilderbuilder)
{
}
publicvoidPagesDesigner(IBkPageBuilderbuilder)
{
builder.CreatePage("EmployeesCardViewPage",page=>
{
page.PageLink.Text("View Employees");
page.PageLink.Description("Show employees in a card view");
page.PageLink.Icon(Icons.GRID_3X3);
page.Content(content=>
{
content.DisplayComponent<EmployeeCardView>();
});
});
}
publicvoidComponentsDesigner(IBkComponentsBuilderbuilder)
{
builder.CreateCardView<EmployeeModel,Employee>("EmployeeCardView",cardView=>
{
// Required: define the visual structure for each card// This component tells the framework how to render each item on the screen cardView.ItemTemplate<EmployeeCardComponent>();
// Optional: set a title to be displayed above the card view cardView.Title("List of Employees");
// Optional: assign a custom CSS class for styling the card container cardView.CssClass("card-view");
// Optional: apply a default filter to the query that loads card data// In this case, only employees with a non-null MiddleName will be shown cardView.AddDefaultFilter(employee=>employee.MiddleName!=null);
// Optional: set the default sort order for the card items// This example sorts employees by their FirstName in ascending order cardView.AddOrderBy(a=>a.FirstName,BkSortDirection.Ascending);
// Optional: enable search functionality for this card view// To show the search input in the UI, two things must be configured:// 1. Call AllowSearch to enable search support// 2. Define the search logic using WhenSearchTextChanged//// The WhenSearchTextChanged method accepts a lambda that takes the user's search text,// and returns a predicate used to filter the underlying EF Core query.//// ❗ Important: The expressions you write here must be compatible with Entity Framework Core,// because they are translated directly into SQL. Avoid using methods or logic that can't be converted// to a database query (like local function calls or complex C# constructs).//// This example filters employees by checking if the search text matches// either the first name or the last name (case-insensitive). cardView.AllowSearch(searchConfig=>
{
searchConfig.PlaceHolder("Search by First or Last Name");
searchConfig.Label("Search");
searchConfig.ToolTip("Search by First or Last Name");
searchConfig.WhenSearchTextChanged(searchText=>employee=>employee.FirstName.ToLower().Contains(searchText.ToLower())||employee.LastName.ToLower().Contains(searchText.ToLower()));
});
});
}
}
Defining the Card Template
To display cards properly, you must define a component that inherits from BkCardViewTemplate<TModel>. This template tells the framework how each card should be laid out visually and which data should be shown.
Example: EmployeeCardComponent
@inherits BkCardViewTemplate<EmployeeModel>
<div class="employee-card">
<div class="employee-card-header">
<h2>@CardModel.FirstName @CardModel.LastName</h2>
</div>
<div class="employee-card-body">
<p><strong>Department:</strong> @CardModel.DepartmentModel.Name</p>
<p><strong>Email:</strong> @CardModel.Email</p>
<p><strong>Job Title:</strong> @CardModel.JobTitleModel.Title</p>
</div>
<div class="employee-card-footer">
<BkPageLinkMenu TPage="EmployeeDetailsPage" QueryParameters="QueryParameters" />
</div>
</div>
@code {
private Dictionary<string, string>QueryParameters = >new ()
{
{
"EmployeeId", CardModel.Id.ToString()
}
};
}
This component defines a visually clean card layout and uses the injected CardModel property (set by the framework) to render data. You can also inject buttons, icons, page links, or anything else you need per card.
How CardView Loads Data
Under the hood, BlazorForKids uses Blazor’s built-in Virtualize component to handle performance. This means:
- Only a small number of cards are rendered on screen at any time
- As the user scrolls, the framework loads more data from the database automatically
- This keeps memory usage low and rendering fast — even with thousands of records
Just like GridView, CardView supports sorting, filtering, pagination, and optional search inputs — all configured via the fluent API.
Summary
- Use
CreateCardViewto define your CardView component - Set the
ItemTemplateto a custom Blazor component that inherits fromBkCardViewTemplate - Optionally configure title, styling, filters, ordering, and search behavior
- The framework handles performance, data binding, and virtualization for you
The CardView component offers a modern, clean way to display your data with full flexibility — giving you a consistent look and great performance without extra boilerplate code.
Final Thoughts on CardView
The CardView component in BlazorForKids is an excellent way to display data in a more visual and flexible format compared to a traditional table. Whether you're showing user profiles, product listings, or summary panels, CardView gives you the freedom to design beautiful, responsive cards that fit your application perfectly.
As a beginner, don’t worry if it seems like a lot at first. The framework handles most of the heavy lifting — data loading, pagination, performance optimizations — so you can focus on defining how your cards should look. Once you create your first template and see it working, the rest becomes much easier.
Start with a basic layout, then gradually add features like filtering, search, and styling as you grow more comfortable. Thanks to BlazorForKids, you don't need to build everything from scratch — just plug in your logic, and the framework will take care of the rest.
🎨 CardView is your canvas — design it your way, and let the framework handle the rest.