In previous articles, we have seen some basic things related to Blazor components. Those articles are listed here, just case you want to refer them.

• .NET 7 – Blazor WebAssembly Standalone App – Make API Calls
• How does Blazor Routing work ?
• Blazor WebAssembly – Adding a new component
• Blazor WebAssembly Standalone App – Add a Basic Form
• Blazor WebAssembly – Basics of Data Binding
• Blazor App – Input Controls and Validations
• Blazor Apps – Handling the UI Events

In this article, we are going to talk more about component parameters.

What is a component ?

As per documentation, Blazor apps are built using Razor components, informally known as Blazor components. A component is a self-contained portion of user interface (UI) with processing logic to enable dynamic behavior.

A component basically is a class with .razor extension. It contains some HTML markup and C# code.

Components use Razor syntax. It uses Directives (e.g. @page, @using) and Directive attributes (@bind, @value, etc.). We have discussed about most of these directive attributes in previous articles, and hence I am not going to describe them here to keep this article short.

Basically components are ordinary C# classes, and they can be placed in anywhere in the project. Generally, the components which produce pages are placed under Pages folder. And any other components, which do not directly render as a page, are placed under Shared folder or any other custom folder in the project.

Component: Members and Rendering Logic

A component basically contains HTML markup and C# code. After compilation, both of these pieces are converted into a component class. The name of that class matches with the name of .razor file.

The component code can be divided into two parts – namely members which is basically the C# code and the rendering logic which contains HTML markup.

Members of the components include:

• Properties and fields initializers
• Parameter values from the navigation routes and parent components
• Methods used for event handling, lifecycle events, etc.

Rendering logic contains the HTML markup. It can use C# expressions which must begin with “@” character. These C# expressions may be either to read the value of properties / fields or to call the methods.

In previous posts, we have discussed about event handling methods. We also have created private fields and used them in the rendering logic.

What are Component Parameters ?

While working on real-world applications, we may need to create components which expect the input data. For example, if we are working on creating parent-child views, the child view may expect some data from the parent view. This passing of data can be done using component parameters.

Component parameters pass data to components and are defined using public C# properties on the component class with the [Parameter] attribute. 

There are basically two ways in which parameters can be passed to a component –

• One way, via specifying the child component in the markup and then setting the attributes.
• Or a component can also expect parameters to be passed via URL, e.g. query string or route parameters

How to define component parameters ?

We have seen the definition from the documentation in the previous section. It clearly states that a component parameters are basically a public C# properties on the component class. The property must be decorate with the [Parameter] attribute.

• A parameter should be basically an auto-property. It should not contain any custom logic in get and set. It cannot modify the value in getter or setter.
• Override OnParametersSetAsync to transform a received parameter each time new data is received.
• A parameter (i.e. the auto-property) can be initialized to some value.

Navigation and Route Parameters

Route parameters can be specified in the @page directive. The Blazor router uses route parameters to populate corresponding component parameters. Optional parameters are also supported. The syntax is similar to what we generally use in ASP .NET Core Web App or API project.

If @page directive value is @page "/example/{param?}", then the value of optional parameter param is assigned to a parameter of name Param. Route can have more then one parameters, some can be mandatory paramters and others can be optional.

If @page directive value is @page "/catch-all/{*pageRoute}", the asterisk here marks the pageRoute parameter as catch-all parameter. All the path after /catch-all/ is assigned to a parameter (i.e. auto-property), PageRoute.

We can also use the [SupplyParameterFromQuery] attribute with the [Parameter] attribute to specify that a component parameter of a routable component can come from the query string. In this new attribute, we can specify the name of query string parameter which maps to the component parameter property.

Examples

Now, let’s have a look at the code given below. It has a Counter component, which has a parameter Count. Then, we can see that Index component uses this Counter component and sets the parameter value to be 12. This is a simple example of how to pass values from parent component to the child component.

Then there is another example. Here the code of Counter component is same. The only difference is we have added an additional attribute – [SupplyParameterFromQuery] attribute – to specify that the value can be taken from the querystring.

The snapshot given below shows that the initial value 122 is taken from the query string:

I will try to cover parameter transformations in some of the future articles. I hope you find this information helpful. Let me know your thoughts.