Search⌘ K
AI Features
Home
Courses
Building Real-Life Applications with Blazor WebAssembly

Viewing the Expenses

Explore how to create an interactive expenses table by populating and displaying Expense objects within a Blazor EditForm component. Understand how to highlight unpaid expenses and run the application to view the expense tracker in action.

We'll cover the following...

We need to add a table to display the list of expenses. We do this as follows:

  1. Return to Visual Studio.

  2. Open the ExpenseTracker.Client.Pages\Index.razor page.

  3. Update the markup to the following:

HTML
@page "/"
@using ExpenseTracker.Shared
@inject HttpClient Http
<h2>Expenses</h2>
@if (expenses == null)
{
  <p><em>Loading...</em></p>
}
else if (expenses.Count == 0)
{
  <div>None Found</div>
}
else
{
}
@code{
  IList<Expense> expenses;
}
...