Replace two Razor components of almost same functionality and different services with one component in @Blazor

Pavan Sista 0
Viewed 27

I have two Razor components, AreaLightRebates and DuskToDawnRebates which are pretty similar in functionality. But, since services and models are different, I had to create two almost identical razor components which is a burden as I have to duplicate changes in both the pages everytime.

Wondering, if a single razor component can be used while injecting the models and services dynamically.

AreaLightRebates.razor snippet..

 public partial class AreaLightRebates
    {
        [Inject]
        AreaLightRebatesService rebateService { get; set; }
        [Inject]
        AreaLightTypeService rateService { get; set; }
        [Inject]
        AreaLightTypeService lightTypeService { get; set; }
        [Inject]
        PoleTypeService poleTypeService { get; set; }
      
        [Inject]
        TaxRateService taxService { get; set; }
        [Inject]
        InterestRateService interestService { get; set; }
        [Inject]
        IJSRuntime jSRuntime { get; set; }
        private List<AreaLightRebate> lightRebates;
        public string selectedItemPlaceholder;

DuskToDawnRebates.razor snippet..

   public partial class DuskToDawnRebates
    {
      
        [Inject]
        DuskToDawnRebateService rebateService { get; set; }
        [Inject]
        DuskToDawnRatesService rateService { get; set; }
      
        [Inject]
        DtdLightTypeService dtdTypeService { get; set; }
        [Inject]
        PoleTypeService poleTypeService { get; set; }
        [Inject]
        TaxRateService taxService { get; set; }
        [Inject]
        InterestRateService interestService { get; set; }

        private List<DuskToDawnLightRebate> dtdRebates;
        private string selectedItemPlaceholder;
        private List<DdlModel> dtdTypesDdl;

As you can see from above, the injected services are different but code after OnInitializedAsync is same for both the razor components respectively. Is it possible to have one page for both the rebates while injecting the services as per the Rebate Type?

razor blazor-server-side .net-core asp.net-mvc c#
2 Answers

Why not make the component generic over the service type? That way your injected service would be of type TService (or whatever you call it), and the Blazor component that houses the generic component could specify the service type.

I haven't tried this specific scenario, but I've done plenty of generic Blazor components, and don't see why this wouldn't work.

Try it and see. If you can't get it to work, post what you've tried and I'll take a look.

Avrohom Yisroel0

From the code you've shown all I can see to do is create a base abstract class and then inherit from it. Anything else depends on whether the different services can be defined by a common interface?

public class Rebates : ComponentBase
{
    public string? selectedItemPlaceholder;
    
    [Inject] public PoleTypeService poleTypeService { get; set; }
    [Inject] public TaxRateService taxService { get; set; }
    [Inject] public InterestRateService interestService { get; set; }

   // any shared methods
}

   public partial class DuskToDawnRebates : Rebates
    {
MrC aka Shaun Curtis0
Related