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

• Jun 20, 2025
• 3 minutes to read

This article explains how to create a reusable View Item that uses data from the View’s current object. Before starting, review the Read Tutorial: How to: Show a Custom Data-Bound Control in an XAF View (Blazor) - External Data tutorial on the basic steps.

Create a Razor Component

In this example, you create a Razor component based on DxAccordion. The new component displays employees assigned to a particular department.

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

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

2. Specify a component name (DepartmentViewer.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.

Change the Default Detail View for the Department List 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… | DetailView.

2. Set the Id property to CustomDepartment_DetailView and the ModelClass property to MainDemo.Module.BusinessObjects.Department.

3. Right-click the Views | MainDemo.Module.BusinessObjects | Department | CustomDepartment_DetailView | Items node and choose Add… | ControlDetailItem.

4. Set the Id property to DepartmentViewItem and the IModelControlDetailItem.ControlTypeName property to the type of the Razor Component you created (for example, MainDemo.Blazor.Server.DepartmentViewer).

5. Navigate to the Views | MainDemo.Module.BusinessObjects | Department | Department_ListView node. In the DetailView drop-down list, select CustomDepartment_DetailView.

6. Run your Blazor application, navigate to the Department List View, open any Detail View, and see the result.