DotVVM Tip 04: Join CSS classes without complicated expressions

DotVVM Tips is a series of short articles showing interesting features of DotVVM. To learn more, visit our Docs site.

DotVVM syntax is different from Razor. Instead of concatenating fragments of CSS classes, just use class-* property and specify a boolean expression indicating whether the class shall be included or not.

// Razor
<div class="order-total 
            @(Pizzas.Count > 0 ? "" : "hidden")">
    Total: ...
</div>

// DotVVM
<div class="order-total" 
     class-hidden="{value: Pizzas.Count > 0}">
    Total: ...
</div>

You can join as many classes as you want. They will be dynamically added or removed as the underlying properties in the viewmodel change.