An event is a browser or user-interface occurrence, such as a click or selection change, that can trigger component code. In Blazor Server, JavaScript receives the browser event and forwards its details over a persistent HTTP connection. The server invokes the handler, updates component state, and sends changed content back for display. section 33.4.1
Register a handler on an HTML element with an attribute named `@on` plus the event name: `@onclick="IncrementCounter"` handles a button click. The method can take an optional `EventArgs` parameter or a more specific type; a click handler can receive `MouseEventArgs`. Changing a property used in the component’s markup updates what the user sees. section 33.4.1
Listing 33.10 The contents of the Events.razor file in the Blazor folder
<div class="m-2 p-2 border">
<button class="btn btn-primary" @onclick="IncrementCounter">
Increment
</button>
<span class="p-2">Counter Value: @Counter</span>
</div>
@code {
public int Counter { get; set; } = 1;
public void IncrementCounter(MouseEventArgs e) {
Counter++;
}
}
A complete `Events.razor` counter pairs a button’s `@onclick` handler with displayed component state. section 33.4.1
Use a lambda when the handler needs another argument, as when several buttons update separate counters: `@onclick="@(e => IncrementCounter(e, 0))"`. For elements generated in a loop, copy the loop index into a local variable before capturing it in the handler. A lambda can also perform a short action directly, such as removing a counter entry to reset its display. section 33.4.1
Browser behavior still matters. A button inside a form can trigger the form’s default action, and a click can propagate to an ancestor with its own handler. Use `@onclick:preventDefault` to control the default action and `@onclick:stopPropagation` to control propagation; the examples set these parameters from component state. section 33.4.1
Events also connect components. A child component declares an `EventCallback<T>` parameter; its handler for a native event calls `InvokeAsync` with the value to report. The parent registers its own handler using an attribute named for that callback. For example, a select component handles `@onchange`, reports the selected city, and lets its parent highlight matching table rows. section 34.2.2
Listing 34.11 Creating an event in the SelectFilter.razor file in the Blazor folder
<div class="form-group">
<label for="select-@Title">@Title</label>
<select name="select-@Title" class="form-control"
@onchange="HandleSelect" value="@SelectedValue">
<option disabled selected value="">Select @Title</option>
@foreach (string val in Values) {
<option value="@val" selected="@(val == SelectedValue)">
@val
</option>
}
</select>
</div>
@code {
[Parameter]
public IEnumerable<string> Values { get; set; }
= Enumerable.Empty<string>();
public string? SelectedValue { get; set; }
[Parameter]
public string Title { get; set; } = "Placeholder";
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object>? Attrs { get; set; }
[Parameter]
public EventCallback<string> CustomEvent { get; set; }
public async Task HandleSelect(ChangeEventArgs e) {
SelectedValue = e.Value as string;
await CustomEvent.InvokeAsync(SelectedValue);
}
}
The select component shows where a native change event becomes a custom callback to its parent. section 34.2.2
A value property paired with a suitably named custom-event property can instead support a parent-side binding, such as `@bind-SelectedValue="SelectedCity"`. That lets the parent and child coordinate a selection without a separate handler attribute in the parent’s markup. section 34.2.2
