I’m working on a project in Blazor and I have multiple C# base classes that inherit each other. My project is basically a digital application that the user progresses through, each page having them fill out a “page” of their application with additional information.

My classes include EnrollmentPage.cs, ApplicationPage.cs, and CalculatorBase.cs.

• EnrollmentPage.cs is the overall base class that has all the services used on every page. Things like accessing the db, retrieving site settings, etc.
• ApplicationPage.cs inherits EnrollmentPage.cs and fetches more specific data such as a users application and personal info for use on each page of the application.
• CalculatorBase.cs inherits ApplicationPage.cs and contains methods for calculating the cost an applicant will pay based on their selections and info. CalculatorBase is only inherited by a few specific components for the purpose of calculating their cost.

One parameter of the ApplicationPage is Id as seen below:

public class ApplicationPage : EnrollmentPage
{
    [Parameter]
    public string Id { get; set; }

    // rest of class...
}

The Id can be set to “Employee” or “Spouse” and is used to dynamically show different things on the page based on the user’s identity. The parameter is set within the page navigation of each razor component like so: @page "/company/{SettingId}/{Id}/RateCalculator". So, when the user navigates to the page “www.website.com/company/0/Employee/RateCalculator” DependentId gets set to “Employee”.

So my issue comes up within the components that inherit the CalculatorBase.cs class. These components are used on the RateCalculator page like this:

@page "/company/{SettingId}/{DependentId}/RateCalculator"
@inherits Classes.CalculatorBase

<PageTitle>Rate Calculator</PageTitle>

<div>
    <CalcComponent />

    // rest of page...
</div>

And this is the component:

@* Calc Component *@
@inherits Classes.CalculatorBase

<div>
    content
</div>

@code {
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }
}

As you can see, ApplicationPage must be initialized in order for CalculatorBase to initialize and since CalculatorBase is inherited by both the page and the nested component, ApplicationPage is actually being initialized twice. My issue lies in the second initialization of the ApplicationPage occurring in the component.

The actual RateCalculator.razor page loads just fine and the CalculatorBase class initializes without issue indicating that the Id is not null which I have confirmed through debugging. However, the component never initializes. When CalculatorBase attempts to initialize and use the Id from ApplicationPage, it is null. I’m not sure why the component is not retrieving the Id correctly. For some reason this “second version” of ApplicationPage within the component is not getting the parameter.

I have other components that also require use of the CalculatorBase class on this page so explicitly defining the functionality within the component is not an option. Should I not inherit the CalculatorBase class within the component but instead create an instance of it? I’m not sure what else could possibly work to resolve this issue.