Value Binding in Dropdown List

4 Nov 202514 minutes to read

Value binding synchronizes a component’s value with a parent or model. The DropDownList supports two binding approaches:

• Value binding with @bind-Value.
• Index binding with @bind-Index.

Bind value binding

Use the @bind-Value attribute to bind the selected value. Supported types include string, int, enum, bool, and complex types. When the component value changes, all references bound via @bind-Value update automatically. Ensure the bound value corresponds to the field mapped to DropDownListFieldSettings.Value.

• TValue: Specifies the type of the bound value for the DropDownList component.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue="string" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@DropVal" DataSource="@Country" Width="300px">
    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
</SfDropDownList>

@code {

    public string DropVal = "Canada";

    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
    };
}

Index value binding

Bind by index using the @bind-Index attribute. This supports int and nullable int types and selects the item at the specified position in the data source.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Index="@ddlIndex">
  <DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    private int? ddlIndex { get; set; } = 1;
    public class Games
    {  
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Game= "American Football" },
    new Games() { ID= "Game2", Game= "Badminton" },
    new Games() { ID= "Game3", Game= "Basketball" },
    new Games() { ID= "Game4", Game= "Cricket" },
    new Games() { ID= "Game5", Game= "Football" },
    new Games() { ID= "Game6", Game= "Golf" },
    new Games() { ID= "Game7", Game= "Hockey" },
    new Games() { ID= "Game8", Game= "Rugby"},
    new Games() { ID= "Game9", Game= "Snooker" },
    new Games() { ID= "Game10", Game= "Tennis"},
  };
}

Text and value

The DropDownListFieldSettings.Value and DropDownListFieldSettings.Text properties map to fields in the data model. The Value field holds the unique item value used for binding, and the Text field provides the display text in the popup list.

In the following example, the selected item text is “Badminton” (Text field), while the value is “Game2” (Value field).

CSHTML

@using Syncfusion.Blazor.DropDowns

<p>DropDownList Value is: @DropDownValue</p>

<SfDropDownList TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@DropDownValue">
  <DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    public string DropDownValue { get; set; } = "Game2";
    public class Games
    {  
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Game= "American Football" },
    new Games() { ID= "Game2", Game= "Badminton" },
    new Games() { ID= "Game3", Game= "Basketball" },
    new Games() { ID= "Game4", Game= "Cricket" },
    new Games() { ID= "Game5", Game= "Football" },
    new Games() { ID= "Game6", Game= "Golf" },
    new Games() { ID= "Game7", Game= "Hockey" },
    new Games() { ID= "Game8", Game= "Rugby"},
    new Games() { ID= "Game9", Game= "Snooker" },
    new Games() { ID= "Game10", Game= "Tennis"},
  };
}

Primitive type binding

Bind arrays of primitive data (for example, strings or numbers) by assigning the data source and using @bind-Value.

The following example uses an array of strings:

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue=string TItem=string Placeholder="Select a game" DataSource="@data" @bind-Value="@DropDownValue" Width="300px"></SfDropDownList>

@code{
    public string DropDownValue { get; set; } = "Cricket";
    public string[] data = { "Badminton", "Basketball", "Cricket", "Football", "Golf" ,"Hockey"};
}

The following example uses an array of integers:

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue=int? TItem=int? Placeholder="Select a game" DataSource="@data" Width="300px" @bind-Value="@DropDownValue"></SfDropDownList>

@code{
    public int? DropDownValue { get; set; } = 1022;
    public int?[] data = { 1011, 1022, 1044, 1066 };
}

Object binding

Bind complex objects to @bind-Value by setting TValue to the object type and mapping DropDownListFieldSettings.Value to a unique field.

In the following example, the Name field is mapped to the Value property.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue="Games" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@DropDownValue">
  <DropDownListFieldSettings Value="ID" Text="Name"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    SfDropDownList<Games, Games> DropObj;
    public Games DropDownValue { get; set; } = new Games() { ID = "Game4", Name = "Cricket" };
    public class Games
    {  
        public string ID { get; set; }
        public string Name { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Name= "American Football" },
    new Games() { ID= "Game2", Name= "Badminton" },
    new Games() { ID= "Game3", Name= "Basketball" },
    new Games() { ID= "Game4", Name= "Cricket" },
    new Games() { ID= "Game5", Name= "Football" },
    new Games() { ID= "Game6", Name= "Golf" },
    new Games() { ID= "Game7", Name= "Hockey" },
    new Games() { ID= "Game8", Name= "Rugby"},
    new Games() { ID= "Game9", Name= "Snooker" },
    new Games() { ID= "Game10", Name= "Tennis"},
  };
}

Enum binding

Bind enum values using @bind-Value. The component binds to the enum value; configure Text/Value mappings to control how enum items display.

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfDropDownList TValue="Values" TItem="string" Placeholder="e.g. Australia" Width="300px" DataSource="@EnumValues" @bind-Value="@ddlVal">
</SfDropDownList>

@code{

    public string[] EnumValues = Enum.GetNames(typeof(Values));
    public Values ddlVal { get; set; } = Values.Canada;

    public enum Values
    {
        Australia,
        Bermuda,
        Canada,
        Denmark,
        India,
        US
    }
}

Show or hide clear button

Use the ShowClearButton property to show or hide the clear button. Clicking the clear button resets Value, Text, and Index.

NOTE

For non-nullable TValue, the clear action sets the default value of the type (for example, 0 for int). For nullable TValue (for example, int?), the clear action sets null.

The following example uses string as TValue, so clearing sets the value to null.

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfDropDownList TValue="string" TItem="Games" ShowClearButton=true Width="300px" Placeholder="Select a game" DataSource="@LocalData">
  <DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    public class Games
    {  
        public int? ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= 1, Game= "American Football" },
    new Games() { ID= 2, Game= "Badminton" },
    new Games() { ID= 3, Game= "Basketball" },
    new Games() { ID= 4, Game= "Cricket" },
    new Games() { ID= 5, Game= "Football" },
    new Games() { ID= 6, Game= "Golf" },
    new Games() { ID= 7, Game= "Hockey" },
    new Games() { ID= 8, Game= "Rugby"},
    new Games() { ID= 9, Game= "Snooker" },
    new Games() { ID= 10, Game= "Tennis"},
  };
}

Dynamically change TItem

Change TItem dynamically by defining a generic DropDownList using the @typeparam directive and passing different data source types.

Creating generic dropdownList component

Create a reusable DropDownList.razor component that exposes customData (List<TItem>) and DDLValue (TValue) as parameters.

RAZOR

@using Syncfusion.Blazor.DropDowns;
@typeparam TValue;
@typeparam TItem;

<SfDropDownList TValue="TValue" Width="300px" TItem="TItem" @bind-Value="@DDLValue" Placeholder="Please select a value" DataSource="@customData">
    <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    [Parameter]
    public List<TItem> customData { get; set; }
    [Parameter]
    public TValue DDLValue { get; set; }
    [Parameter]
    public EventCallback<TValue> DDLValueChanged { get; set; }
}

Usage of generic component with different type

Use the generic component with different TValue and TItem types in pages as needed.

In the example below, TValue is string in Index.razor, and TValue is int? in Counter.razor.

[Index.razor]

RAZOR

<DropDownList TValue="string" TItem="Games" @bind-DDLValue="@value" customData="@LocalData">
</DropDownList>

@code{
    public string value { get; set; } = "Game1";
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };
}

[Counter.razor]

RAZOR

<DropDownList TValue="int?" TItem="Games" @bind-DDLValue="@value" customData="@LocalData">
</DropDownList>

@code{
    public int? value { get; set; } = 3;
    public class Games
    {
        public int? ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= 1, Text= "American Football" },
        new Games() { ID= 2, Text= "Badminton" },
        new Games() { ID= 3, Text= "Basketball" },
        new Games() { ID= 4, Text= "Cricket" },
        new Games() { ID= 5, Text= "Football" },
        new Games() { ID= 6, Text= "Golf" },
        new Games() { ID= 7, Text= "Hockey" },
        new Games() { ID= 8, Text= "Rugby"},
        new Games() { ID= 9, Text= "Snooker" },
        new Games() { ID= 10, Text= "Tennis"},
    };
}

Two way binding

Two-way binding synchronizes data between the UI and the model using the Blazor @bind-Value directive. Use @bind-Value on the DropDownList to enable two-way binding.

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfDropDownList ID="Assignee" Placeholder="Select Assignee" TItem="MemberModel" TValue="int?" DataSource="@Members" @bind-Value="@selectedStep.Assignee">

    <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>

</SfDropDownList>

@code {

    public MemberModel selectedStep = new MemberModel();

    public class MemberModel
    {
        public int? Id { get; set; }
        public string Name { get; set; }
        public int? Assignee { get; set; } = 2;
    }

    List<MemberModel> Members = new List<MemberModel>()
    {
        new MemberModel() {Id = 0, Name="John" },
        new MemberModel() {Id = 1, Name="Andrews" },
        new MemberModel() {Id = 2, Name="Robert" },

    };

}

Programmatically clearing value

Clear the value programmatically by calling ClearAsync() on the DropDownList instance (obtained via @ref). For example, bind a button click to invoke ClearAsync().

RAZOR

@using Syncfusion.Blazor.DropDowns;

<button @onclick="Clear">Clear</button>

<SfDropDownList  @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue" >
  <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    SfDropDownList<string, Games> DDLObj;

    public string GameValue { get; set; } = "Game3";

    public class Games
    {  
        public string ID { get; set; }
        public string Text { get; set; }
    }

    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
    };

    public async Task Clear()
    {
        this.DDLObj.ClearAsync();
    }

}