All docs
V20.2
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.

Extract Razor Component

  • 2 minutes to read

Purpose

Extracts the selected HTML markup to a new Razor component (Component.razor) file and adds this file to the Components project folder. You can then reuse and share the newly added Razor component among other projects.

Availability

Available when you select HTML markup in a .razor file.

IMPORTANT

This code provider is unable to extract code from the @code section. It also does not extract code dependencies for HTML markup variables and events (for example, @onclick). You need to add corresponding dependencies to the component's @code section after extraction to avoid errors.

How to Use

  1. Select the HTML markup you want to extract.

  2. Use the Ctrl + . or Ctrl + ~ shortcut to invoke the Code Actions menu.

  3. Choose Extract Razor Component from the menu.

    Invoke Extract Razor Component

After execution, the "Extract Razor Component" code provider creates the Component.razor file with extracted HTML markup and places this file in the Components project folder. Then, you can modify the suggested component name in the original .razor file.

Extract Razor Component

CodeRush opens the newly created Component.razor file after code extraction. If you prefer to keep the original .razor file open, disable the "Activate a new file when it's created by refactorings (Move Type to File, Declare Class, etc.)" option on the Editor | C# | Code Actions | Code Action Settings options page. Refer to the following help topic for more information: Code Actions Settings.

This code provider also adds new Blazor using statements to the _Imports.razor file. If you want to add Blazor usings to the original .razor file, disable "Generate new Blazor usings in the _Imports.razor file" on the Editor | C# | Programming Style options page.

Usings

The following image shows "@using BlazorApp.Components" added inside the NavMenu.razor file:

Usings