Blazor: Razor component inherited parameter of base class not set

Question

I've got a problem with one of my razor component libraries.

I've got an abstract base class RazorHtmlComponent for my components with a parameter property [Parameter] public string InlineClass { get; set; } which shall be used for css classes to be mapped to the actual component. Then I've got another base class per component containing the component specific properties which is definined like this: abstract class BaseRazorButton: RazorHtmlComponent

My component, in this example RazorButton.razor inherits from the abstract button base class BaseRazorButton.

The problem is, when I instantiate a razor button, and I set the property InlineClass to any value, it stays null within my actual RazorButton instance.

Here's a minimal code example for better understanding:

Base class:

public abstract class RazorHtmlComponent : ComponentBase, IRazorHtmlComponent
{
  [Parameter] public string InlineClass { get; set; }

  public DomDefinitionMapper ClassMapper { get; }

  ...

  protected RazorHtmlComponent()
  {
    ClassMapper = new DomDefinitionMapper(InlineClass);
  }

Dom definition mapper:

  public class DomDefinitionMapper
  {
    public List<Func<string>> DefinitionRepository { get; } = new List<Func<string>>();

    public DomDefinitionMapper(string definition = "")
    {
      if (!string.IsNullOrEmpty(definition))
      {
        DefinitionRepository.Add(() => definition);
      }
    }

    public string GetDefinitions(char separator = default)
      => separator.Equals(default) ? 
          string.Join(" ", DefinitionRepository.Select(i => i()).Where(i => i != null)) 
        : string.Join($" {separator}", DefinitionRepository.Select(i => i()).Where(i => i != null));
  }

Button base class:

public abstract class BaseRazorButton: RazorHtmlComponent
{
  ...
}

Razor button component:

@inherits BaseRazorButton

<button class="@ClassMapper.GetDefinitions()">
  @Text
</button>

Instantiation of a Razor button:

<RazorButton InlineClass="page" 
             Text="1"/>

When I inspect within in the browse, the class "page" defined within using the InlineClass parameter is not set. In debug mode, the ClassMapper DefinitionRepository does not contain the class.

Am I missing something? I just don't understand why it doesn't work :/

agua from mars · Accepted Answer · 2020-02-17 10:52:26Z

4

If you call that in the construtor :

[Parameter] public string InlineClass { get; set; }
...
protected RazorHtmlComponent()
{
    ClassMapper = new DomDefinitionMapper(InlineClass);
}

The parameter is not yet set. It'll be when OnInitialized or OnInitializedAsync is called.
And your RazorHtmlComponent must derived from ComponentBase

public abstract class RazorHtmlComponent : ComponentBase, IRazorHtmlComponent
{
  [Parameter] public string InlineClass { get; set; }

  public DomDefinitionMapper ClassMapper { get; }

  ...

  protected override void OnInitialized()
  {
    ClassMapper = new DomDefinitionMapper(InlineClass);
  }

answered Feb 17, 2020 at 10:52

agua from mars

17.5k5 gold badges71 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

epanalepsis Over a year ago

It is derived from ComponentBase, forgot that within my post, sorry, I'll readd it. So should I initialize the ClassMapper OnInitialized / OnInitializedAsync? Ill try it :)

agua from mars Over a year ago

OnInitialized because you do not called an async code.

epanalepsis Over a year ago

Got it working now ... by adding the ClassMapper.Add(InlineClass) within the OnInitialized thank you very much!

Collectives™ on Stack Overflow

Blazor: Razor component inherited parameter of base class not set

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related