Be more productive on Blazor with CodeRush

Don Wibier's Blog
13 October 2020

Did you know CodeRush already has some really cool features to make you even more productive in Blazor?

The last few CodeRush sprints have added several features. I thought it might be a good idea to summarize all of these in a single blogpost as reference material.

Lifecycle Methods

You may have noticed the Visual Studio Editor has some issues with overriding members and code completion inside @code sections in Blazor files.

For example, this happens when you try to override one of the lifecycle methods like OnInitialized(Async) or OnParametersSet(Async) etc.

Fortunately, CodeRush already has code templates to help take away those frustrations.
Just move the caret to the @code section and type one of the templates below (followed by a Tab or Space, depending on your template expansion settings):

TemplateDescription
oar Creates an OnAfterRenderAsync override.
oi Creates an OnInitializedAsync override.
onch Creates an OnChangeAsync override.
ops Creates an OnParametersSetAsync override.
sr Creates a ShouldRender override.

If you want to override one of the synchronous equivalents, just expand the same template followed by a comma. For example, “oi,” generates a synchronous OnInitialized method.

Component Creation

Some other useful templates for creating components including dependency injection, parameters and cascading values, which will save you a boatload of keystrokes include:

TemplateDescription
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.
en Creates an <EditForm> component.


These templates all work in the markup sections of razor files.

Input Control Creation

For creating standard html input controls, you can use the following templates:

TemplateDescription
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

To quickly add a directive above your Blazor component, you can use the following templates:

TemplateDescription
ba Creates an @attribute directive.
bc Creates a Blazor @code block.
bf Creates a Blazor @functions block.
bh Creates an @inherits directive.
bj Creates an @inject directive.
bjc Creates an @inject IConfiguration configuration directive.
bjh Creates an @inject HttpClient Http directive.
bl Creates a @layout directive.
bm Creates a @model directive.
bp Creates a @page "/" directive.

Blazor Markup Templates for Conditionals and Controls

One of the beautiful things about Razor is that you can put conditional logic inside your markup.
CodeRush offers the following templates to help control program flow:

TemplateDescription
do, dw Creates a @do (do/while) control statement.
fe Creates a @foreach control statement.
for, fri, frj Creates @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.

Blazor Refactoring

One of the other great things in CodeRush is its refactoring power, which is based on the Roslyn engine.

For Blazor there are some awesome refactorings which can help save you a lot of work.

Move to Code Behind

Suppose you are building a Blazor Component, adding features and functionality. Over time you realize the @code section is growing in size. There comes to be a point where it makes a lot of sense to put all that code in a separate C# class.

With CodeRush, this can be done in seconds! Just navigate to the @code section.

Activate the CodeRush Action Menu by pressing Ctrl + ` or Ctrl + . (depending on your configuration) and select “Move to Code Behind”.

CodeRush creates a new code-behind file (if it doesn’t already exist), including the partial class. It will then move code from the razor page right into the partial class, including attributes, comments and references.

Extract Razor Component

Another powerful refactoring, Extract Razor Component, allows you to extract the currently selected markup and create a component from it. CodeRush will ask for a new component name inside the original code, and next it will put the extracted code in a new razor file in the ~/Components folder of your project.

Let me know how this works for you!

If you find this post has helped you be more productive by using these features, please let me know by replying to this post below. More importantly, if you have any ideas or tips on how we can improve CodeRush to become even more productive in Blazor, reply as well.

Download CodeRush Today!

Check out CodeRush and discover how to become more productive with your Blazor development!

Get it at https://devexpress.com/coderush or at the Visual Studio Gallery.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
No Comments

Please login or register to post comments.