In this tutorial, we take a focused, practical walkthrough of the VirtualEPL Blazor Server application, concentrating on how the main Blazor page components work together with the data model, DbContext, services, and application startup configuration in Program.cs. This video is designed to show how real Blazor pages are built on top of a solid backend foundation.
We begin with Program.cs, where the application is configured and composed. You’ll see how Blazor Server and interactive components are enabled, how Entity Framework Core DbContexts are registered, and how application services are wired up using dependency injection. We explain how these registrations allow Blazor page components to directly consume services and data, and how the startup pipeline supports authentication, routing, and database access.
Next, we move into the Blazor page components that make up the core user experience of the application:
-
Index.razor
This page serves as the entry point to the application. We walk through how it acts as a dashboard-style landing page, introduces navigation to the rest of the system, and establishes the overall flow of the VirtualEPL experience. -
LeagueTable.razor
This page demonstrates how league standings are calculated and displayed. You’ll see how domain models such as teams, fixtures, and results are projected into a league table view, how data is retrieved through services and DbContext queries, and how the page renders calculated values like points, goal difference, and position. -
ViewFixtures.razor
This component focuses on reading and presenting fixture data. We break down how match schedules are queried by season and matchday, how models are bound to the UI, and how Blazor components react to user input when filtering or navigating fixtures. -
SimulateSeason.razor
This page showcases how business logic is triggered from the UI. We explain how season simulation is initiated from the page, how services encapsulate the simulation logic, how results are persisted through the DbContext, and how the UI updates once simulation is complete.
After covering the individual pages, we step back and explain how these page components share common patterns:
-
Injecting services directly into Blazor pages
-
Using models as data carriers between the database and the UI
-
Keeping business logic out of the pages and inside services
-
Relying on DbContext configuration for consistency and data integrity
We then dive into the domain models and DbContext that support these pages:
-
Team, Season, Fixture, and HistoricalResult models
-
Read-only models such as LeagueStanding used specifically for presentation
-
Fluent API configuration inside
ApplicationDbContext -
How these models are queried and updated by the Blazor page components
I implement Security in this app using RADZEN BLAZOR STUDIO.
Finally, we tie everything together by revisiting Program.cs as the composition root:
-
How page components rely on service and DbContext registrations
-
Why proper startup configuration is critical for Blazor Server applications
-
How this structure makes the application easier to maintain and extend
By the end of this tutorial, you’ll have a clear understanding of how real Blazor page components like Index.razor, LeagueTable.razor, ViewFixtures.razor, and SimulateSeason.razor are built on top of clean models, services, and DbContexts—forming a cohesive and scalable Blazor Server application.
Source Code
The full source code used in this tutorial can be pulled from:
https://github.com/benjaminsqlserver/VirtualEPL
If you found this walkthrough helpful, consider liking the video, subscribing to the channel, and leaving a comment with questions or ideas for future Blazor content