Inherit a Blazor component to a MudBlazor component

Viewed 173

I need to create a new table component to reuse it on my application pages and I want to use MudTable from MudBlazor (With Typescript and React, I can do it).

I'm trying to inherit the MudTable from MudBlazor to my Table component class:

Table.razor

@typeparam T
@inherits MudTable<T>

<div class="table-component">
    <MudTable
        T="@T"
    >

    </MudTable>
</div>

Table.razor.cs

using Microsoft.AspNetCore.Components;
using MudBlazor;

namespace ticketsapp.Components.Table
{
    public partial class Table<T>: MudTable<T>
    {
    }
}

And I add Attributes param to fill MudTable missing attributes

Table.razor.cs

using Microsoft.AspNetCore.Components;
using MudBlazor;

namespace ticketsapp.Components.Table
{
    public partial class Table<T>: MudTable<T>
    {
        #region "PARAMETERS"

        [Parameter(CaptureUnmatchedValues = true)]
        public Dictionary<string, object> Attributes { get; set; }

        #endregion

        #region "FUNCTIONS"

        #endregion
    }
}

Table.razor

@typeparam T
@inherits MudTable<T>

<div class="table-component">
    <MudTable
        T="@T"
        @attributes="@Attributes"
    >

    </MudTable>
</div>

But when I compile I see navigator console a message:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Multiple properties were found on component type 'ticketsapp.Components.Table.Table1[[ticketsapp.Models.Ticket, ticketsapp, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]' with 'ParameterAttribute.CaptureUnmatchedValues'. Only a single property per type can use 'ParameterAttribute.CaptureUnmatchedValues'. Properties: Attributes UserAttributes System.InvalidOperationException: Multiple properties were found on component type 'ticketsapp.Components.Table.Table1[[ticketsapp.Models.Ticket, ticketsapp, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]' with 'ParameterAttribute.CaptureUnmatchedValues'. Only a single property per type can use 'ParameterAttribute.CaptureUnmatchedValues'. Properties: Attributes UserAttributes at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForMultipleCaptureUnmatchedValuesParameters(Type targetType) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.WritersForType..ctor(Type targetType) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target) at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target) at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

I'm new in blazor and I don't know if exists another correct way to do it this.

1 Answers

MudTable already has a property called UserAttributes with [Parameter(CaptureUnmatchedValues = true)] attribute. Your component inherits from MudTable so you can't declare a second property with this attribute. You can simply use the property from base class.

@typeparam T
@inherits MudTable<T>

<div class="table-component">
    <MudTable
        T="@T"
        @attributes="@base.UserAttributes"
    >

    </MudTable>
</div>
Related