Components

This article shows how to work with Blazor components in Radzen Blazor for Visual Studio.

Add a component

To add a toolbox item to your .razor file perform the following steps:

1. Open a .razor file by double clicking it in Solution Explorer.
2. Go to View → Radzen Blazor for Visual Studio → Toolbox in the Visual Studio top menu.
3. Find the desired component. You can switch between Advanced mode (listing all components available for the current application) and Simple mode (showing only the Radzen.Blazor components grouped by category).
4. Drag and drop the component in the opened .razor file.

Select

You can select a component in one of the following ways:

• By clicking it in the design canvas.
• From the Outline
• You can also select the parent or first child of the selected component.

You can select multiple components by holding CTRL while clicking components in the design canvas or in the outline.

You can also select a range of components by selecting one component and then selecting another while pressing SHIFT.

Move

To move components:

1. Select one or more components.
2. Drag the move handle to the desired location.
3. Release the mouse button to complete.

Cut, copy and paste

You can cut, copy and paste components by selecting them and pressing CTRL+X</kbd>, CTRL+C, CTRL+V You can also use the component context menu or the "..." button in the component toolbar.

Delete

You can delete component by selecting it first and then clicking the Delete button from the toolbar “…” menu. You can also use the context menu or backspace.

Set properties

After selecting a Blazor component you will see all of its parameters (properties that are decorated with the [Parameter] attribute) in the property grid.

Use the property grid to set the desired property value. Do not add quotes (") for string values - Radzen Blazor for Visual Studio will add them for you.

You can also click the gear icon which will open the Expression editor. You can pick an existing page property or field.

Radzen Blazor For Visual Studio uses @bind- syntax by default for properties that support two-way data-binding (e.g. Value property and ValueChanged event). You can use the <–> button to change that e.g. from @bind-Value="value" to Value="value".

Attributes

Radzen Blazor for Visual Studio allows you to set custom attributes of HTML elements or Blazor components that support that (have a property decorated with [Parameter(CaptureUnmatchedValues = true)]).

To add a custom attribute to a Blazor component click the + button next to the Custom attributes label. Pick a name for the attribute and type its value.

CSS style

The Styles tab of the property grid allows you to customize the appearance of the selected Blazor component or HTML element. Radzen Blazor For Visual Studio generates a style attribute when you change any of the style attributes.

Events

You can handle Blazor component events from the Events tab of the property grid. Click the + next to the event name. Radzen Blazor For Visual Studio will open a dialog asking you to enter a name for the event handler method (a default name would be suggested). After that it will open the newly created method in design mode and allow you to add statements to it.

Templates

Radzen Blazor For Visual Studio has a special design time mode for template properties (properties of type RenderFragment or RenderFragment<T>). Click the pencil icon and Radzen Blazor Studio will switch to template edit mode. Dragging and dropping components will add them inside the template property tag. If you open the Expression editor you can access template context properties via the context parameter. Press the Done button when you have finished editing the template.

Text

Radzen Blazor For Visual Studio includes a special Text component which allows you to set the text content of a HTML element, Blazor component or use text without an HTML element whatsoever. To set the content of a Text component simply select it in the designer and update its Value property from the property grid.

Note: Adding a Text item before or after an existing Text item will merge them together.

Expression

The Expression component is another Radzen Blazor For Visual Studio toolbox item which allows you to display C# values e.g. @counter.