If you’re building Blazor components you’re probably used to driving the UI from data.

At its simplest this might be to show a value in the UI using one-way binding:

<h1>Hello @name</h1>
@code {
    string name = "Mae";
}

But what if you want to alter the appearance of the component, beyond just showing data, say to change the colour of a border, or background, in response to a value found in the data?

For that we need a little conditional logic, and the ability to provide different CSS classes for different scenarios.

Here’s a simple example.

Let’s say we have a list of Panels, and some of those panels are flagged up as ‘important’

Dashboard.razor

@code {

    List<Panel> panels = new List<Panel> {
        new Panel { Important = true, Heading = "A Panel", Text = "Look, a Panel" },
        new Panel { Heading = "Another Panel", Text = "Another one?" }
    };

    class Panel
    {
        public string Heading { get; set; }
        public string Text { get; set; }
        public bool Important { get; set; }
    }
}

Render different UI depending on the flag

From here we can update our markup to read that flag and render something different…

There are a few ways to handle this.

We could put some sort of conditional code in the markup itself, using if statements.

In practice this would likely lead to some duplicated markup as we attempt to render different div elements based on the Important flag.

We could render an entirely different panel component (we could create an ImportantPanel and a ‘regular’ Panel).

I might consider this if Important panels had a bit more specific UI and/or logic.

But in this case, for the sake of a slightly different looking border, an entirely separate component seems like overkill.

My preferred “simplest first step” approach here is to create a method in @code which returns a string with any additional CSS classes we want our card component to use.

@code {

    string cardClass(Panel panel) 
        => panel.Important ? "border-danger" : "";

    ...
}

Now if we invoke this cardClass method, and give it an instance of Panel it will use the Panel’s Important flag to decide whether to return the border-danger CSS class or not.

What's with the `=>`

That syntax may look a little odd if it’s the first time you’re seeing it.

string cardClass(Panel panel)
    => panel.Important ? "border-danger" : "";

This is something known as an expression bodied lambda.

It’s an alternative way to declare a method.

We could equally have written the method out “long form” like this:

string cardClass(Panel panel) {
    return panel.Important ? "border-danger" : "";
}

Finally, we can call this cardClass method in our markup.

<div class="card @cardClass(panel)">
    <div class="card-header">
        @panel.Heading
    </div>
    <div class="card-body">
        <div class="card-text">
            @panel.Text
        </div>
    </div>
</div>

Now we can have angry looking red-bordered panels, simply by setting our panel’s Important flag to true.

This post is taken from one of the lessons in Practical Blazor Components. If you haven’t already, check it out (new course coming soon).

Web development should be fun.

Write code, hit F5, view it in the browser and bask in the glory of a job well done.

But you're not basking… Why aren't you basking?!

Cut through all the noise and build better, simpler Blazor web applications with Practical Blazor Components.

Build Better Blazor Web Apps, Faster

Next up

Using .NET 7’s Blazor Custom Elements to render dynamic content
Render Blazor components from dynamic content, at runtime?
Wait until the last responsible moment to add structure to your Blazor UI
Prioritise the ability to iterate and evolve your UI
Struggling to get going with a new feature? Start with the HTML
Build the skeleton and fill in the details from there