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

Adding the Input Components

Discover how to integrate various input components such as date, vendor, description, and amount into the EditForm component. Learn to use validation summaries and submit buttons to manage user input effectively while building an interactive expense tracker application in Blazor WebAssembly.

We'll cover the following...

We need to add input components to the EditForm element. We do this as follows:

  1. Add the following markup to EditForm to input Date:

C++
<div>
  <label>
    Date
    <InputDate @bind-Value="expense.Date"class="form-control" />
  </label>
</div>

  1. Add the following markup to EditForm to input Vendor:

C++
<div>
  <label class="d-block">
    Vendor
    <InputText @bind-Value="expense.Vendor" class="form-control" />
  </label>
</div>
...