ARTICLE AD BOX
I have an issue with Blazor not firing or completing the call when I inject a service interface to make some backend/db calls and use that in my page.
I have a Service layer with Interface as,
public interface IDataServices { Task<IEnumerable<JobConfigurations>> GetJobConfigurationsAsync(); }With its implementation as,
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 model.
Now, 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 on the Program.cs looks like,
var builder = WebApplication.CreateBuilder(args); // Add Infrastructure services builder.Services.Configure<AppConfigurations>(builder.Configuration.Bind); // Add the injections for the data services builder.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"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true); app.UseHttpsRedirection(); app.UseAntiforgery(); app.MapStaticAssets(); app.MapRazorComponents<App>() .AddInteractiveServerRenderMode(); app.Run();With all these 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 in my razor page, all events are hit and breakpoints hit.
If it may help, my App.razor looks like below,
<!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 NET10 based Blazor web app dev.
What am I missing and what is going wrong in my code?
