logo标签列表

MudBlazor - 可搜索的 MudSelect

blazormudblazor
8

我正在使用MudBlazor，具体来说是MudSelect。 我想显示“Name”属性，但将“Id”属性保存在值中。 以下内容可以正常工作。

<MudSelect T="int" Label="Assigned Group" Variant="Variant.Outlined" Required="true" RequiredError="An Assigned Group is required."  @bind-Value="newTask.GroupId" AdornmentIcon="@Icons.Filled.Group">
    @foreach (var group in Groups)
    {
        <MudSelectItem Value="@group.Id">@group.Name</MudSelectItem>
    }
</MudSelect>

但是，随着选项数量的增加，添加一个搜索字段到 Select List 中是有意义的。我不知道如何在 MudSelect 中使用它。而且，当使用 MudAutocomplete 时，它给了我一个搜索功能，但我不知道如何将 Id 关联到所选的 Name。虽然我的 Name 是唯一的，我可以在 submit 上进行一些处理以获取 Id，但我想避免额外的处理。

1
据我所知，MudSelect不支持这个功能。我之前也曾经寻找过它。最终我使用了MudAutocomplete的ToStringFunc参数。通过使用它，你可以实现你需要的一切。 - Jan
这对我很有帮助，它运行良好。 - Berkay
5个回答
2
据我所知，MudBlazor在MudSelect中没有动态数据加载功能。
正如在这里所提到的，您可以使用MudBlazor中的虚拟化来实现大量项目的最佳性能。 这里是一个在MudSelect中使用虚拟化处理大量数据的示例。
看起来他们并没有在MudSelect上开发动态数据加载功能，不要等待（至少在未来几个月内）。
更多信息：您也可以像这样为表格使用虚拟化。
1

我改成了自动完成功能，默认显示前十个选项，然后随着用户的输入，列表会自动过滤出包含所输入文本的前十个选项。

 <MudAutocomplete T="SM.Role"
     Value="_employee.Role"
     Label="Role"
     SearchFunc="@EmployeeViewModel.SearchRole"
     ResetValueOnEmptyText="@false"
     CoerceText="@false"
     DebounceInterval="500"
     CoerceValue="@false"
     ValueChanged="@OnRoleSelectionChanged"
     AdornmentIcon="@Icons.Material.Filled.Search"
     AdornmentColor="Color.Primary"
     ToStringFunc="@(e => e == null ? null : $"{e.Name}")" />
1
0
你可以使用这个[MudBlazor.Extensions Nuget] https://www.nuget.org/packages/MudBlazor.Extensions]包。
然后在我的情况下，最好的选择是像这样继承MudExSelect。
@using MudBlazor.Extensions.Options
@inherits MudExSelect<ProgramingSkill>
@Inherited()
@code {
    public override Func<ProgramingSkill, string> ToStringFunc { get; set; } = ItemNameRender;
    public override bool MultiSelection { get; set; } = true;
    
    protected RenderFragment Inherited() => builder => base.BuildRenderTree(builder);
    
    protected override Task<IList<ProgramingSkill>> GetAvailableItemsAsync(CancellationToken cancellation = default)
    {
        // Load data from server for example
        return Task.FromResult<IList<ProgramingSkill>>(new List<ProgramingSkill>
        {
            new() { Name = "C#"},
            new() { Name = "C++"},
            new() { Name = "C"},
            new() { Name = "Objective-C"},
            new() { Name = "Swift"},
            new() { Name = "TypeScript"},
            new() { Name = "JavaScript"},
            new() { Name = "VisualBasic"},
            new() { Name = "Pascal"}
        });
    }
    private static string ItemNameRender(ProgramingSkill item) => $"{item.Name}";
}

这里可以找到一个示例演示链接

0
为了在Blazor应用程序中创建一个可搜索的MudSelect组件，您可以创建一个自定义组件，该组件继承自MudSelect并重写其FocusAsync()方法。之后，您可以在这个自定义组件中添加一个搜索输入框。
步骤1：创建一个CustomMudSelect组件 首先，创建一个新的Blazor组件，并将其命名为CustomMudSelect。在这个组件中，继承自MudSelect并重写FocusAsync()方法。
步骤2：在CustomMudSelect内部添加一个搜索输入框 在组件的标记中包含一个搜索输入框。这将使用户能够在MudSelect组件中过滤项目。
<i>
     
    public class CustomMudSelect<T>: MudSelect<T>
    {
      public override ValueTask FocusAsync()
      {
         return new ValueTask();
      }
    }

    <CustomMudSelect T="int" Label="Assigned Group" Variant="Variant.Outlined" 
    Required="true" RequiredError="An Assigned Group is required."@bind- 
    Value="newTask.GroupId" AdornmentIcon="@Icons.Filled.Group">

        <input class="form-control" placeholder="Search..." 
        @oninput="@((ChangeEventArgs e) => { searchText = 
        e.Value.ToString(); 
        StateHasChanged();})"/>
    
       @foreach (var group in Groups)
       {
             if (string.IsNullOrEmpty(searchText) || 
                 group.Name.Contains(searchText, 
                 StringComparison.OrdinalIgnoreCase)
                )
                {
                   <MudSelectItem Value="@group.Id">@group.Name</MudSelectItem>
                }
           
       }
    </CustomMudSelect>


</i>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接