Build the AdventureWorks Sales Portal with Blazor Server
Build a full Blazor Server sales portal on AdventureWorks with Copilot in VS 2026 — InteractiveServer render mode, QuickGrid, Identity local auth, MudBlazor charts, bUnit + Playwright tests, PR with Copilot review.
About This Course
Build a complete Blazor Server sales portal end-to-end with GitHub Copilot in Visual Studio 2026 as a pair-programmer. Students scaffold a .NET 10 Blazor Web App using interactive server-side rendering (InteractiveServer render mode) against the AdventureWorks Sales schema from Course 4, land ASP.NET Core Identity for local sign-in, build the Customer 360 page with QuickGrid + server-side pagination + caching, add an Order detail + line-item editor with optimistic concurrency, scaffold a Sales rep performance dashboard with MudBlazor charts via Copilot Agent mode, and ship with bUnit component tests + Playwright smoke tests through a PR with Copilot code review. The deliverable is a deployable Halcyon.Adventure.SalesPortal running on top of the Halcyon.Adventure.Data library from Course 4.
Course Curriculum
7 Lessons
Blazor Server architecture and Copilot ergonomics in .razor
Teaching lesson on Blazor Server fundamentals for the Halcyon Sales Portal. Covers the four Blazor Web App render modes (Static SSR, InteractiveServer, InteractiveWebAssembly, InteractiveAuto) and when each earns its place; the SignalR circuit lifecycle (connection, state storage, resource cost); the component model + state management (parameters, cascading values, singleton services vs scoped circuit state); and how to ground GitHub Copilot on .razor-specific conventions so Copilot proposes InteractiveServer directives and QuickGrid patterns by default rather than client-side React-shaped reflexes.
Scaffold the Sales Portal shell with ASP.NET Core Identity sign-in
Note: This lab pre-provisions a Windows VM and the Halcyon.Adventure.SalesPortal starter files at start — allow up to 10 minutes for the environment to become ready before beginning the exercises.
Dana Reyes opens the Halcyon.Adventure.SalesPortal starter in VS 2026, signs into GHE + Copilot, and scaffolds the Blazor Web App shell with ASP.NET Core Identity (Individual Accounts, SQLite Identity DB) via the dotnet CLI. Students lay down the Halcyon-branded navigation + MainLayout via Copilot Edits, land the first authenticated-only /customers list page using the AuthorizeView component, add Dana + two seeded sales-rep accounts to the Identity DB, run the app under the Visual Studio HTTPS launch profile, and open the PR with a Copilot-generated title + description. Entra ID is deferred to a sidebar section — the plan is to overlay Pool 6 on this course only if customer demand surfaces (see docs/entra-sidebar.md in the starter).
Build the Customer 360 page with QuickGrid, server-side pagination, and caching
Note: This lab pre-provisions a Windows VM and the Halcyon.Adventure.SalesPortal starter files at start — allow up to 10 minutes for the environment to become ready before beginning the exercises.
Dana lands the Customer 360 page end-to-end — the primary surface sales reps use every day. Students scaffold a /customers list page with the Microsoft.AspNetCore.Components.QuickGrid component wired to Halcyon.Adventure.Data.AdventureWorksSalesContext.Customer, add server-side pagination via IQueryable<Customer>.Skip/Take, land a per-request Customer-summary cache using IMemoryCache keyed on StoreID, and open a Customer-detail page at /customers/ that shows the last 10 orders joined via the Lesson 4 N+1-fixed query. Each exercise ends with a running dotnet watch smoke test in the VM's browser before committing.
Add the Order detail + line-item editor with optimistic concurrency
Note: This lab pre-provisions a Windows VM and the Halcyon.Adventure.SalesPortal starter files at start — allow up to 10 minutes for the environment to become ready before beginning the exercises.
Dana adds the Order detail page that lets sales reps edit line items — the single page in the portal that writes to the database. Students scaffold the /orders/ route with an EditForm bound to SalesOrderHeader + SalesOrderDetail, land optimistic concurrency using the AdventureWorks rowversion token stored as a hidden EditForm field (409 on PUT if the token has moved since the GET), use Copilot Edits across OrderDetail.razor + OrderLineEditor.razor + the AdventureWorksSalesContext.Partial.cs to add a validation attribute on OrderQty, and smoke-test the concurrency path by opening two browser tabs that race the same save.
Blazor performance patterns under Copilot review
Teaching lesson on the Blazor Server performance patterns Copilot gets wrong without grounding — the prerender-vs-interactive boundary and the double-fetch anti-pattern it creates when a page carries @rendermode InteractiveServer with prerender: true and runs its data-fetching logic twice; the SignalR circuit lifecycle and what state survives (scoped services) vs what gets reset (singletons + static state) across circuit drops; the ShouldRender() + StateHasChanged() re-render triggers that cause runaway renders on bound inputs; and how to use Copilot's Review Selection on a slow page to surface the specific anti-pattern.
Scaffold the Sales rep performance dashboard with Copilot Agent mode
Note: This lab pre-provisions a Windows VM and the Halcyon.Adventure.SalesPortal starter files at start — allow up to 10 minutes for the environment to become ready before beginning the exercises.
Christopher Jones wants Dana to add a Sales rep performance dashboard — orders-per-rep + revenue-per-rep + a drill-down to each rep's current customers. Students install MudBlazor via dotnet add package MudBlazor + register the services in Program.cs, use Copilot Agent mode to scaffold the dashboard page end-to-end from a single prompt (MudBlazor chart components + a parameterized LINQ query against Sales.SalesOrderHeader + a drill-down modal), add CSV export via ClosedXML, and verify the dashboard renders without the Blazor-perf anti-patterns Lesson 5 covered (correct render mode, no double-fetch, no runaway renders).
Ship it — bUnit component tests, Playwright smoke tests, PR with Copilot review
Note: This lab pre-provisions a Windows VM and the Halcyon.Adventure.SalesPortal starter files at start — allow up to 10 minutes for the environment to become ready before beginning the exercises.
Dana ships the Sales Portal through the standard Halcyon PR flow. Students scaffold a bUnit component-test project via Copilot Agent mode that tests the Customer 360 list rendering, the Order editor's optimistic concurrency conflict path, and the dashboard's chart data binding; add Playwright smoke tests that drive the authenticated sign-in + Customer 360 nav + a successful order save; request Copilot's PR-time code review via Visual Studio's Git Changes, triage the review comments against a Halcyon reviewer checklist, self-approve the merge once all comments resolve, and merge the squash-PR via gh pr merge --squash --delete-branch per Halcyon convention.