Blazor - Calling @code function from HTML not correctly displaying data

Question

I've built a Blazor application, and I wrote some logic in a for-each loop to display some data. The logic is meant to go something like this: for every job type, display the jobs for that particular type that are in the database.

@foreach (var types in Types)
{
    @GetByType(@types.ID)
    @if (jobs!= null)
    {
        <RadzenRow>
            <RadzenColumn>
                <RadzenText TextStyle="TextStyle.H6">@types.Description</RadzenText>
            </RadzenColumn>
        </RadzenRow>
        <hr>
        <br />
        <MatTable Items="@jobs" class="mat-elevation-z5">
            <MatTableHeader>
                <th>Opening</th>
                <th>Location</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Name</td>
                <td>@context.Location</td>
            </MatTableRow>
        </MatTable>
}

As you can see, I've written a function that gets called in order to call a function from my jobs repository and populate a variable based on the type of job. I'm trying to populate my jobs variable and bind that to my grid. I set it to null before each run of the database in order to clear out the previous records.

private IEnumerable<Locations> Locations { get; set; } = new List<Locations>();
private IEnumerable<JobTypes> Types { get; set; } = new List<JobTypes>();
private IEnumerable<Jobs>? jobs { get; set; } = new List<Jobs>();

private async Task GetByType(int ID)
{
    jobs = null;
    jobs = await jobsRepository.GetByType(ID);
}

The job types themselves are populated in OnInitializedAsync. I tested the types first on their own in the for loop without the grid, and they all displayed correctly. But when the page loads with everything else added, it is displaying the following (no server error or anything; no errors at all in the console, just the below code where the grid would normally be):

System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,Test.Components.Pages.Home+<GetByType>d__43]System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,Test.Components.Pages.Home+<GetByType>d__43]System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,Test.Components.Pages.Home+<GetByType>d__43]System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,Test.Components.Pages.Home+<GetByType>d__43]System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,Test.Components.Pages.Home+<GetByType>d__43]System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,Test.Components.Pages.Home+<GetByType>d__43]System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,Test.Components.Pages.Home+<GetByType>d__43]System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,Test.Components.Pages.Home+<GetByType>d__43]

The first thing that I thought to check was the query that pulls the data in the repository. But when I debugged this, the data itself appears to be pulling correctly. Any help would be appreciated as to why I'm getting this error. Thanks!

Henk Holterman · Accepted Answer · 2025-10-08 05:36:42Z

0

The @GetByType(@types.ID) line should have given you a Warning about not awaiting the Task.

You are calling this during the Render phase but that is synchronous, you can't awaitanything there.

Two options:

a) use non-async code all the way to the database.

b) use an .Include(t => t.Jobs) in the Repository so that you can get all data in one call (in OnInitializedAsync).

Option b is very much preferred. You shouldn't perform any logic inside a Render function.

edited Oct 8 at 5:36

answered Oct 7 at 16:59

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Blazor - Calling @code function from HTML not correctly displaying data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related