MudBrazor-可搜索的MudSelect

Question

我使用的是MudBrazor，特别是MudSelect。我想显示Name属性，但将Id属性保存在Value中。以下内容正在发挥作用。

<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，但我想防止额外的处理

Answer 1

据我所知，MudBlaczor在MudSelect中没有动态数据加载。

如前所述，您可以使用Virtualization MudBlazor为大量项目实现最大性能。

以下是MudSelect中具有大量数据的虚拟化示例。

他们似乎没有为MudSelect开发动态数据，不要等待(至少在接下来的几个月(。

更多信息：您还可以对表使用虚拟化，如下所示。

Answer 2

我改为自动完成，默认显示前十名，然后当用户键入时，列表自动过滤到包含输入文本的前十名。

<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}")" />

Answer 3

您可以使用CodeBean.MudBlazor.Extensions包。它具有MudSelectExtended，并具有内置的搜索支持。它还具有类似搜索功能的MudComboBox。

可以在这里试试https://codebeam-mudextensions.pages.dev/mudselectextended

Answer 4

要在Blazor应用程序中创建可搜索的MudSelect组件，可以创建一个从MudSelect继承并覆盖其FocusAsync()方法的自定义组件。之后，您可以在此自定义组件中添加搜索输入。

步骤1：创建CustomMudSelect组件首先，创建一个新的Blazor组件并将其命名为CustomMudSSelect。在此组件中，从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>