DotVVM Tip 09: Bind multiple CheckBoxes to a collection


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

Building forms is really easy! To put all selected options into a collection, just bind the collection to multiple CheckBox controls.

// DotVVM view
<dot:CheckBox Text="Apple"
              CheckedItems="{value: FavoriteFruit}"
              CheckedValue="Apple" />
<dot:CheckBox Text="Orange"
              CheckedItems="{value: FavoriteFruit}"
              CheckedValue="Orange" />
<dot:CheckBox Text="Banana"
              CheckedItems="{value: FavoriteFruit}"
              CheckedValue="Banana" />
// DotVVM viewmodel
public List<string> FavoriteFruit { get; set; } = new();

The CheckedItems property points to a collection. The CheckedValue tells the control what value will be placed in the collection if the CheckBox is checked. As a result, you’ll have the selected identifiers in the collection.

The data-binding works in both ways – if you modify the collection, the CheckBox controls will update their state to match the values in the collection.

Tomáš Herceg
Tomáš Herceg


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.

Ostatní články z kategorie: DotVVM Blog