CODEWITHSUNDEEP
c#blazorblazor-server-side
Tyler Foraie
Tyler Foraie

Reputation: 84

What is the best way to display conditional content in Blazor Components

Im not much of a web developer but I know my way around .NET. I decided to take a stab at making a web app and I am struggling a little bit with how to handle the rendered content.

Example is a app to remove files and folders from a system (Look beyond the fact that you shouldn't do this from a web app)

I have a component that I load into modal. When it loads it prompts to ask if you want to remove the folder. You can confirm or cancel. if you confirm it goes through the process of removing the folders and the content changes to a message saying "please wait while this is completed" and once finished the message changes to "Hey its finished".

This scenario is resulting in my component looking like

if(initialState)
{
    ask for confirmation
}
else if(RemovingState)
{
    please wait while this is completed
}
else if(CompletedState)
{
    Hey its finished
}

This results in my methods having this awkward flag flipping at the start of them

StartRemoveMethod()
{
    initialState = false;
    RemovingState = true;

    DoTheRemoval
}

This just feels weird to work with. I am looking at adding an additional check, which would mean I have to introduce a new flag and another else if section. I am just wondering if I am completely missing something or if this is basically the idea of what I should be doing?

Upvotes: 3

Views: 2695

Answers (1)

tomRedox
tomRedox

Reputation: 30403

Blazor is definitely a bit of a mind-shift, especially if you're coming from WinForms or the like. It's quite easy to end up with analysis paralysis when trying to work out how to chop things up into components. With regards to your specific example, that seems a perfectly reasonable way to go (albeit the switch and enum approach will tidy it up a bit).

It's still fairly early days for Blazor so there aren't a great deal of really detailed examples as yet. One really good one is the Blazor team's Blazing Pizzas tutorial: https://github.com/dotnet-presentations/blazor-workshop/. That will walk you through building a complete system along with some really useful guidance on how to manage application state.

You might also want to have a look at some introductory (Facebook) React articles that describe building up components and state management. The concepts transfer much better to Blazor than the old WinForms paradigms. It's also worth reading a bit about the concepts of Flux/Redux as they are popular ways of solving some fairly common state issues that arise in component based UI approaches.

Upvotes: 2

Related Questions