CODEWITHSUNDEEP
c#razorblazor
jt5301
jt5301

Reputation: 43

Is there a way for an array to hold blazor components?

I currently have a razor file set up that looks like the following:

 @switch (currentStep)
        {
            case 0:
                <Component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
                break;
            case 1:
                <Component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward" />
                break;
            case 2:
                <Component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"/>
                break;
            case 3:
                <Component3/>
                break;
            default:
                <p>Some error message</p>
                break;
        }
        </div>`
    @code {
        private int currentStep = 0;
        private void MoveForward()
        {
            if (currentStep < 3) currentStep += 1;
        }
        private void MoveBackward()
        {
            if (currentStep > 0) currentStep -= 1;
        }
    }

Where I am increasing "currentStep" inside each of the components using moveforward / movebackwards as callbacks to display the next component. I was wondering, instead of an switch statement, could I create an array that just has all the components inside, and then call the array? something like the below?

    <@steps[currentStep]>
@code{
    private __[] steps = new String[]
    {
        <component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component4 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
    }
}

I'm just not sure what kind of type the array should have if this might be possible, and how to create that type.

Any help would be much appreciated thank you!

Upvotes: 1

Views: 1082

Answers (1)

Mister Magoo
Mister Magoo

Reputation: 8974

An alternative take on this is to store the component markup in an array of RenderFragment, just slightly different from your idea:

@steps[currentStep] 

@code{
  private RenderFragment[] steps;
  private int currentStep = 0;

  protected override void OnInitialized()
  {
    steps = new RenderFragment[4];
    steps[0] = @<component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[1] = @<component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[2] = @<component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[3] = @<component4 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
  }

  private void MoveForward()
  {
    if (currentStep < 3) currentStep += 1;
  }

  private void MoveBackward()
  {
    if (currentStep > 0) currentStep -= 1;
  }
}

Sample: https://blazorrepl.com/repl/wvuoOtYb026k7nQj39

Upvotes: 2

Related Questions