How to: Show a Custom Data-Bound Control in an XAF View (Blazor) - External Data

• Jul 09, 2025
• 3 minutes to read

This topic demonstrates how to add a custom data-bound (data-aware) control to a View in a Blazor application. It also explains how to extend app navigation and add a navigation item to the new View.

This topic is based on the MainDemo Blazor Server demo application that ships with XAF. You can find this demo in the following folder: %PUBLIC%\Documents\DevExpress Demos 25.2\Components\XAF\MainDemo.NET.EFCore\CS\MainDemo.Blazor.Server.

Create a Razor Component

Blazor apps are built using Razor components. In this example, we implement a custom Razor component based on a DxChart control that displays a graph of incomplete tasks.

Note

Use the built-in DevExpress.ExpressApp.Blazor.Editors.DxChartListEditor to display charts in your applications. This article only uses DxChart as an example.

To add this component to your project, follow the steps below:

1. In the Solution Explorer , right-click your Blazor project’s name and select Add | New Item from the ensuing context menu.

2. Specify a component name (TaskChartComponent.razor).

3. Add the following code to the created file.

4. In the Properties window, set this file’s Build Action to Content.

5. Rebuild your solution.

The component in this example uses the CascadingParameter of DevExpress.ExpressApp.Blazor.Editors.BlazorControlViewItem to access an ObjectSpace instance. It uses the Object Space API to read the required data and then initialize the data source or refresh the data if necessary.

Add the Control to a View

1. In the Blazor application project, double-click the Model.xafml file to start the Model Editor. Right-click the Views node and choose Add… | DashboardView.

2. Set the Id property to TaskChartView.

3. Right-click the Views | Unspecified | TaskChartView | Items node and choose Add… | ControlDetailItem.

4. Set the Id property to TaskChartView, and the IModelControlDetailItem.ControlTypeName property - to the type of the custom User Control you created (e.g., MainDemo.Blazor.Server.TaskChartComponent).

Note

You can add the ControlViewItem View Item to any existing Detail View or Dashboard View instead of creating a new Dashboard View.

Create a Navigation Item to Show the View

1. Navigate to the NavigationItems | Items | Default | Items node. Right-click the Items node and select Add… | NavigationItem from the invoked context menu.

2. For the newly added node, in the IModelNavigationItem.View dropdown list, select the View you created earlier (TaskChartView).

3. Run your Blazor application and click TaskChartView in the navigation tree. The Chart View bound to the DemoTask collection is displayed.