Blazor 和Known 框架学习

• [框架后台首页在\Known.AntBlazor\Admin.razor

•  <AntMenu Accordion="Context.UserSetting.Accordion" Items="UserMenus" OnClick="e=>Context.Navigate(e)" />

• <PageTabs @ref="tabs" Menu="CurrentMenu" Items="TabMenus" />

• Known\Blazor\AdminPage.cs 里定义

  protected override async Task OnInitAsync()

  {

  Info = await Platform.Auth.GetAdminAsync();
  
  UserMenus = GetUserMenus(Info?.UserMenus);
  

  }

  select * from SysModule where Enabled='True'

• 自定义页面—编辑模块，选择目标为【自定义】，代码xxx, 对应的razor文件名也是xxx，razor文件放在PMS.Shared 项目里，@inherits BaseTabPage

• razor更改后要点热重载才生效

• @Language["App.SubTitle"] 多语言在哪里改— PMS.share 项目的locales\zh-CN.json里

• razor 组件的属性 attribute 是这样定义的： @code { [Parameter] public LoginFormInfo Model { get; set; }}

• 子组件的属性，这样子组件的html由父组件控制 public RenderFragment HeaderTemplate { get; set; }

• razor 页面头部，可以指定路由类似 @page '/counter'

• @bind指令比较智能，它大概可以知道你需要绑定标签的哪个属性，例如：将其绑定到input标签时，它会绑定value属性。而将其绑定到checkbox中，它则自动绑定checked属性。@bind:format="dd-MM-yyyy"

• 若要处理来自组件的 UI 事件并使用数据绑定，该组件必须是交互式的。 默认情况下，Blazor 组件从服务器静态呈现，这意味着它们生成 HTML 以响应请求，否则无法处理 UI 事件。 可以通过使用 @rendermode 指令应用交互式呈现模式，使组件具有交互性。可以将 @rendermode 指令应用于组件定义：razor @rendermode InteractiveServer
• Counter 组件是使用交互式服务器呈现。 交互式服务器呈现通过与浏览器的 WebSocket 连接处理来自服务器的 UI 事件。 Blazor 通过此连接将 UI 事件发送到服务器，以便应用组件可以处理这些事件。 然后，Blazor 会使用呈现的更新来更新浏览器 DOM。
• Home.razor 是在哪里调用？

• //Known的config.cs
  
      internal static MenuItem GetHomeMenu()
      {
          return new("Home", "home", PageTypes.GetValueOrDefault("Home")) { Closable = false };
      }

   

• 核心组件 TablePage, 里面有Model， 构建UI的查询框，工具栏，表格

using Known.Extensions;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

namespace Known.Blazor;

class TablePage<TItem> : BaseComponent where TItem : class, new()
{
    [Parameter] public TableModel<TItem> Model { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        if (Model.QueryColumns.Count > 0 || Model.Toolbar.HasItem)
        {
            builder.Div("kui-top", () =>
            {
                UI.BuildQuery(builder, Model);
                UI.BuildToolbar(builder, Model.Toolbar);
            });
        }
        builder.Div("kui-table", () => UI.BuildTable(builder, Model));
    }
}

 

访问本地存储LocalStorage,在项目 Known\wwwroot\script.js 定义js方法

export class KBlazor {

    //Storage
    static getLocalStorage(key) {
        return localStorage.getItem(key);
    }
    static setLocalStorage(key, value) {
        if (value)
            localStorage.setItem(key, JSON.stringify(value));
        else
            localStorage.removeItem(key);
    }
}

在 Known\Blazor\JSService.cs 定义类

    public async Task<T> GetLocalStorageAsync<T>(string key)
    {
        var value = await InvokeAsync<string>("KBlazor.getLocalStorage", key);
        return Utils.FromJson<T>(value);
    }

    public Task SetLocalStorageAsync(string key, object value) => InvokeVoidAsync("KBlazor.setLocalStorage", key, value);

 调用方法示例

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       await JS.SetLocalStorageAsync("name", "jacky");
       var name = await JS.GetLocalStorageAsync<string>("name");

   }

把表格导出excel  

        // 使用 EPPlus 加载 Excel 文件
        using (ExcelPackage package = new ExcelPackage(new FileInfo(excelFilePath)))
        {

            // 获取所有visible的工作表
            ExcelWorksheet destSheet = package.Workbook.Worksheets[0];
            for (int i = 0; i < complains.Count; i++)
            {
                int RowIndex = i + 2;
                PmsComplain c = complains[i];
                destSheet.Cells["A" + RowIndex].Value = c.Customer;


                destSheet.Cells["B" + RowIndex].Value = c.ErrorDate; //异常发生时间
                destSheet.Cells["C" + RowIndex].Value = c.Process;//反馈工序
               


            var stream = new MemoryStream(package.GetAsByteArray());
            await base.JS.DownloadFileAsync("Export.xlsx", stream);

默认上传最大50MB,要修改的话

program.cs 里的

builder.Services.AddApp(info =>
{
    info.WebRoot = builder.Environment.WebRootPath;
    info.ContentRoot = builder.Environment.ContentRootPath;
    info.IsDevelopment = builder.Environment.IsDevelopment();
    info.Connections[0].ConnectionString = builder.Configuration.GetSection("ConnString").Get<string>();
    info.UploadMaxSize = 1024 * 1024 * 100;
});

known 的config.cs

   public long UploadMaxSize { get; set; } = 1024 * 1024 * 100;