Data Binding

Learning objectives#

• Bind inputs with @bind
• Choose when binding updates with @bind:event
• Format values and run code after binding
• Create bindable component parameters

Explanation#

@bind="field" sets the input’s value from the field and updates the field when the input changes.

By default it updates on change (when the input loses focus). @bind:event="oninput" updates on every keystroke.

@bind:format formats dates; @bind:after runs a method after the value is updated — handy for search-as-you-type.

A component can support @bind-Value by exposing Value and ValueChanged (EventCallback<T>) parameters.

Code example: Live product filter#

1@page "/filter"
2@rendermode InteractiveServer
3

4<input @bind="search" @bind:event="oninput" @bind:after="Apply" placeholder="Search…" />
5<select @bind="maxPrice" @bind:after="Apply">
6    <option value="100000">Any price</option>
7    <option value="5000">Under ₹5,000</option>
8</select>
9<label><input type="checkbox" @bind="inStockOnly" @bind:after="Apply" /> In stock only</label>
10

11<p>@results.Count result(s)</p>
12

13@code {
14    private string search = "";
15    private int maxPrice = 100000;
16    private bool inStockOnly;
17    private List<Product> all = Product.Samples, results = Product.Samples;
18

19    private void Apply() => results = all
20        .Where(p => p.Name.Contains(search, StringComparison.OrdinalIgnoreCase))
21        .Where(p => p.Price <= maxPrice && (!inStockOnly || p.Stock > 0))
22        .ToList();
23}

Typing “mo” immediately shows “1 result(s)” (Mouse). Changing the price or ticking “In stock only” re-filters at once.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. @bind:event="oninput" updates search on every keystroke.
2. @bind:after calls Apply after each value change.
3. select and checkbox bindings convert to int and bool automatically.
4. Apply recomputes the results list, and the count re-renders.

Real-world use case#

Common mistakes#

Best practices#

• Use @bind:after for side effects
• Use oninput only when you need live updates
• Format dates with @bind:format
• Expose Value/ValueChanged for reusable inputs

Remember this#

Practice exercise#

1<input type="date" @bind="start" @bind:format="yyyy-MM-dd" />
2

3@code { private DateOnly start = DateOnly.FromDateTime(DateTime.Today); }

Mini quiz#

Want more? Practise all Blazor MCQs · Blazor interview questions

Related topics#

My notes#

Saved in this browser.