liveBook · Manning

Component parameter

As explained in Pro ASP.NET Core 7, Tenth Edition

The Parameter attribute marks a Blazor component property as a value that can be supplied by the component's parent or routing system.

A component parameter is a C# property marked with [Parameter]. It lets a Razor component receive a value supplied in its parent’s markup or by a matching route segment. Mark the properties callers should configure; other properties can remain internal to the component. section 34.2.1 section 35.2.4

Configure a reusable filter

In SelectFilter.razor, [Parameter] marks Values and Title. A parent uses <SelectFilter values="@Cities" title="City" />: the Razor expression supplies a sequence, while the fixed string supplies the label. SelectedValue has no [Parameter] and is not configured by that markup. section 34.2.1

Parameters also make one component useful in different contexts. An order table receives its title, orders, button label, and selection callback from its parent. The parent renders it once for unshipped orders and again for shipped orders, with different values and actions. Clicking a row’s button invokes the supplied callback with the order ID. section 10.2.2

Two useful variations:

  • Add [EditorRequired] alongside [Parameter] when a caller should supply a value. Omitting its attribute produces a warning. section 34.2.1
  • Use [Parameter(CaptureUnmatchedValues = true)] on a Dictionary<string, object> property to collect unmatched attributes. Apply the dictionary to an HTML element with @attributes—for example, to pass autofocus, name, and required through a filter component. section 34.2.1

Routing can supply a parameter instead of a parent component. With @page "/person/{id:long}", a [Parameter] property named Id and typed long receives the segment value. If the route segment has no type constraint, its receiving property must be string. A NavLink to a matching URL can navigate to the component without reloading the HTML document. section 35.2.4

A component rendered from an MVC view can also receive configured values: the component element uses attributes such as param-itemcount="5" and param-selecttitle="@("Location")". This is distinct from the ordinary attributes on a parent Razor component element. section 34.2.1

How Pro ASP.NET Core 7, Tenth Edition covers it

How deep it goes
Works through property declarations, parent attributes, unmatched-attribute capture, and typed route segments without explaining parameter-binding internals.
Examples
Uses a configurable select filter, two order tables, an MVC component element, and a routed person display.
What it assumes
Assumes familiarity with C# properties and Razor markup while showing how component attributes and route segments reach those properties.
What you can do after
Build it from scratch by marking configurable properties and supplying their values through component markup or route segments.
How it connects
Connects Razor components with Razor expressions, routing, event callbacks, and attribute splatting.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro ASP.NET Core 7, Tenth Edition. The section links point to the parts of the book it draws on.