Table组件中主子表如何使用异步方法获取子表数据

[pelva]

Hi，大家好！
在示例文档中 https://www.blazor.zone/table/detail
明细表的数据是用同步方法获取的，可是我的api请求都是异步的，同步方法调异步方法会使UI卡死，子表中配置OnQueryAsync也没有成功
是否可以提供一个异步的示例，
谢谢

[densen2014]

把你的代码贴上来

[pelva]

<DetailRowTemplate>
       <Table  TItem="ApplicationForm_View"  IsPagination="true" IsStriped="true" IsBordered="true" ShowRefresh="false"
      ShowToolbar="false"  style="margin-top:10px;"  OnQueryAsync="@GetDetailDataSource(context)"  Items="@GetDetailDataSource(context)" >   
   <TableColumns Context="Detail">

       <TableColumn @bind-Field="@Detail.Name_view"   />

       <TableColumn @bind-Field="@Detail.ApplyTime" FormatString="yyyy-MM-dd HH: mm: ss" />
       <TableColumn @bind-Field="@Detail.IsPass" ComponentType="@typeof(Switch)" />
       <TableColumn @bind-Field="@Detail.Remark"  />

       <TableColumn @bind-Field="@Detail.ComputerInfoCodeType" />
   </TableColumns>


</Table>
   </DetailRowTemplate>


   private   IEnumerable<ApplicationForm_View> GetDetailDataSource(ActivationCode_View context){
       var opt = new QueryPageOptions()
           {
               IsPage = false
           };
       var searcher = new ApplicationFormSearcher();
     
        return  Task.Run(async()=> await StartSearch<ApplicationForm_View>("/api/ApplicationForm/Search", searcher, opt).ConfigureAwait(false)).GetAwaiter().GetResult().Items;
   }

粘贴了一部分，这样可以吗
StartSearch 是一个异步函数，用于从webapi获取数据， 去掉 .ConfigureAwait(false) 也会卡UI

[densen2014]

.ConfigureAwait(false)).GetAwaiter().GetResult() 在blazor是不能用的, 卡UI

[densen2014]

1. OnQueryAsync Items 不可同时设置两个属性
2. 只用OnQueryAsync就好

OnQueryAsync="@QueryAsync"

简化版

    public override Task<QueryData<TModel>> QueryAsync(QueryPageOptions options)
    {

        IEnumerable<TModel> items = await StartSearch<ApplicationForm_View>("/api/ApplicationForm/Search", searcher, opt);
        return Task.FromResult(new QueryData<TModel>()
        {
            Items = items,
            TotalCount = items.count,
            IsSorted = false,
            IsFiltered = false,
            IsSearch = false
        });

    }

demo

    public override Task<QueryData<TModel>> QueryAsync(QueryPageOptions options)
    {

        IEnumerable<TModel> items = await StartSearch<ApplicationForm_View>("/api/ApplicationForm/Search", searcher, opt);

        var isSearch = options.Searches.Any() || options.CustomerSearches.Any() || options.AdvanceSearches.Any();

        // 处理 Searchable=true 列与 SeachText 模糊搜索
        if (options.Searches.Any())
        {
            //类加入 [AutoGenerateClass(Filterable = true, Sortable = true, TextWrap = true, Searchable = true)] 就能搜索了

            items = items.Where(options.Searches.GetFilterFunc<TModel>(FilterLogic.Or));
        }
        else
        {
            // 处理 SearchText 模糊搜索
            if (!string.IsNullOrEmpty(options.SearchText))
            {
                //TODO : LazyHero SearchText 模糊搜索 未实现
                // items = items.Where(item => (item.Name?.Contains(options.SearchText) ?? false)|| (item.Address?.Contains(options.SearchText) ?? false));
            }
        }


        // 过滤
        var isFiltered = false;
        if (options.Filters.Any())
        {
            items = items.Where(options.Filters.GetFilterFunc<TModel>());

            // 通知内部已经过滤数据了
            isFiltered = true;
        }

        // 排序
        var isSorted = false;
        if (!string.IsNullOrEmpty(options.SortName))
        {
            var invoker = SortLambdaCache.GetOrAdd(typeof(TModel), key => LambdaExtensions.GetSortLambda<TModel>().Compile());
            items = invoker(items, options.SortName, options.SortOrder);
            isSorted = true;
        }

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        if (options.IsPage)
        {
            items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems);
        }
        else if (options.IsVirtualScroll)
        {
            items = items.Skip(options.StartIndex).Take(VirtualScrollPageItemsCache);
        }

        return Task.FromResult(new QueryData<TModel>()
        {
            Items = items,
            TotalCount = total,
            IsSorted = isSorted,
            IsFiltered = isFiltered,
            IsSearch = true
        });

    }

[pelva]

感谢大佬们支持，我使用服务端返回主子表所有数据的方式解决了这个问题。

对于OnQueryAsync="@GetDetailDataSource(v)" 我也测试了，结果报错，如下

Cannot convert type 
'System.Threading.Tasks.Task<BootstrapBlazor.Components.QueryData<ApplicationForm_View>>' to 'System.Func<BootstrapBlazor.Components.QueryPageOptions, System.Threading.Tasks.Task<BootstrapBlazor.Components.QueryData<ApplicationForm_View>>>'

函数签名如下，是函数写得不对吗

  private   async  Task<QueryData<ApplicationForm_View>> GetDetailDataSource(ActivationCode_View context){
      var opt = new QueryPageOptions()
          {
              IsPage = false,
          };
      var searcher = new ApplicationFormSearcher();
   
      return  await StartSearch<ApplicationForm_View>("/api/ApplicationForm/Search", searcher, opt);
  }

如果不给 GetDetailDataSource参数，像下面的写法是可行的，但是没有办法获得context

 OnQueryAsync="@GetDetailDataSource"

private   async  Task<QueryData<ApplicationForm_View>> GetDetailDataSource(QueryPageOptions opt){

[ArgoZhang]

改成 ()=> GetDetailDataSource(v)

[pelva]

感谢大佬，支持，初次使用Blazor，还不太了解

OnQueryAsync="(opt) => GetDetailDataSource(v)"

[densen2014]

改成 options => GetDetailDataSource(v, options)