How to Assign Async Value to Razor Component [Parameter] Property?

Question

I am attempting to create my first Razor Component in a Blazor Server-side project. The Razor Component is named MyComponent and has a property configured to retrieve its value from input:

MyComponent.razor

    [Parameter]
    public int Count {get; set;}

I am pulling the count from an injected service configured via IServiceCollection, which looks like this:

    public interface ICountingService
    {
        ValueTask<int> Get();
    }

The hosting page, Index.razor looks like the following:

@page "/"
@inject ICountingService Counter

<h1>Hello World!</h1>

<MyComponent Count="@Counter.Get()" />

However, I cannot seem to bind the correct value for the Count property.

I get the following error:

cannot convert from 'System.Threading.Tasks.ValueTask<int>' to 'int'

All of the examples I have found for assigning [Parameter] values to Razor Components are synchronous, and the only asynchronous values I have found are for callbacks and methods (not parameters).

Further, searching online did not return anything obvious so I am posting here in hopes of finding an answer.

Note that I am aware of using protected override async Task OnInitializedAsync and storing a value in there, but that seems like a lot of required ceremony compared to the approach above, especially when considering the multiple services and properties that I will ultimately have to bind.

So, how does one assign values from an asynchronous call to a Razor Component [Parameter] property in the way that I would prefer?

Answer 1

The problem is, Counter.Get() isn't an int value; it's a Task that will have an int at some undefined point either now or in the future. So you can't assign its value to something that's expecting an int right now, because that int doesn't necessarily exist yet.

You've already got the answer, and though it "seems like a lot of ceremony", it's really the only way to do this:

• Create an int property to hold the value.
• Declare an async method
• In that method, assign the awaited value of Counter.Get() to the int that's holding the value
• Set the component's Count property equal to the int property

It may feel like a lot of ceremony, but you should be grateful. Asynchrony is inherently very complicated, and having async/await available already takes care of about 95% of the hard work for you. If you think this solution is messy, you oughtta see what it would take to get it right without async/await!