Blazor MudSelect @bind-SelectedValues to both id and value

user_2777546 0
Viewed 4361

I need to know the Id and the value of selected items. as the the following example. so options should have an array of selected parts.

<MudGrid>
    <MudItem xs="6" sm="6" md="4">
        @*  <MudSelect T="string" Label="Parts" Strict="true" MultiSelection="true" Variant="Variant.Outlined" @bind-Value="value" @bind-SelectedValues="options" Margin="Margin.Dense" Required="true" Format="F2">*@
        <MudSelect T="string" Label="Parts " HelperText="Pick the Parts" MultiSelection="true" @bind-SelectedValues="options">
            @foreach (var part in parts)
            {
                <MudSelectItem T="string" Value=@part.PartValue>@part.PartValue</MudSelectItem>

            }
        </MudSelect>
    </MudItem>
</MudGrid>

@code {

    IEnumerable<Parts> parts = new List<Parts>()
    {
        new Parts() {PartID = 1, PartValue = "Audi"},
        new Parts() {PartID = 2, PartValue = "BMW"},
        new Parts() {PartID = 3, PartValue = "Chevrolet"},
        new Parts() {PartID = 4, PartValue = "Ferrari"},
        new Parts() {PartID = 5, PartValue = "Porsche"},
        new Parts() {PartID = 6, PartValue = "Renault"}
    };
    private int value { get; set; } = 0;
    private HashSet<int> options { get; set; } = new HashSet<int>() { 0 };

    public class Parts
    {
        public int PartID { get; set; }
        public string PartValue { get; set; }
    }
}
blazor-webassembly blazor c#
1 Answers

Here you go, you can just use your parts in the MudSelect but you have to provide suitable overrides in Parts to allow equality comparison. Here is your snippet with changes. You can play with it online: https://try.mudblazor.com/snippet/wEwFFQPUdcDWgbYs

The code:

<MudGrid>
    <MudItem xs="12">
        <MudSelect Label="Parts " HelperText="Pick the Parts" MultiSelection="true" @bind-SelectedValues="options">
            @foreach (var part in parts)
            {
                <MudSelectItem Value="@part">@part.PartValue</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
    <MudItem xs="12">
        <br/><br/>
        Selected parts: @string.Join(", ", options.Select(x=>x.PartValue));
    </MudItem>
</MudGrid>

@code {

    IEnumerable<Parts> parts = new List<Parts>()
    {
        new Parts() {PartID = 1, PartValue = "Audi"},
        new Parts() {PartID = 2, PartValue = "BMW"},
        new Parts() {PartID = 3, PartValue = "Chevrolet"},
        new Parts() {PartID = 4, PartValue = "Ferrari"},
        new Parts() {PartID = 5, PartValue = "Porsche"},
        new Parts() {PartID = 6, PartValue = "Renault"}
    };
    private IEnumerable<Parts> options { get; set; } = new HashSet<Parts>() { 
        new Parts() {PartID = 2, PartValue = "BMW"},
        new Parts() {PartID = 4, PartValue = "Ferrari"},
    };

    public class Parts
    {
        public int PartID { get; set; }
        public string PartValue { get; set; }
        public override bool Equals(object o) {
            var other = o as Parts;
            return other?.PartID==PartID;
        }
        public override int GetHashCode() => PartID.GetHashCode();        
        public override string ToString() {
            return PartValue;
        }
    }
}
user_2417400
Related