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.
-
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 - MySolution.Module.Blazor/Editors/ButtonRenderer.razor
-
Ensure that the component's Build Action property is set to Content.
-
Create a ComponentModelBase descendant and name it ButtonModel. In this class, add properties and methods that describe your component.
Component Model - MySolution.Module.Blazor/Editors/ButtonModel.cs
-
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.
-
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.
-
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).
-
Override the BreakLinksToControls method. In this method, unsubscribe from the component model’s Click event to release resources.
Custom View Item - MySolution.Module.Blazor/Editors/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.
XAF - Add a Custom Button to a Form (WinForms and ASP.NET WebForms)