-
[框架后台首页在\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;
标签:razor,框架,builder,组件,UI,key,Known,Blazor From: https://www.cnblogs.com/zitjubiz/p/18094018