All docs
V21.1
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Common Blazor Templates

  • 2 minutes to read

This topic describes templates for Blazor that you can expand in .razor markup.

For example, you can type bht and press Tab (or Space, depending on your settings) to create a Blazor component with an HTTP call.

Expand bht template

The LifeCycle Methods section lists templates that you can expand in the @code section inside .razor files.

Components

Template Description
bch Creates a child component with a parameter.
bcmp Creates a blank component.
bht Creates a component with an HTTP call.
cv Creates a <CascadingValue> component.
dav Creates a <DataAnnotationsValidator> component.
ef Creates an <EditForm> component.

Input

Template Description
icb Creates an <InputCheckbox> component.
idt Creates an <InputDate> component.
in Creates an <InputNumber> component.
it Creates an <InputText> component.
ita Creates an <InputTextArea> component.
isel Creates an <InputSelect> component.

Blazor Directives

Template Description
ba, battr Creates an @attribute directive.
bc, bcode Creates a Blazor @code block.
bf, bfunc Creates a Blazor @functions block.
bh Creates an @inherits directive.
bj Creates an @inject directive.
bjc Creates an @inject IConfiguration configuration.
bjh Creates an @inject HttpClient Http.
bl Creates a @layout directive.
bm Creates a @model directive.
bp Creates a @page “/“ with a route.

Conditionals and Control Statements

Template Description
do, dw Creates a @do (do/while) control statement.
fe Creates a @foreach control statement.
for, fri, frj Creates a @for control statement.
if Creates an @if conditional.
ife, ifl Creates an @if @else conditional.
sw Creates a @switch conditional.
tc Creates a @try/catch block.
tcf Creates a @try/catch/finally block.
tf Creates a @try/finally block.
u Creates a @using statement.
wh, while Creates a @while control statement.

Lifecycle Methods

The following lifecycle method overrides work inside the @code section of .razor files:

Template Description
oar Creates an OnAfterRenderAsync override.
oar, Creates an OnAfterRender synchronous override.
oi Creates an OnInitializedAsync override.
oi, Creates an OnInitialized synchronous override.
onch Creates an OnChangeAsync override.
onch, Creates an OnChange synchronous override.
ops Creates an OnParametersSetAsync override.
ops, Creates an OnParametersSet synchronous override.
sr, sr, Creates a ShouldRender override.

Note: A comma at the end of a lifecycle method override template generates a synchronous version of the event.