DropDownList - Label & Value Pairs
Smart.DropDownList allows you to differentiate between the displayed label and the actual value of each list item.
Using ListItem
Add the DropDownList component. Set the list of options as a series of <ListItem>.
When the user selects an item, the DropDownList will return the value of the selected item:
<h3>@(string.Join(", ", selectedItems))</h3> <DropDownList SelectionMode="ListSelectionMode.CheckBox" @bind-SelectedValues="@selectedItems"> <ListItem Value="1">Affogato</ListItem> <ListItem Value="2">Americano</ListItem> <ListItem Value="3">Bicerin</ListItem> <ListItem Value="4">Breve</ListItem> <ListItem Value="5">Cappuccino</ListItem> <ListItem Value="6">Cafe Crema</ListItem> <ListItem Value="7">Cafe Corretto</ListItem> </DropDownList> @code{ string[] selectedItems = new string[] { }; }
![List Items](dropdownlist-listitem.gif)
Using DataSource
Alternatively, you can set the list of options as a DataSource.
If using an Array of custom class, use the [JsonPropertyName] attribute to set which field should be treated as the label, and which as the value.
Example:
@using System.Text.Json.Serialization <h3>@(string.Join(", ", selectedItems))</h3> <DropDownList DataSource="countries" SelectionMode="ListSelectionMode.CheckBox" @bind-SelectedValues="@selectedItems"> </DropDownList> @code{ class Country { [JsonPropertyName("label")] public string Name { get; set; } [JsonPropertyName("value")] public string Code { get; set; } public Country(string name, string code) { Name = name; Code = code; } } string[] selectedItems = new string[] { }; List<Country> countries = new List<Country>() { new Country("France", "FR"), new Country("Germany", "DE"), new Country("Italy", "IT"), new Country("Spain", "ES"), new Country("Portugal", "PT"), new Country("United Kingdom", "GB") }; }
![Data Source](dropdownlist-datasource.gif)