Blazor，虚拟复选框列表

debugcn 发表于 Dev

大卫·沃尔多

我正在尝试通过创建复选框的可滚动列表来实现新的“虚拟化”功能，用户可以在其中搜索和选择多个项目。

这是我的剃须刀代码：

@if (this.AllowSearch)
{
    <InputTextLined Label="@string.Empty" @bind-Value="@SearchString"/>
}

<Virtualize Items="@displayedItems" Context="item" >
    <ItemContent>
        <label><input type="checkbox" @bind-value="item.Selected" />@item.DisplayName</label>
    </ItemContent>
</Virtualize>

</ul>

这是我的组件代码：

    [Parameter]
    public bool AllowSearch { get; set; } = false;

    [Parameter]
    public string DisplayPropertyName { get; set; }

    [Parameter]
    public ICollection<T> SourceList { get; set; } = null;

    [Parameter]
    public Func<T, string, bool> SearchFunc { get; set; }

    public string SearchString 
    { 
        get => _searchString;
        set 
        {
            if (value == _searchString)
                return;

            _searchString = value;
            Search();
        }
    }
    private string _searchString = string.Empty;

    protected ICollection<SelectableListItemModel<T>> items;
    protected ICollection<SelectableListItemModel<T>> displayedItems;

    protected override void OnInitialized()
    {
        if (SourceList != null)
        {
            items = SourceList.Select(i => new SelectableListItemModel<T>(i, DisplayPropertyName)).ToList();
            displayedItems = items.ToList();
        }
    }

    protected void Search()
    {
        if (string.IsNullOrWhiteSpace(SearchString) == false)
            displayedItems = items.Where(p => SearchFunc(p.Data, SearchString)).ToList();
        else
            displayedItems = items.ToList();
    }

该组件通过将它们包装在SelectableListItemModel中来呈现sourceList中的所有项目。

public class SelectableListItemModel<T> 
{
    public bool Selected { get; set; }
    
    public string DisplayName { get; set; }

    public T Data { get; private set; }

    public SelectableListItemModel(T data, string displayedPropertyName)
    {
        this.selected = false;
        this.Data = data;

        if (displayedPropertyName != string.Empty)
            this.DisplayName = typeof(T).GetProperty(displayedPropertyName).GetValue(data).ToString();
        else
            this.DisplayName = data.ToString();
    }
}

现在的主要问题是搜索实现。但是这个问题真的很难解释。继承人的照片：

选择项目然后执行搜索时，不重新显示复选框，仅显示标签。

导航

我认为您应该使用InputCheckbox而不是htmlinput元素。实现ValueChanged了InputCheckBox以通知父母。并且还使用@item.Selected（@开头带有）而不是item.Selected因为item.selected是字符串！：

<EditForm>
<Virtualize Items="@displayedItems" Context="item" >
    <ItemContent>
        <label><InputCheckbox @bind-value="@item.Selected"></InputCheckbox>@item.DisplayName</label>
    </ItemContent>
</Virtualize>
</EditForm>

和

   protected aync Task Search()
        {
            if (string.IsNullOrWhiteSpace(SearchString) == false)
            {
                displayedItems = items.Where(p => await SearchFunc(p.Data,SearchString)).ToList();
                StateHasChanged();
            }
            else
                displayedItems = items.ToList();
        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。