XAF Blazor - Use a Custom View Item to Add a Button to a Detail View

This example shows how to add a custom component to a Detail View. We add a button to a Detail View and display a message when a user clicks the button.

Implementation Details

1. In the ASP.NET Core Blazor Module project, create a new Razor component and name it ButtonRenderer. In this component, configure the DxButton component, add the Create method that creates RenderFragment, and handle the Click event.

   Razor Component - CustomViewItem.Blazor.Server/Editors/ButtonViewItem/ButtonRenderer.razor

2. Ensure that the component's Build Action property is set to Content.

3. Create a ComponentModelBase descendant and name it ButtonModel. In this class, add properties and methods that describe your component.

   Component Model - CustomViewItem.Blazor.Server/Editors/ButtonViewItem/ButtonRenderer.razor

4. In the ASP.NET Core Blazor Module project, create the ButtonDetailViewItemBlazor View Item and decorate it with the ViewItemAttribute to make this View Item appear in the Application Model's ViewItems node.

5. Override the CreateControlsCore method to get a ButtonHolder instance. ButtonHolder returns a render fragment with our custom component. Note that in the XAF Blazor application, CreateControlsCore should return an instance that implements the IComponentContentHolder interface.

6. Override the OnControlsCreated method. In this method, subscribe to the component model’s Click event. Implement the logic in the ComponentModel_Click event handler (in our example, the ShowMessage is called).

7. Override the BreakLinksToControls method. In this method, unsubscribe from the component model’s Click event to release resources.

   Custom View Item - CustomViewItem.Blazor.Server/Editors/ButtonViewItem/ButtonDetailViewItemBlazor.cs.

See the following help topic for more information: How to: Use a Custom View Item to Add a Button to a Detail View.

Files to Look at

• ButtonRenderer.razor
• ButtonModel.cs
• ButtonDetailViewItemBlazor.cs

Documentation

• Using a Custom Control that is not Integrated by Default
• How to: Implement a View Item

More Examples

XAF - Add a Custom Button to a Form (WinForms and ASP.NET WebForms)