Custom Controls & Reusable UI Components in .NET — Web Forms to Blazor Cheat Sheet

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.

Pick the right reuse tool

Web Forms: user control (one app) → custom/composite control (many apps) · MVC 5: partial/display template → HTML helper → child action · Core: partial → tag helper → view component → Razor Class Library · Blazor: component (+ library) · WinForms/WPF: UserControl → custom control.

Web Forms control essentials

WebControl + RenderContents · ViewState-backed properties · CompositeControl.CreateChildControls + INamingContainer · events · ControlState · [ToolboxData].

Core essentials

Tag helper: [HtmlTargetElement], Process(Async), @addTagHelper · View component: InvokeAsync, Views/Shared/Components/Name/Default.cshtml, <vc:name>.

Blazor essentials

[Parameter] · EventCallback · RenderFragment / RenderFragment<T> · @typeparam · @bind-Value = Value + ValueChanged · CascadingValue · lifecycle methods · @key · Virtualize.

Good component rules

Small API · data in, events out · encode output · accessible · styleable · tested · versioned.