c# - Blazor MudSelect @bind-SelectedValues 到 id 和 value

标签 c# blazor blazor-webassembly

我需要知道所选项目的 ID 和值。如以下示例。所以选项应该有一系列选定的部分。

<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; }
    }
} 

最佳答案

好了,您可以只在 MudSelect 中使用您的零件,但您必须在零件中提供合适的覆盖以允许相等比较。这是您的更改代码段。你可以在线玩:https://try.mudblazor.com/snippet/wEwFFQPUdcDWgbYs

代码:

<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;
        }
    }
} 

关于c# - Blazor MudSelect @bind-SelectedValues 到 id 和 value,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66372676/

相关文章:

c# - 如何更改内容页中母版页的 asp.net 控件的可见性?

c# - 在 asp.net core 中为开发和发布环境自动设置 appsettings.json?

c# - .NET Core 3.1 中是否存在 HTTPResponse 响应

javascript - 如何在没有 Blazor Web 组件的情况下从 JavaScript 使用 C# WebAssemly

c# - 在 blazor 中将字节数组转换回 PDF

C# HasValue 与 !=null

c# - 如何使用 .NET 高效地为 FAST ESP 提供千兆字节的数据

c# - 如何在 Blazor 中正确嵌入 &lt;iframe&gt;? (YouTube)

c# - 如何创建必须从 Blazor 中具有泛型类型的类继承的泛型类型?

c# - 与 3 个子组件共享状态并处理事件 |通量器