In previous article, we have discussed about parameters. We have seen how the querystring parameters can be used in razor components. We also have seen how to pass values from parent to child components.

As we know, a parameter is basically an auto-property, with a [Parameter] attribute on it, with an empty getters and setters. We can set an initial value to this auto property, but we cannot have a custom logic in getters or setters.

In this article, we are going to discuss about how to transform the values.

Add an Optional Route Parameter

Now, let’s create a Blazor WebAssembly App. Do not select ASP .NET Core Hosted option while creating the project. Once the project is created, navigate to the Counter component. Let’s modify the Counter component. We will add an optional route parameter first in that component.

After modifications, the code in the Counter component should be as shown in the code snippet given below.

This code declares an optional parameter, namely count. It is specified in the value @page directive, inside the curly brackets, namely count. The token in the above code is {count:int?}, where the name of placeholder is count and its data type is expected to be integer. The question mark conveys that the router parameter is optional.

The component also has declared a parameter with the same name. There is an auto-property with name Count and its data type is nullable int, to hold the value of the route parameter. When the route parameters are optional, generally the data type of the parameter should be defined to be nullable.

Now, the counter route accepts an optional parameter. We can test it by running the project and by providing the URL to be /counter/123. The value of this parameter would be displayed on the page as shown in the snapshot given below.

Transforming Parameter Values

Now, let’s move to the main topic of today’s blog. The very first question that may come to our mind is – why do we need to know about it?

It is because the parameters cannot have custom code in getters and setters. Thus, if a component accepts a value and wants to calculate another value from it and then use it on UI, then it may use some other ways to change the values.

To transform the received value, the component should Leave the parameter as auto-property as it is supposed to be. And there are two options:

• Create another property to return the transformed value.
• OR Override OnParametersSetAsync (synchronous version – OnParametersSet) to transform a received parameter each time new data is received.

So, let’s have a look at one example to understand how to override the method for applying transformation.

Transform the Optional Route Parameter

In the code snippet given above, let’s say we want to apply a random calculation to the incoming value and the new transformed value can then be assigned to the parameter.

The transformation code is written inside a method – OnParametersSet – @code section. The complete code is given below. The transformed result is then assigned back to the same property.

When we run this code and enter the value 50 as the parameter value, it would print 250 on the screen as shown in the snapshot given below.

I hope you find this information helpful. Let me know your thoughts.