BuyLog In
Example T1017666
Visible to All Users

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

Documentation

More Examples

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

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

EFCore/CustomViewItem/CustomViewItem.Blazor.Server/Editors/ButtonViewItem/ButtonRenderer.razor 
Razor
@using DevExpress.Blazor
@namespace MySolution.Module.Blazor

<DxButton Text=@ComponentModel.Text Click=@(() => ComponentModel.ClickFromUI()) />

@code {
    [Parameter]
    public ButtonModel ComponentModel { get; set; }
    public static RenderFragment Create(ButtonModel componentModel) =>
        @<ButtonRenderer ComponentModel=@componentModel />;
}
EFCore/CustomViewItem/CustomViewItem.Blazor.Server/Editors/ButtonViewItem/ButtonModel.cs 
C#
using System;
using DevExpress.ExpressApp.Blazor.Components.Models;

namespace MySolution.Module.Blazor {
    public class ButtonModel : ComponentModelBase {
        public string Text {
            get => GetPropertyValue<string>();
            set => SetPropertyValue(value);
        }
        public void ClickFromUI() {
            Click?.Invoke(this, EventArgs.Empty);
        }
        public event EventHandler Click;
    }
}
EFCore/CustomViewItem/CustomViewItem.Blazor.Server/Editors/ButtonViewItem/ButtonDetailViewItemBlazor.cs 
C#
using System;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using Microsoft.AspNetCore.Components;

using DevExpress.ExpressApp.Blazor.Components;

namespace MySolution.Module.Blazor {
    public interface IModelButtonDetailViewItemBlazor : IModelViewItem { }

    [ViewItem(typeof(IModelButtonDetailViewItemBlazor))]
    public class ButtonDetailViewItemBlazor : ViewItem, IComplexViewItem {
        public class ButtonHolder : IComponentContentHolder {
            public ButtonHolder(ButtonModel componentModel) {
                ComponentModel = componentModel;
            }
            public ButtonModel ComponentModel { get; }
            RenderFragment IComponentContentHolder.ComponentContent => ComponentModelObserver.Create(ComponentModel, ButtonRenderer.Create(ComponentModel));
        }
        private XafApplication application;
        public ButtonDetailViewItemBlazor(IModelViewItem model, Type objectType) : base(objectType, model.Id) { }
        void IComplexViewItem.Setup(IObjectSpace objectSpace, XafApplication application) {
            this.application = application;
        }
        protected override object CreateControlCore() => new ButtonHolder(new ButtonModel());
        protected override void OnControlCreated() {
            if (Control is ButtonHolder holder) {
                holder.ComponentModel.Text = "Click me!";
                holder.ComponentModel.Click += ComponentModel_Click;
            }
            base.OnControlCreated();
        }
        public override void BreakLinksToControl(bool unwireEventsOnly) {
            if (Control is ButtonHolder holder) {
                holder.ComponentModel.Click -= ComponentModel_Click;
            }
            base.BreakLinksToControl(unwireEventsOnly);
        }
        private void ComponentModel_Click(object sender, EventArgs e) {
            application.ShowViewStrategy.ShowMessage("Action is executed!");
        }
    }
}

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.