光速入门blazor达到“能用”标准，主要是用这套框架，文档没法直接模糊搜内容，只能一个个点开找，且某些个人常用场景实在很难找到咋实现的，所以记录下常用的，避免反复查找的同时也希望能节省一下后来者的时间，面向和我一样对blazor只有个大概概念，切迫切需要光速上手落地实际东西的萌新

文档会时不时更新，欢迎分享小技巧或者使用知识点 💛

相关应该有用的资料

• Blazor基础之组件通信

• BB框架浏览器全局事件

Table的一些属性

• 常规Table模板，方便复制

<Table class="table-users" TItem="PlayerInfoEntity"
       @bind-SelectedRows="SelectedItems"
       Height="600"
       IsPagination="true"
       PageItemsSource="@PageItemsSource"
       OnSaveAsync="OnSaveAsync"
       RenderMode="TableRenderMode.Table"
       IsFixedHeader="true"
       IsStriped="true"
       IsBordered="true"
       ShowToolbar="true"
       ShowDefaultButtons="true"
       ShowDeleteButton="true"
       ShowPageInfo="true"
       ShowAddButton="true"
       ShowSearchButton="true"
       ShowExtendButtons="true"
       ShowExtendEditButton="true"
       ShowExtendDeleteButton="true"
       ShowLoadingInFirstRender="true"
       ShowSkeleton="true"
       AddModalTitle="🙄 添加"
       EditModalTitle="🤩 编辑"
       ShowEmpty="true"
       AllowDragColumn="true"
       IsMultipleSelect="true"
       OnQueryAsync="OnQueryAsync">

SelectedItems 对象记得需要new, PageItemsSource 其实就是这个 的效果，传int集合即可

EditTemplate · 表单

反常规思维注意事项❗❗❗❗❗

AvatarUpload组件

• 在使用AvatarUpload组件时注意， @bind-Value="@context.Avatar" 无法在save的时候直接获取到UploadFile的PrevUrl值，也就不能直接依靠context.Avatar ，目前我的处理方式是再上传图片的时候存个变量save再次单独手动赋值一下 示例代码点我查看,OnSaveAsync 方法代码

Slect组件

• 使用Slect组件下拉注意，OnQueryAsync 配合 @bind-Value="@context.ServerId" 绑定只会显示value值，不会显示text值，这就意味着需要一个再建一个input来显示text值，而@bind-Value只负责改变value值（虽然有点怪，不能直接通过value显示text，但好像设计是如此，详情看我提的 [ISS]
• Select组件新思路

1. bind-value 绑定 SelectedItem

  private SelectedItem? ServerDropDownSelectItem { get; set; } = new();

2. 给Table 加 OnEditAsync="OnEditAsync" 事件（也就是点击编辑按钮时，界面还没渲染时的事件）

3. 在事件里手动赋值

        /// <summary>
        /// 点击编辑按钮时
        /// </summary>
        /// <param name="model"></param>
        /// <returns></returns>
        private async Task OnEditAsync(PlayerInfoEntity model)
        {
            //图片手动赋值
            if (!string.IsNullOrWhiteSpace(model.Avatar))
            {
                PreviewFileList = new() { new UploadFile { PrevUrl = model.Avatar } };
                CurrentImageUrl = model.Avatar;
            }

            //下拉框手动赋值
            if (model.ServerInfo is null) return;
            ServerDropDownSelectItem.Text = model.ServerInfo.ServerName;
            ServerDropDownSelectItem.Value = model.ServerId.ToString();
        }

• (https://github.com/dotnetcore/BootstrapBlazor/issues/2190)）

• 分享一下我的SaveToFile写法（改自示例）

private CancellationTokenSource? ReadToken { get; set; }

public async Task<bool> SaveToFile(UploadFile file)
        {
            var ret = false;
            string filePath = $"/upload/images/";
            string fileName = $"{DateTime.Now.ToString("yyyyMMddHHmmss")}_{file.GetFileName()}";
            string pathToWwwroot = HostEnvironment!.WebRootPath;
            string saveFilePath = $"{pathToWwwroot}{filePath}".Replace("\\", "/");           
            string saveFileFull = Path.Combine(saveFilePath, fileName);

            ReadToken ??= new CancellationTokenSource();
            ret = await file.SaveToFileAsync(saveFileFull, ImageMaxFileLength, ReadToken.Token);
            if (ret)
            {
            //读当前地址，例如本地就是：localhost:端口
                file.PrevUrl = $"{AppSettings.app(new string[] { "SiteOption", "Url" })}{filePath}{fileName}";
                CurrentImageUrl = file.PrevUrl;
            }
            else
            {
                var errorMessage = $"{"保存图片失败"} {file.OriginFileName}";
                file.Code = 1;
                file.Error = errorMessage;
                await ToastService.Error("上传图片", errorMessage);
            }
            return ret;
        }

行属性

ShowExtendButtons 显示行操作按钮
ShowExtendEditButton 显示行编辑操作按钮
ShowExtendDeleteButton 显示行删除操作按钮

• 效果

• 回调方法属性

• OnQueryAsync

c#
private async Task<QueryData<实体名称>> OnQueryAsync(QueryPageOptions options)
        {
            
            var queryPageInfo =  查询数据源;
            return new QueryData<实体名称>()
            {
                Items = queryPageInfo.数据源的集合
                TotalCount = queryPageInfo.数据源集合总数
                IsFiltered = false,
                IsSorted = false,
                IsSearch = false                  
            };
        }

• 数据绑定属性

• 选中的对象 @bind-SelectedRows="绑定的对象"

瞎捉摸的小技巧

• 最好定义一个公共基类，定义一些常用的方法，举例：

        /// <summary>
        /// 获取table查询数据
        /// </summary>
        /// <param name="pageDto"></param>
        /// <returns></returns>
        public QueryData<T> GetQueryData(ResPageDto<T> pageDto)
        {
            return new QueryData<T>()
            {
                Items = pageDto.Data,
                TotalCount = pageDto.Total,
                IsFiltered = false,
                IsSorted = false,
                IsSearch = false
            };
        }

我是直接类泛型，ResPageDto 是我的分页查询返回实体结构，这个主要作用就是转为BB框架分页所需的QueryData类型,💥💥记得.cs继承自己封装的父类后，razor页面也要加上 @inherits BotComponentBase<PlayerInfoEntity> ，主要是 @inherits 作用就继承

视觉类

• 更好的输入框体验，比普通input看起来更舒服

示例代码
  <FloatingLabel DisplayText="玩家正版ID" @bind-Value="@context.Name" TValue="string" IsSelectAllTextOnFocus="true" />