SQL Server 使用blazor过滤数据列表或延迟加载搜索

zqdjd7g9  于 2022-12-26  发布在  其他
关注(0)|答案(1)|浏览(121)
<input type="search" list="txtSearch" @bind-value="@searchTerm" @onkeydown="@Enter">
<datalist id="txtSearch">

  @foreach (var item in objText)
   {
         <option>@item.A</option>
         <option>@item.B</option>
         <option>@item.C</option>
         <option>@item.D</option>
   }

</datalist>

默认结果是SQL Server中的所有项。
"我想介绍前50名“
而正常的行为(只有)当打字显示一切blazor当然

mu0hgdu0

mu0hgdu01#

数据列表不是理想的元素,因为如果有人开始浏览列表中的可用选项,列表中只有50个选项,并不包含每个选项。
但是,如果您仍然希望以这种方式使用它,则应该使用以下方法筛选来自SQL Server的数据

var filteredObjText = objText.GetRange(0, 50);

然后在@foreach中使用filteredObjText。在Enter方法中,应该使用类似于

filteredObjText = objText
    .Where(q => q.A.Contains(searchTerm) ||
        q.B.Contains(searchTerm) ||
        q.C.Contains(searchTerm) ||
        q.D.Contains(searchTerm))
    .GetRange(0, 50);
StateHasChanged();

如果只想列出50个属性或只列出与类型化筛选器匹配的属性,则生成的代码也会有所不同。
下面是完整的工作代码(修复了一些在我最初的回答中忽略的问题)。

@page "/"

<input type="search" list="txtSearch" @bind-value="@searchTerm" @onkeydown="@Enter">
<datalist id="txtSearch">

  @foreach (var item in filteredObjText)
   {
         <option>@item.A</option>
         <option>@item.B</option>
         <option>@item.C</option>
         <option>@item.D</option>
   }

</datalist>

@code{
    private string searchTerm { get; set; }
    private List<Item> objText { get; set; } = new List<Item>();
    private List<Item> filteredObjText { get; set; } = new List<Item>();

    private void Enter()
    {
        if (!string.IsNullOrEmpty(searchTerm))
        {
            filteredObjText = objText
                .Where(q => q.A.Contains(searchTerm) ||
                    q.B.Contains(searchTerm) ||
                    q.C.Contains(searchTerm) ||
                    q.D.Contains(searchTerm))
                .ToList();
            if (filteredObjText.Count > 50)
            {
                filteredObjText = filteredObjText.GetRange(0, 50);
            }
            StateHasChanged();
        }
    }

    protected override void OnInitialized()
    {
        //get data from SQL Server
        int i = 1;
        for(int j = 0; j < 100; j++)
        {
            objText.Add(new Item() { A = (i++).ToString(), B = (i++).ToString(), C = (i++).ToString(), D = (i++).ToString()});
        }

        filteredObjText = objText.GetRange(0,50);
    }

    public class Item
    {
        public string A { get; set; }
        public string B { get; set; }
        public string C { get; set; }
        public string D { get; set; }
    }
}

值得注意的是,浏览器捕获字母数字输入,因此要真正触发Enter(),需要按Tab、Shift、Enter或箭头键之一的某种组合。

相关问题