Blazor组件
文章平均质量分 78
Densen2014
这个作者很懒,什么都没留下…
展开
-
20行代码写一个简单 Blazor 时钟组件
【代码】20行代码写一个简单 Blazor 时钟组件。原创 2024-07-06 00:51:27 · 143 阅读 · 0 评论 -
Blazor 子组件交互例子
【代码】Blazor 子组件交互例子。原创 2024-02-11 11:04:32 · 227 阅读 · 0 评论 -
Blazor入门100天 : 自做一个手势滑动组件
###0. 我想在blazor模仿app实现触摸返回,下拉刷新 …现在用 blazor 做 app (blazor hybird) 和支持手机浏览页面越来越多, net8 也推出了一个webapp auto模式,可谓是极大的利好, 2024 让auto流行起来, 😃。原创 2024-02-09 12:09:09 · 364 阅读 · 0 评论 -
[一键CV] Blazor 拖放上传文件转换格式并推送到浏览器下载
昨天有个小伙伴发了一个老外java编写的小工具给我,功能是转换西班牙邮局快递Coreeos express的单据格式成Amazon格式,他的需求是改一下程序为匹配转换另一个快递公司MRW格式到Amazon格式,然而我堂堂一个Blazor发烧友,怎么可能去反编译人家的java修改呢?必须直接撸一个Blazor的啊.原创 2023-02-18 00:20:42 · 585 阅读 · 0 评论 -
Blazor入门100天 : 身份验证和授权 (6) - 使用 FreeSql orm 管理ids数据
目录建立默认带身份验证 Blazor 程序角色/组件/特性/过程逻辑DB 改 Sqlite将自定义字段添加到用户表脚手架拉取IDS文件,本地化资源freesql 生成实体类,freesql 管理ids数据表初始化 Roles,freesql 外键 => 导航属性完善 freesql 和 bb 特性本节源码https://github.com/densen2014/Blazor100/tree/Blazor-教程15-6/b16blazorIDS2截图安装 FreeSql.Gen原创 2023-02-23 10:00:00 · 3488 阅读 · 0 评论 -
Blazor入门100天 : 身份验证和授权 (5) - 本地化资源
目录建立默认带身份验证 Blazor 程序角色/组件/特性/过程逻辑DB 改 Sqlite将自定义字段添加到用户表脚手架拉取IDS文件,本地化资源freesql 生成实体类,freesql 管理ids数据表初始化 Roles,freesql 外键 => 导航属性完善 freesql 和 bb 特性原创 2023-02-22 09:30:00 · 535 阅读 · 0 评论 -
Blazor入门100天 : 身份验证和授权 (4) - 自定义字段
目录建立默认带身份验证 Blazor 程序角色/组件/特性/过程逻辑DB 改 Sqlite将自定义字段添加到用户表脚手架拉取IDS文件,本地化资源freesql 生成实体类,freesql 管理ids数据表原创 2023-02-21 09:45:00 · 511 阅读 · 0 评论 -
Blazor入门100天 : 身份验证和授权 (3) - DB改Sqlite
目录建立默认带身份验证 Blazor 程序角色/组件/特性/过程逻辑DB 改 Sqlite将自定义字段添加到用户表脚手架拉取IDS文件,本地化资源freesql 生成实体类,freesql 管理ids数据表初始化 Roles,freesql 外键 => 导航属性完善 freesql 和 bb 特性原创 2023-02-20 09:00:00 · 622 阅读 · 0 评论 -
Blazor入门100天 : 身份验证和授权 (2) - 角色/组件/特性/过程逻辑
欢迎转载、使用、重新发布,但务必保留文章署名AlexChow,不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接.Maui Blazor 中文社区 QQ群:645660665。BA & Blazor QQ群:795206915。添加相关配置,这里带过就好,不展开讨论.FreeSql QQ群:4336577。新建Razor组件: LogInfo。密码感觉不爽,那我们改一下策略。原创 2023-02-19 10:00:00 · 1251 阅读 · 0 评论 -
Blazor入门100天 : 身份验证和授权 (1) - 建立带身份验证工程
欢迎转载、使用、重新发布,但务必保留文章署名AlexChow,不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接.Maui Blazor 中文社区 QQ群:645660665。BA & Blazor QQ群:795206915。FreeSql QQ群:4336577。作为IDS数据库连接。原创 2023-02-18 10:30:00 · 1858 阅读 · 3 评论 -
Blazor组件自做十四 : Blazor FileViewer 文件预览 组件
Blazor FileViewer 文件预览 组件 目前支支持 Excel(.docx) 和 Word(.xlsx) 格式示例:https://www.blazor.zone/fileViewershttps://blazor.app1.es/fileViewers原创 2022-12-23 09:24:30 · 1001 阅读 · 0 评论 -
Bootstrap Blazor 实战 Dialog 对话框组件快速入门
Dialog 对话框组件快速入门原创 2022-12-21 01:59:54 · 1705 阅读 · 1 评论 -
Blazor组件自做十三: VideoPlayer 视频播放器
Video.js 是一个具有大量功能的流行的视频和音频 JavaScript 库,今天我们试试集成到 Blazor .原创 2022-12-15 09:48:10 · 1464 阅读 · 2 评论 -
Blazor组件自做九 : 使用JS隔离制作蓝牙打印组件(通用跨平台隔空打印小票/标签方案)
如果我告诉您网站能以安全和隐私保护的方式与附近的蓝牙设备进行通信,您会怎么想?如此一来,心率监测器、会唱歌的灯,甚至海龟都可以直接与网站交互了。到目前为止,仅有部分针对特定平台的应用可以实现与蓝牙设备的交互。Web Bluetooth API 旨在改变这一现状,以期将此功能赋予 Web 浏览器。笔者所在的POS行业更是经常用到各种蓝牙小票机,蓝牙标签机,如此一来整个 Blazor ,app客户端都不用了, 很是利好啊! 话不多说,开整!原创 2022-10-03 05:03:33 · 1197 阅读 · 0 评论 -
如何在 Blazor 中使用 cookie 和展示隐私条例横幅
在以下示例中,将显示 cookie 同意横幅以通知您接受 cookie。按照以下步骤在 Blazor 中创建同意 cookie。Configure 配置HttpContextAccessor和CookiePolicyOptions,创建同意cookie隐私条例横幅[Program.cs]using Microsoft.AspNetCore.Http;using Microsoft.Extensions.DependencyInjection;...builder.Services.Conf原创 2022-05-13 22:59:23 · 886 阅读 · 0 评论 -
BootstrapBlazor实战 Menu 导航菜单使用(2)
实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面原创 2022-04-26 07:52:24 · 1410 阅读 · 2 评论 -
BootstrapBlazor实战 Menu 导航菜单使用(1)
实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面原创 2022-04-25 08:41:05 · 1446 阅读 · 0 评论 -
Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
轻量级 Toast 弹窗DEMO https://www.blazor.zone/toasts基础用法: 用户操作时,右下角给予适当的提示信息<ToastBox class="d-block" Options="@Options1" />@code{ Options1 = new ToastOption { Title = "保存数据", IsAutoHide = false, Content = "保存数据成功,4 秒后自动关闭" };}Toast 手动关闭: 不会自原创 2022-04-17 07:51:03 · 1232 阅读 · 1 评论 -
Blazor Bootstrap 组件库浏览器通知组件介绍
通知组件通过浏览器API发送通知信息 , 桌面浏览器表现为右下角系统提示框弹出消息, 移动浏览器表现为弹窗或者到消息列表, blazor页面不在前台也可以通过本组件提醒用户.DEMO https://www.blazor.zone/notifications小提示注意: 出于安全考虑,当网页请求发送通知时,用户会被提示进行授权使用 BrowserNotification 静态方法直接调用 Dispatch 方法private NotificationItem Model { get; set;原创 2022-04-16 06:52:25 · 394 阅读 · 0 评论 -
Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍
地理定位/移动距离追踪组件通过浏览器 API 获取定位信息DEMO https://www.blazor.zone/geolocations小提示注意: 出于安全考虑,当网页请求获取用户位置信息时,用户会被提示进行授权。注意不同浏览器在请求权限时有不同的策略和方式。Windows10 在未开启定位的情况下无法获取位置。示例dotnet new blazorserver -o b07geodotnet add b07geo package BootstrapBlazordotnet add b原创 2022-04-15 02:59:07 · 607 阅读 · 0 评论 -
Blazor Bootstrap 组件库语音组件介绍
Speech 语音识别与合成通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS)本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用其组件包Demo https://www.blazor.zone/speechsNuget 包安装使用 nuget.org 进行 BootstrapBlazor.AzureSpeech 组件的安装.NET CLIdotnet add package BootstrapBlazor.AzureSpeec原创 2022-04-13 09:25:29 · 2209 阅读 · 0 评论 -
Blazor 使用拖放(drag and drop)上传文件 , 粘贴文件上传
在很多上传文件的应用实例中, 都可以看到[拖放文件到此上传]这种骚功能 ,今天我们就来试试Blazor能不能完成这个想法.简述HTML5拖放拖放是HTML5标准的一部分,任何元素都能够拖放,也能够将本地的文件拖放到页面上。设置元素可拖放为了使元素可拖动,把 draggable 属性设置为 true<img draggable="true" />拖放事件有7个拖放事件可以捕获,如下:dragstart:开始拖元素触发dragenter:元素拖进可drop元素(绑定drop事件的原创 2022-04-11 00:36:15 · 654 阅读 · 0 评论 -
Blazor 全屏按钮 全屏服务 (BootstrapBlazor组件库)
Blazor 简介Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架。和前端同学所熟知的 Vue、React、Angular 有巨大差异。其最大的特色是使用 C# 代码(理论上可以是 .NET 生态的任何语言)代替 JavaScript 来实现逻辑。使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。共享使用 .NET 编写的服务器端和客户端应用逻辑。将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。与新式托管平台(如 D原创 2022-04-07 05:10:12 · 1100 阅读 · 0 评论 -
BootstrapBlazor实战 通用导入导出服务(Table组件)
1.本文主要内容为给Blazor工程构建通用导入导出服务类基础工程构建取自 [BootstrapBlazor实战 10分钟编写数据库维护] 项目,使用到的orm为freesql,导入导出库为Magicodes.IE,还有封装了Table组件的内存数据服务LazyHeroDataService的Densen.FreeSql.Extensions.BootstrapBlazor库.主要实现功能(Table组件):[编辑][添加][删除]数据[导出]现在表格数据[清空]数据[选择文件]上传并导入[原创 2022-04-05 12:46:58 · 2746 阅读 · 0 评论 -
BootstrapBlazor+FreeSql实战 Chart 图表使用(2)
接上篇 BootstrapBlazor实战 Chart 图表使用(1)13.添加必备的库使用 nuget.org 进行 BootstrapBlazor 组件安装, FreeSql库,Newtonsoft.Jsondotnet add b06chart package Densen.FreeSql.Extensions.BootstrapBlazordotnet add b06chart package FreeSql.Provider.Sqlitedotnet add b06chart packa原创 2022-04-04 08:18:49 · 1772 阅读 · 1 评论 -
BootstrapBlazor实战 Chart 图表使用(1)
BootstrapBlazor组件 Chart 图表介绍通过给定数据,绘画各种图表的组件本文主要介绍三种图表使用:折线图,柱状图,饼图1.新建工程新建工程b06chart,使用 nuget.org 进行 BootstrapBlazor 组件安装, Chart 库,字体. 将项目添加到解决方案中dotnet new blazorserver -o b06chartdotnet add b06chart package BootstrapBlazordotnet add b06chart p原创 2022-04-03 10:35:02 · 2965 阅读 · 2 评论 -
BootstrapBlazor+FreeSql实战 Tree树形控件使用(2)
继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess1.Freesql处理树形分类无限级分类(父子)是一种比较常用的表设计,我们直接设计表中包含 parent_id 字段,然后递归查询,fsql内置了原创 2022-04-02 07:49:07 · 698 阅读 · 0 评论 -
Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件
1. 运行截图演示地址2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件2.1 常规操作,懒加载js库, 😃export function addScript(url) { let scriptsIncluded = false; let scriptTags = document.querySelectorAll('head > script'); scriptTags.forEach(scriptTag =原创 2022-04-02 07:48:17 · 455 阅读 · 0 评论 -
Blazor组件自做七: 使用JS隔离制作定位/持续定位组件
1. 运行截图演示地址2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代桌面和移动端都支持.包括MAUI Blazor 😃navigator.geolocation.getCurrentPositionnavigator.geolocation.watchPosition2.1 获取定位其中持续定位watchPosition方法会通过wrapper.invokeMeth原创 2022-04-02 07:47:44 · 454 阅读 · 0 评论 -
Blazor组件自做六: 使用JS隔离封装Baidu地图
1. 运行截图演示地址2. 在文件夹wwwroot/lib,添加baidu子文件夹,添加baidumap.js文件2.1 跟上一篇类似,用代码方式异步加载API,脚本生成新的 body > script 元素添加到页面文档,使用异步加载回调 initMapsG 方法初始化地图.var map = null;var containerid = null;export function addScript(key, elementId, dotnetRef, backgroundColor,原创 2022-04-01 06:20:01 · 871 阅读 · 1 评论 -
Blazor组件自做五: 使用JS隔离封装Google地图
运行截图演示地址正式开始1. 谷歌地图API谷歌开发文档开始学习 Maps JavaScript API 的最简单方法是查看一个简单示例。以下示例显示以澳大利亚新南威尔士州悉尼为中心的地图。异步加载例子JS代码let map;function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, z原创 2022-04-01 06:19:33 · 626 阅读 · 0 评论 -
Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
运行截图演示地址:响应式:感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad正式开始1. 在文件夹wwwroot/lib,添加signature_pad子文件夹,里面下载库文件(文件文末源码里可复制) signature_pad.umd.js复制到此文件夹. 最终版本参考如下+signature_pad |-signature_pad.umd.js2. 添加app.js文件+sign原创 2022-04-01 06:18:44 · 1003 阅读 · 0 评论 -
Blazor组件自做三 : 使用JS隔离封装ZXing扫码
本文基础步骤参考前两篇文章Blazor组件自做一 : 使用JS隔离封装viewerjs库Blazor组件自做二 : 使用JS隔离制作手写签名组件1. 在文件夹wwwroot/lib,添加zxing子文件夹,里面下载库文件(文件文末源码里可复制) qrcode.min.js和zxing.min.js复制到此文件夹. 最终版本参考如下+zxing |-qrcode.min.js |-zxing.min.js2. 添加zxingjs.js文件+zxing |-zxingjs.js原创 2022-04-01 06:18:13 · 1744 阅读 · 0 评论 -
Blazor组件自做二 : 使用JS隔离制作手写签名组件
本文相关参考链接JavaScript 模块中的 JavaScript 隔离Blazor JS 隔离优势导入的 JS 不再污染全局命名空间。库和组件的使用者不需要导入相关的 JS。即不需要再在ssr的 Pages/_Host.cshtml 或 Pages/_Layout.cshtml ,wasm的 wwwroot/index.html 里写 第一遍载入静态资产请求包含值为 no-cache 或 max-age(值为零 (0))的 标头。真正页面组件使用才载入真实大小文件。继续原创 2022-04-01 06:17:39 · 821 阅读 · 0 评论 -
BootstrapBlazor实战 Tree树形控件使用(1)
实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess1.Tree 树形控件用清晰的层级结构展示信息,可展开或折叠基础用法基础的树形结构展示<Tree Items="@Items" OnTreeIte原创 2022-04-01 06:15:00 · 2397 阅读 · 0 评论 -
Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)
接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2)7. 使用配置文件指定监听地址打开 appsettings.json 文件,加入一行 "UseUrls": "http://localhost:8000;http://0.0.0.0:8000;",完整文件如下{ "UseUrls": "http://localhost:8000;http://0.0.0.0:8000;", //加入这句 "Logging": { "LogLevel": {原创 2022-04-01 04:06:06 · 358 阅读 · 0 评论 -
Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2)
接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (1)5. 添加目录浏览功能打开Program.cs文件,在 app.UseStaticFiles(); 之后加入一句 app.UseDirectoryBrowser(); 就可以启动默认的目录浏览功能, 我们这里加入一点限制,只浏览Upload文件夹,并且把默认的界面英文改为中文,并且按修改时间逆序排序.右键打开NuGet包管理,安装 AME.SortedDirectoryChs 包, 这是一个DirectoryBrowse原创 2022-04-01 04:05:05 · 416 阅读 · 0 评论 -
Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (1)
1. 前言今天有小伙伴咨询内网环境手机等移动设备怎样快速跟主机交换文件,群友齐齐出力讨论:es文件管理器开web服务,网盘中转,QQ发文件,各种方案各抒己见,好不繁华.突然想到前段时间Net6正式发布后,带来了一个新的IBrowserFile接口, Blazor 文件上传变得非常便利,小的应用场景直接抛弃传统的Controller形式上传文件,话不多说,直接开撸.运行截图2. IBrowserFile接口属性解释ContentType获取浏览器指定的文件的 MIME 类型原创 2022-04-01 04:03:39 · 827 阅读 · 0 评论