Roadmap › 1. .NET › Step 24
UI
Custom Controls & Reusable UI Components in .NET — Web Forms to Blazor
Building reusable UI in every .NET UI technology — Web Forms user controls and custom server controls (Control, WebControl, CompositeControl, rendering, ViewState-backed properties, events, postback data, templated controls, design-time attributes), MVC 5 custom HTML helpers, display/editor templates and child actions, ASP.NET Core partial views, custom tag helpers, view components and Razor Class Libraries, Blazor components (parameters, EventCallback, RenderFragment, cascading values, generic components) and WinForms/WPF custom controls.
What it is & where it is used
A custom control/component packages markup + behaviour so it can be reused across pages or applications: a date picker, an address editor, a paged grid, a price label that formats currency, a "cart summary" widget.
| Technology | Reuse options (simple → powerful) |
|---|---|
| ASP.NET Web Forms | User control (.ascx) → custom server control (class, compiled DLL) → composite/templated control |
| ASP.NET MVC 5 | Partial view → display/editor template → custom HTML helper → child action |
| ASP.NET Core MVC/Razor Pages | Partial view → tag helper → view component → Razor Class Library (package for many apps) |
| Blazor | Razor component (.razor) with parameters, events, child content; component libraries |
| WinForms / WPF | UserControl → derived control → owner-drawn/custom control with templates (WPF) |
Interview focus: the difference between user controls and custom controls, tag helpers vs HTML helpers, view components vs partial views, and how state/events work in components.
Versions & history
| Year | Milestone |
|---|---|
| 2002 | Web Forms server controls, user controls, Control/WebControl base classes; WinForms UserControl |
| 2005 | ASP.NET 2.0 CompositeControl, control state, adaptive rendering; WPF in 2006 (templated controls) |
| 2009–2011 | MVC HTML helpers, Razor (2011), display/editor templates |
| 2016 | ASP.NET Core tag helpers and view components |
| 2018–2019 | Razor Class Libraries (Core 2.1), Blazor (3.0) components |
| 2023–2025 | .NET 8 Blazor Web App (static SSR + interactive render modes), QuickGrid; component libraries (MudBlazor, Radzen, Telerik, Syncfusion) |
Lifecycle
How a reusable component is designed:
- Identify repetition — same markup/logic on 3+ pages.
- Define the API — inputs (properties/parameters/attributes), outputs (events/callbacks), slots (child content/templates).
- Encapsulate markup, styling and behaviour; avoid reaching into the page.
- Handle state — Web Forms: ViewState/ControlState; Blazor: component fields + parameters; MVC/Core: stateless per request.
- Package — same project, shared class library, Razor Class Library or NuGet package.
- Document and test — examples, unit tests (bUnit for Blazor), accessibility checks.
Tools used to develop
- Visual Studio designers and Toolbox (Web Forms/WinForms),
[ToolboxData],[Designer]attributes. - Razor Class Library template (
dotnet new razorclasslib), NuGet packaging. - bUnit for testing Blazor components; Playwright for UI tests.
- Component libraries for reference: Telerik/DevExpress (Web Forms), MudBlazor/Radzen/FluentUI Blazor (Blazor).