皮皮网

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-指令集，允许对位数据向量执行并行操作，提升数据处理速度。原始类型，新乐玩源码如数字及其他类型，实现了新的可格式化和可解析接口，无需转码开销即可直接格式化和解析为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扩展为开发人员提供跨平台应用程序所需工具，支持最新版本的聚宝盆直销源码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站同时进行，并提供录播。tor商城源码

       本篇内容将着重讨论开发 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 进行更多实践。

       路由组件优化

       路由组件是最基础的组件，官方实现基本功能如路由表和导航。通过分析源码，我们对路由组件进行了改进，具体分析将在后续的文章中提供。

       多语言支持

       当前版本尚未集成官方的dface android源码全球化/本地化功能，项目中实现了多语言服务，动态切换语言。这一过程也加深了我们对状态刷新的理解，后续直播中将分享更多细节。

       文档构建改进

       项目使用 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 | Gitee

WPF使用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 并分享您的想法。