SelectList extension

Basics

The SelectList component allows you to select a value from a list of predefined items.

Installation

The SelectList extension is part of the Blazorise.Components NuGet package.

NuGet

Install extension from NuGet.

Install-Package Blazorise.Components

Usage

Markup

<SelectList
    TItem="MySelectModel"
    TValue="int"
    Data="@myDdlData"
    TextField="@((item)=>item.MyTextField)"
    ValueField="@((item)=>item.MyValueField)"
    SelectedValue="@selectedListValue"
    SelectedValueChanged="@MyListValueChangedHandler" />

Data binding

@code{
    public class MySelectModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    static string[] Countries = { "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia & Herzegovina", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Malta", "Moldova", "Monaco", "Montenegro", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino", "Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "Ukraine", "United Kingdom", "Vatican City" };
    IEnumerable<MySelectModel> myDdlData = Enumerable.Range( 1, Countries.Length ).Select( x => new MySelectModel { MyTextField = Countries[x - 1], MyValueField = x } );

    int selectedListValue { get; set; } = 3;

    void MyListValueChangedHandler( int newValue )
    {
        selectedListValue = newValue;
        StateHasChanged();
    }
}

Attributes

Name Type Default Description
TItem generic   Model data type.
TValue generic   Bound value data type.
Data IEnumerable   Data used for selection.
TextField Func<TItem, string>   Selector for the display name field.
ValueField Func<TItem, TValue>   Selector for the value field.
SelectedValue TValue   Currently selected value.
SelectedValueChanged EventCallback<TValue>   Raises an event after the selected value has changed.