Blazor .NET 10 dependency injected service call is not even firing

I have an issue with Blazor not firing or completing the call when I inject a service interface to make some backend/database calls and use that in my page.

I have a service layer with an interface like this:

public interface IDataServices{    Task<IEnumerable<JobConfigurations>> GetJobConfigurationsAsync();}

And its implementation is:

public class JobConfigDataServices : IDataServices{    // this is my Repository layer, will be injected via DI    private readonly IDataRepository<JobConfigurations> _jobConfigRepository;    private readonly ILogger<JobConfigDataServices> _logger;    public JobConfigDataServices(IDataRepository<JobConfigurations> jobConfigRepository, ILogger<JobConfigDataServices> logger)    {        _jobConfigRepository = jobConfigRepository;        _logger = logger;    }    public async Task<IEnumerable<JobConfigurations>> GetJobConfigurationsAsync()    {        var getAllQuery = @"select Id, JobName, AppName, ParamName, ParamValue, ParamOrder, CreatedDate, UpdatedDate from DBSchema.JobConfigurations";        var getAllJobConfigs = await _jobConfigRepository.GetResultCollectionAsync(getAllQuery);        return getAllJobConfigs;    }}

The implementation in turn makes a generic repository class invocation, which is purely using Dapper ORM to get the data. This repo is already working across all and well tested to do what it supposed to. So I am not sharing that implementation details here.

The GetResultCollectionAsync() will provide the collection of data of type JobConfigurations.

This is how my Blazor page looks:

@page "/jobconfigs"@using JobsStatus.Contracts@using JobsStatus.Services@inject IDataServices jobService<h3>Job Configurations</h3><div><p>This is the Job Configurations page.</p>    @if (isLoading)    {<p>Loading...</p>    }    else if (!string.IsNullOrEmpty(errorMessage))    {<p style="color: red">@errorMessage</p>    }    else    {        @foreach (var job in DbJobs)        {<div style="color: blue"><strong>@job.JobName</strong> - @job.AppName</div>        }    }</div>@code {    private IEnumerable<JobConfigurations> DbJobs { get; set; } = Array.Empty<JobConfigurations>();    private bool isLoading = true;    private string? errorMessage;    protected override async Task OnAfterRenderAsync(bool firstRender)    {        if (!firstRender || !isLoading)        {            return;        }        try        {            DbJobs = await jobService.GetJobConfigurationsAsync();        }        catch (Exception ex)        {            errorMessage = $"Failed to load job configurations: {ex.Message}";        }        finally        {            isLoading = false;            await InvokeAsync(StateHasChanged);        }    }}

My DIs in Program.cs looks like this:

var builder = WebApplication.CreateBuilder(args);// Add Infrastructure servicesbuilder.Services.Configure<AppConfigurations>(builder.Configuration.Bind);// Add the injections for the data servicesbuilder.Services.AddScoped(typeof(IDataRepository<>), typeof(MmdDataRepository<>));builder.Services.AddScoped<IDataServices, JobConfigDataServices>();// Add services to the container.builder.Services.AddRazorComponents()                .AddInteractiveServerComponents();var app = builder.Build();// Configure the HTTP request pipeline.if (!app.Environment.IsDevelopment()){    app.UseExceptionHandler("/Error");    app.UseHsts();}app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);app.UseHttpsRedirection();app.UseAntiforgery();app.MapStaticAssets();app.MapRazorComponents<App>()   .AddInteractiveServerRenderMode();app.Run();

With all this in place, when I run my app and navigate to https://localhost:###/jobconfigs which is my page route to the above Razor page, it does nothing. I have breakpoints on all possible places including on the OnInitializedAsync() before, and on OnAfterRenderAsync() as well, but no luck. This is not even firing or getting here.

If I remove the line @inject IDataServices jobService from my Razor page, all events are fired, and all breakpoints are hit.

If it may help, my App.razor looks like this:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="/" /><ResourcePreloader /><link rel="stylesheet" href="@Assets["app.css"]" /><link rel="stylesheet" href="@Assets["JobsStatus.styles.css"]" /><ImportMap /><HeadOutlet @rendermode="InteractiveServer" /></head><body><Routes @rendermode="InteractiveServer" /><ReconnectModal /><script src="@Assets["_framework/blazor.web.js"]"></script></body></html>

I added the @rendermode="InteractiveServer" per some AI suggestions but no luck at all. My hunch (could be wrong) is this experience is all from .NET 10 and .NET 10 based Blazor web app dev.

What am I missing and what is going wrong in my code?