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;