1.微软官方开源免费的源码Blazor UI组件库 - Fluent UI Blazor
2..netcommunitytoolkit从8.0.0版本开源,新增了哪些亮
3.如何用 Blazor 实现 Ant Design 组件库(二)
4.MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(8)-Ant Design Blazor前端框架搭建
5.Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
6.WPF使用Blazor的快速案例
微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
微软官方为广大开发者带来了开源且免费的Blazor UI组件库 - Fluent UI Blazor,它为构建现代化Web应用程序提供了强大的解读支持。
Fluent UI Blazor是源码一款基于Blazor技术的组件库,集成了Fluent UI的解读设计风格。它有助于开发者利用C#和Razor语法快速开发出高效、源码灵活的解读济宁单位溯源码怎么查单页应用程序(SPA),尤其对于C#程序员来说,源码它简化了Web应用的解读开发过程,降低了学习成本,源码提高了开发效率。解读
通过Blazor的源码C#编译能力,开发者可以使用C#直接操控HTML DOM,解读而非JavaScript,源码实现了更直观的解读编程体验。要了解更多组件演示和在线使用指南,源码可访问fluentui-blazor.net。
项目源代码地址包含CheckboxInputFileNumber、fieldRadioDate & TimeButtonDialogWizard等实用组件,你可以亲自探索并参与到项目中,为其发展贡献力量。同时,该项目已被收录到C#/.NET/.NET Core优秀项目精选中,关注这个精选列表,可以随时掌握最新动态和最佳实践,提升开发水平。
优秀项目和框架的发掘和分享是大家共同的责任,如果你发现其他优秀项目,欢迎提交PR,让我们一起为社区贡献更多价值。一起来挖掘和推广这些优秀的项目,共同推动技术进步。
.netcommunitytoolkit从8.0.0版本开源,新增了哪些亮
在.NET 8中,开发者将体验到一系列性能提升,包括动态配置文件引导优化(PGO)代码生成器的引入,该功能可根据实际使用情况优化代码,显著提高性能,最高可达%。支持AVX-指令集,允许对位数据向量执行并行操作,提升数据处理速度。原始类型,gcvt 源码如数字及其他类型,实现了新的可格式化和可解析接口,无需转码开销即可直接格式化和解析为UTF-8。
.NET Aspire是一个用于构建云原生应用的堆栈,集成遥测、弹性、配置和运行状况检查等功能,提供从第一天到第一百天轻松管理云原生应用的基础依赖。访问预览版本了解更多。
.NET 8容器增强功能简化容器使用体验,每个.NET映像包含非root用户,通过单行配置提高安全性。非root的.NET SDK工具可以发布容器映像,映像大小更小,部署更快。选择安全强化的Chiseled Ubuntu映像变体,减少攻击面。
原生AOT(按需编译)让开发者无需等待JIT(即时)编译器在运行时编译代码,仅部署应用程序所需的代码,使应用程序能够在不允许使用JIT编译器的受限环境中运行。
人工智能功能让.NET应用程序融入生成式人工智能和大型语言模型,通过.NET SDK中的开箱即用AI功能和与多种工具的无缝集成轻松利用AI。系统库和示例模板为开发人员提供了轻松入门的途径,包括客户聊天机器人、增强检索、Azure AI服务开发等应用。
Blazor为.NET开发者提供了全栈Web应用程序构建能力,同时使用服务器和客户端处理Web UI需求,通过优化页面加载时间、提升可扩展性和用户体验,实现Blazor Server和Blazor WebAssembly之间的自动切换,增强身份验证、授权和身份管理功能。
.NET MAUI提供单一项目系统和代码库构建跨平台应用,支持WinUI、Mac Catalyst、iOS和Android,本机AOT(实验性)支持针对类似iOS的平台。Visual Studio Code扩展为开发人员提供跨平台应用程序所需工具,支持最新版本的kinfu 源码iOS和Android。
C# 简化语法以提高开发效率,允许在任何类和结构中创建主构造函数,无需样板代码初始化字段和属性,支持简洁的数组、跨度和其他集合类型创建,提供默认lambda参数,内联数组用于性能优化。
.NET 8引入反射改进,提供函数指针元数据访问,支持函数指针与类型信息的集成,减少源代码更改,支持AOT Web应用的配置绑定生成器,针对Android应用的AOT编译减小应用大小,代码分析工具验证正确使用.NET库API。
新功能包括时间抽象、UTF8改进、加密支持SHA-3哈希基元、基于流的ZipFile方法等,提供更高效、灵活的开发体验。
如何用 Blazor 实现 Ant Design 组件库(二)
前言
在前两周,我们探讨了如何将 Ant Design 组件库与 Blazor 框架结合使用,得到了许多朋友的支持与参与。在直播中,我们介绍了 AntBlazor 项目的概览,并分享了 Blazor 框架的基础知识。通过直播,我们展示了如何利用 Blazor 实现二维码多端登录,但这次直播没有深入细节,时间长达4小时。直播录播地址为:bilibili.com/video/BV1u...,同时,您也可以在钉钉群中观看回放。
在清明假期的最后一天,我们将再次进行直播,但时长将更合理,不会占用大家太多时间。请在观看直播前准备好您的问题。直播将在钉钉群和B站同时进行,并提供录播。源码快讯
本篇内容将着重讨论开发 Blazor 项目的价值以及 AntBlazor 项目带来的益处。
Blazor 项目是否值得投入?
Blazor 是一个新颖的框架,目前仍处于 WebAssembly 的预览阶段,将于5月日的 Build 大会发布正式版。因此,许多人在推广 AntBlazor 项目时提出了质疑:现在投入精力开发组件库是否值得?是否会像 Webform 一样只有微软自己使用,最终被放弃?是否应该等到成熟后再了解?
需要了解的是,Blazor 是一个全能框架,具备了如路由、依赖注入、状态管理、国际化/本地化、权限控制、GC、调试工具等组件,这些在已有前端框架中几乎是全功能的。尽管在生态上仍存在发展空间,但其潜力巨大。作为受欢迎的开源项目,自然会吸引开发者丰富其生态,特别是在前端领域,生态发展更容易。
围绕现有核心组件,我们可以通过实践为 Blazor 生态做出补充。AntBlazor 项目正是致力于丰富 Blazor 生态的开源项目之一。
开发 Blazor 项目的价值
AntBlazor 项目不仅为开源实践提供了一个平台,还帮助开发者学习 Blazor 及其他技能。项目自 Blazor WebAssembly 3.1 preview 阶段创建,实验性开发组件和基于 WebAssembly 的文档项目。随着每个 preview 版本的发布,项目尽量集成最新特性。
除了官方发布的特性,项目还创造性地增强其“前端气息”,运用 Blazor 进行更多实践。
路由组件优化
路由组件是最基础的组件,官方实现基本功能如路由表和导航。通过分析源码,我们对路由组件进行了改进,具体分析将在后续的文章中提供。
多语言支持
当前版本尚未集成官方的sadp源码全球化/本地化功能,项目中实现了多语言服务,动态切换语言。这一过程也加深了我们对状态刷新的理解,后续直播中将分享更多细节。
文档构建改进
项目使用 Blazor WebAssembly 构建静态文档站点。为了兼顾 .NET 项目与开放性,源文件放置在项目目录外,通过 MSBuild Tasks 进行文件拷贝和 Node.js 调用。最近,我们正在用 .NET Core 开发一个 CLI 工具,用于生成文档所需的元数据,以减少对 Node.js 的依赖。
持续优化 CI 流程
优化 CI 流程,让开发者更容易参与项目,集中精力于组件开发。通过优化,我们提升了项目的可持续发展能力,获得了丰富的 Github Actions 使用经验和 shell 脚本技巧。
总结
通过实践,我们不仅学习了更多技能,也培养了更通用的能力。每一项有意义的改进都成为丰富 Blazor 生态的重要元素。AntBlazor 项目的成功展示了 Blazor 能够促进开源的 .NET 技能,使开发者能够利用 .NET 进行前端开发。
欢迎关注 Blazor,参与 AntBlazor 项目,加入 Blazor 中文社区。如果您对 Blazor 感兴趣,或者想为开源项目贡献自己的力量,请加入我们,共同推动 Blazor 生态的发展。
MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(8)-Ant Design Blazor前端框架搭建
前言
选用Ant Design Blazor作为前端框架搭建ToDoList系统,因其设计规范与风格符合使用经验。此篇将指导如何搭建系统前端。
Ant Design Blazor源码地址:github.com/ant-design-b...
MongoDB从入门到实战相关教程链接
YyFlight.ToDoList项目源码地址:github.com/YSGStudyHard...
安装.NET 7SDK
若本地未安装.NET 7 SDK,需先进行安装,可从dotnet.microsoft.com/en...获取。
新建YyToDoBlazor应用
注意:应用选用Wasm托管模式开发。
AntDesign.Templates:开箱即用的中台前端/设计解决方案,包含丰富组件和布局,适用于构建管理系统。它基于Ant Design Pro框架,并为Blazor项目提供模板和脚手架。
安装AntDesign.Templates模板
在项目目录下,通过cmd打开终端,运行以下命令安装模板:
模板创建 Ant Design Blazor Pro 项目
配置模板参数
BasicLayout.razor 定义网站整体布局,包含导航、菜单、内容和页脚,提供统一风格的页面模板。
预览效果展示
Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
项目截图 演示地址 演示响应式 感谢szimek撰写的signature_pad.js项目,来自github.com/szimek/signa... 正式开始:在wwwroot/lib目录下,添加signature_pad子文件夹,并下载库文件(文件文末提供源码复制)signature_pad.umd.js,最终版本参照如下。
添加app.js文件。
代码中`wrapperc.invokeMethodAsync("signatureResult", imgBase)`用于回调c#中的签名canvas结果。 js代码 打开Components文件夹,新建SignaturePad.razor.css文件。 打开Components文件夹,新建SignaturePad.razor组件。 参考阅读:Blazor组件参数 组件参数: 在ASP.NET Web Forms中,可以通过公共属性传递参数和数据到控件。这些属性可以在标记中通过特性设置,也可在代码中直接设置。Razor组件以类似方式工作,但组件属性必须使用[Parameter]特性标记才能被视为组件参数。 定义Counter组件,名为IncrementAmount的组件参数,用于指定每次单击按钮时Counter应递增的数量。 定义SaveBaseBtnTitle的组件参数,用于设置或获取[保存为base]按钮的文本。 定义OnResult的组件参数,用于手写签名结果回调。 在Blazor中指定组件参数,像在ASP.NET Web Forms中一样使用特性。 完整代码示例 在Pages文件夹中添加SignaturePadPage.razor文件,用于演示组件调用。 在_Imports.razor中加入引用组件的命名空间。 在首页引用组件演示页或Shared/NavMenu.razor中添加导航。 F5运行程序。 提示:复杂签名可能导致传输数据量大,SSR时可能出现断流显示reload错误,启用以下配置解决此问题。 至此,成功使用JS隔离封装signature_pad签名组件。 Blazor组件自做系列:Blazor组件自做一:使用JS隔离封装viewerjs库
Blazor组件自做二:使用JS隔离制作手写签名组件
Blazor组件自做三:使用JS隔离封装ZXing扫码
Blazor组件自做四:使用JS隔离封装signature_pad签名组件
Blazor组件自做五:使用JS隔离封装Google地图
Blazor组件自做六:使用JS隔离封装Baidu地图
Blazor组件自做七:使用JS隔离制作定位/持续定位组件
Blazor组件自做八:使用JS隔离封装屏幕键盘kioskboard.js组件运行截图
项目源码:Github | GiteeWPF使用Blazor的快速案例
在WPF中使用Blazor进行文件编辑操作,首先需要安装Masa Blazor模板。使用CMD指令进行模板安装。
接着,新建一个Masa Blazor WPF App,并添加Monaco编辑器。在Index.razor.cs文件中,实现对FullName的set拦截,接收上级组件传递的CascadingParameter参数,对当前的Value进行更新。在Index.razor文件中,实现与cs方法和参数的绑定,并通过bind-value更新UI显示的值。打开Shared/MainLayout.razor文件,添加文件选择器,用于选择文件。使用Microsoft.Win.OpenFileDialog打开文件选择器,并指定选择文件类型。当文件选择器返回true时,fullName的值通过CascadingValue组件传递给所有子组件。
实际使用效果中,可以通过文件选择器选择文件,并在编辑区域进行文件内容的编辑。当对cs文件进行更新时,UI显示的值会自动同步更新。
技术交流方面,可以加入qq群:,或联系wx:wku(请备注技术交流)。源码下载地址为:code-token.oss-cn-beijing.aliyuncs.com...
一套基于 Ant Design 和 Blazor 的开源企业级组件库
Ant Design Blazor是一套开源的、基于Ant Design和Blazor的企业级组件库,采用MIT License,旨在为开发者提供免费且具有Ant Design风格的组件选择。
Blazor是一种以.NET和Razor为基础的新兴Web框架,它利用最新的Web技术和.NET框架的优势,通过C#编写Web应用,大幅提升了开发效率与用户体验,同时提高了代码的可维护性。
对于使用Ant Design风格的开发者,Ant Design Blazor是一个理想的选择。它结合了Blazor的现代Web开发功能和Ant Design的视觉设计,提供了丰富的组件库。
如果你对Blazor和Ant Design风格感兴趣,Ant Design Blazor组件库是值得一试的。通过访问项目源码地址,你可以深入了解各个组件的功能和用法。
该项目已收录于C#/.NET/.NET Core优秀项目和框架精选中。关注此精选页面,可以让你随时获取C#、.NET和.NET Core领域的最新动态与最佳实践,优化开发过程。
如果你发现了优秀的项目或框架,欢迎积极参与,通过提交PR推荐或自荐,帮助提升这些项目和框架的可见度,共同促进社区的发展。
基于Bootstrap Blazor开源的.NET通用后台权限管理系统
本文将介绍一个基于Bootstrap和Blazor开源的.NET通用后台权限管理系统,BootstrapAdmin,它提供了一种兼容主流浏览器的全响应式设计,支持多设备访问,包括电脑、平板和手机。Blazor多Tabs模式使得权限控制细化到页面内的各个元素,如按钮、表格和文本框。
BootstrapBlazor是一个企业级组件库,它继承了Bootstrap的美观设计,还增添了超过种实用组件,极大地提升了开发效率。系统包含了一系列关键功能模块,如个人中心、网站设置、用户管理等,涵盖了菜单管理、角色管理、组织管理等全方位管理功能。
该系统支持多种数据库,包括SQLite、SqlServer、MySql、Oracle和MongoDB,方便开发者根据实际需求进行选择。直接下载源码并运行,即可体验预设的SQLite支持的项目效果,通过启动BootstrapAdmin.Web项目即可查看。
想要更深入探索该项目的实用特性和详细信息,可以访问其开源地址,同时别忘了给予项目支持,为更多开发者提供参考。这个项目已被收录在C#/.NET/.NET Core优秀项目和框架精选,关注这一精选列表,可以及时掌握该领域的新技术和最佳实践,提升开发水平。
优秀项目和框架的发掘和推广是持续进行的,欢迎大家积极提交PR,让有价值的项目不再被忽视。GitHub地址为:github.com/YSGStudyHard...
使用 SortableJS 组件的 Blazor 可排序列表
作者:Burke Holland 排版:Alan Wang
在 Web 应用程序中,一个常见功能部分是可排序列表。Blazor 开发者们可能怀念 SortableJS 这个强大的 JavaScript 库。为了填充这个空白,Burke Holland 开发了一个名为 Blazor Sortable 的组件,将其开源在 GitHub 上,供开发者使用。
Blazor Sortable 是一个社区组件,不是 Microsoft 的官方组件,但它提供了一种将 SortableJS 的功能集成到 Blazor 应用中的方法。Fluent UI 团队正在努力在未来版本的 Blazor 中集成可排序组件。
访问演示页面:[提供演示链接]
Burke 和 Jon Galloway,通过“Burke Learns Blazor”直播在 Twitch 和 .NET YouTube 上,共同致力于重建 theurlist.com 应用程序。如果您愿意加入他们的行列,提供帮助,将会非常欢迎。
在 Blazor 中构建可排序列表组件的需求促使 Burke 开发了 Blazor Sortable。SortableJS 提供了丰富的功能,包括排序、列表之间的排序、项目克隆、过滤、自定义动画、腰部支持等。
Blazor Sortable 包含了源代码和演示,用户只需要下载 Shared/SortableList.razor、Shared/SortableList.razor.css 和 Shared/SortableList.razor.js 文件。SortableList 组件是一个通用组件,需要提供项目列表和定义如何呈现列表中每个项目的模板。
为了使列表变得可排序,只需处理 OnUpdate 事件并自定义排序逻辑。每当列表排序时,OnUpdate 事件会传递包含已移动项目旧索引和新索引的元组,通过 SortList 方法解构元组并移动列表中的项目。
Blazor Sortable 支持多种功能,如列表之间的排序、克隆项目、过滤项目等。Burke 提供了一个示例,展示了如何在两个列表之间进行排序。
在设置 SortableList 的样式时,您可以覆盖默认样式以适应特定需求。默认样式会隐藏“ghost”元素,产生拖动间隙。您可以修改 SortableItemTemplate 子项内的样式,但必须使用“::deep”修饰符确保样式生效。
HTML5 的原生拖放支持在某些方面有局限性,无法提供理想的排序体验。因此,Blazor Sortable 选择使用 SortableJS 的 JavaScript 解决方案。如果您希望重新启用 HTML5 支持,只需在 SortableList.razor.razor.js 文件中删除 forceFallback: true 属性。
Blazor Sortable 是一个开源社区项目,欢迎开发者探索其功能并提供反馈。Burke 鼓励大家使用 Blazor Sortable 来创建具有高级排序功能的 Blazor 应用程序。您可以通过 GitHub 页面查看 Blazor Sortable 并分享您的想法。