1

我有一个带有分页/全局搜索的泥 blazor 网格。当我在本地测试它时，搜索功能按预期工作，即一旦用户输入内容，它就会过滤掉网格，它似乎真的很快。当我将它托管到 dev/stage 服务器时会出现问题。用户输入延迟。此外，如果输入缓慢，它也可以正常工作。例如，如果我尝试在搜索框中快速输入“test”，那么即使我已经仔细输入了所有字符，它也总是会丢失 1 或 2 个字符并将其打印为“tst”。按退格键时指针非常频繁地闪烁。

我试图清除缓存，但在托管后仍然无法正常工作，而在我的本地环境中执行上述操作时不会出现此类问题。

我无法弄清楚我做错了什么，为什么会影响性能。 注意：我从 db 一次加载数据集（在 onInitialized() 内部）

编码：

索引.razor

<MudTable Items="CustomersWithOrderInfo" ServerData="new Func<TableState, Task<TableData<Data.Models.CustomerOrderInfoDTO>>>(LoadCustomers)" FixedHeader="true" FixedFooter="true" Class="table table-hover" Style="box-shadow:none !important;" @ref="table" Height="530px">
                        <ToolBarContent>
                            <div class="input-group mb-3" style="width:35%;">
                                <input type="text" class="form-control" placeholder="Search" value="@searchString" @oninput="@FilterChanged">
                                <div class="input-group-append">
                                    <span class="input-group-text bg-primary" id="basic-addon1"><i class="fa fa-search fa-lg fa-charade text-white" style="font-size:small;"></i></span>
                                </div>
                            </div>
                            <br />
                        </ToolBarContent>
                        <HeaderContent>
                            <MudTh Style="font-weight: bold;width:12%;">Customer Id</MudTh>
                            <MudTh Style="font-weight: bold;width:13%">Customer Name</MudTh>
                             ....
                            <MudTh Style="font-weight: bold;width:8%;">Actions</MudTh>
                        </HeaderContent>
                        <RowTemplate>
                                                 
                            <MudTd DataLabel="Customer Id">@context.CustomerId</MudTd>
                            <MudTd DataLabel="Customer Name">@context.CustomerName</MudTd>
                             ....
                            <MudTd DataLabel="Active">@context.IsActive</MudTd>
                            <MudTd DataLabel="">
                            
                               ...
                            </MudTd>
                        </RowTemplate>
                        <PagerContent>
                            <MudTablePager PageSizeOptions="pageSizes" />
                        </PagerContent>
                    </MudTable>

索引库.cs

 protected void FilterChanged(ChangeEventArgs args)
        {
            searchString = args.Value.ToString();
            table.ReloadServerData();
        }
protected async Task<TableData<CustomerOrderInfoDTO>> LoadCustomers(TableState tableState)
        {
            IEnumerable<CustomerOrderInfoDTO> data = CustomersWithOrderInfo.OrderByDescending(q => q.CustomerId);
            data = data.Where(p =>
            {
                if (string.IsNullOrWhiteSpace(searchString))
                    return true;
               
                if (!string.IsNullOrEmpty(p.CustomerName) && p.CustomerName.Contains(searchString, StringComparison.OrdinalIgnoreCase))
                    return true;
               
                if ($"{p.CustomerId}".Contains(searchString))
                    return true;
                return false;

            }).ToArray();
            totalItems = data.Count();
            pagedData = data.Skip(tableState.Page * tableState.PageSize).Take(tableState.PageSize).ToArray();
            return new TableData<CustomerOrderInfoDTO>() { TotalItems = totalItems, Items = pagedData };
        }
4

1 回答 1

1

我认为这是因为您使用@oninput="@FilterChanged"了 ，这意味着FilterChanged每次您键入字符时都会执行此操作。由于FilterChanged是一个需要一些时间的功能，因此在执行时会导致 UI 出现一些滞后。

尝试替换@oninput="@FilterChanged"为@onchange="@FilterChanged". 这将FilterChanged在元素失去焦点时执行。

另一种可能性是添加一个按钮或在Enter按下键时执行。

请参阅文档。

于 2022-02-24T16:23:46.810 回答