DotVVM Tip 04: Join CSS classes without complicated expressions

Author:
|
Publish date:

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.

Tomáš Herceg
Tomáš Herceg

BIO: 

I am the CEO of RIGANTI, small software development company located in Prague, Czech Republic.

I am a Microsoft Regional Director and Microsoft Most Valuable Professional.

I am the author of DotVVM, an open source .NET-based web framework which lets you build Line-of-Business applications easily and without writing thousands lines of Javascript code.

Others blog posts from category: DotVVM Blog