首页 > 其他分享 >Blazor 和Known 框架学习

Blazor 和Known 框架学习

时间:2024-04-26 18:13:35浏览次数:22  
标签:razor 框架 builder 组件 UI key Known Blazor

  • [框架后台首页在\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

相关文章

  • Node.js Express 框架(2)
    1.读取文件并返回给客户端res.sendFile(path):读取文件并返回给客户端,适合静态页面app.get("/",function(req,res){res.sendFile(path.join(__dirname,"index.html"))})res.render(path,data):读取文件,配合模版引擎可以将数据渲染到文件中并返回给客户端,适合动态页面......
  • 不只有 Spring,这四款 Java 基础开发框架同样值得关注! 审核中
    Java开发不只有Spring,今天给大家推荐几个同样优秀的Java基础开发框架,为日常项目开发提供更多的选择。答应我,请不要再叫我Spring小子了,​好吗?项目概览:Guice:轻量级依赖注入框架Javalin:轻量级Java和KotlinWeb框架Quarkus:云原生时代高性能Java框架Vert.x:构建响应......
  • dotnet 简单方法在一个进程内同时跑起 WPF 和 ASP.NET Core 框架
    从设计架构上,无论是WPF还是ASP.NETCore框架,都是在dotnet运行时上层的应用,两个框架处于平级的结构。理论上讲,两个平级的框架只要不存在特殊的情况,都是能够相容存在的。本文将和大家介绍一个非常简单的方法,在一个进程内同时跑起WPF和ASP.NETCore框架在一个进程内同时跑......
  • nvidia官方AI框架软件的命令行操作接口 —— NVIDIA GPU Cloud (NGC) CLI
    NVIDIAGPUCloud(NGC)CLI安装介绍地址:https://org.ngc.nvidia.com/setup/installers/cli安装好后需要输入自己的NVIDIANGC的APIKEY,该信息在下面地址中生成:https://org.ngc.nvidia.com/setup/api-key......
  • Poco框架实操:获取节点属性的高效技巧(一)
    此文章来源于项目官方公众号:“AirtestProject”版权声明:允许转载,但转载必须保留原链接;请勿用作商业或者非法用途一、前言上期推文我们介绍了PocoUI树下的节点关系,以及通过节点关系去寻找我们所需要节点的方法,那么本周我们来分享一下,当我们寻找到所需要节点后,能获取到什么信......
  • Taurus.MVC 微服务框架 入门开发教程:项目集成:7、微服务间的调用方式(调整):引用程序集及
    前言:今天补充一下 Taurus.MVC微服务教程,介绍一下微服务中针对RPC方面调整或新增的功能。之前系列文章目录:Taurus.MVC微服务框架入门开发教程:项目集成:1、服务端:注册中心、网关(提供可运行程序下载)。Taurus.MVC微服务框架入门开发教程:项目集成:2、客户端:ASP.NET Core(C#)项目......
  • dotnet 如何将 Microsoft.Maui.Graphics 对接到 UNO 框架
    本文将和大家介绍如何将Microsoft.Maui.Graphics对接到UNO框架里面。一旦完成Microsoft.Maui.Graphics对接,即可让UNO框架复用现有的许多绘制的基础设施和现有基础库,且可以更进一步与MAUI打通众所周知,在UNO里面有大量的项目类型都是基于Skia作为底层渲染引擎构建出......
  • 学习 Avalonia 框架笔记 如何创建一个全屏置顶的 X11 应用窗口
    本文记录我从Avalonia框架里面学到如何创建一个全屏置顶的X11应用窗口的方法开始之前,先从Avalonia或CPF里面拷贝足够的代码,这部分代码可以从本文末尾找到下载方法设置全屏的核心代码是以下三行ChangeWMAtoms(false,XLib.XInternAtom(display,"_NET_WM_STATE_HIDDEN",......
  • dotnet 修复多框架 TargetFrameworks 包含不受支持平台导致构建失败
    本文将告诉大家如何修复dotnet项目里的多框架TargetFrameworks如果包含了当前系统无法支持的平台时,如何进行跳过。解决在Linux平台构建时提示MacCatalyst不受支持而构建失败故事的背景是我期望在GitHub的Action里面构建一个项目,我期望能够在Windows和Linux和Ma......
  • 七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
    前言上一章节我们引入BootstrapBlazorUI组件完成了EasySQLite后台界面的基本架子的搭建,本章节的主要内容是Blazor班级管理页面编写和接口对接。七天.NET8操作SQLite入门到实战详细教程第一天SQLite简介第二天在Windows上配置SQLite环境第三天SQLite快速入门......