1.使用 SortableJS 组件的源码 Blazor 可排序列表
2.基于Bootstrap Blazor开源的.NET通用后台权限管理系统
3.如何用 Blazor 实现 Ant Design 组件库(二)
4.MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(8)-Ant Design Blazor前端框架搭建
5..netcommunitytoolkit从8.0.0版本开源,新增了哪些亮
6.webrtc使ç¨netcore
使用 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 并分享您的想法。
基于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...
如何用 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、调试工具等组件,这些在已有前端框架中几乎是全功能的。尽管在生态上仍存在发展空间,但其潜力巨大。作为受欢迎的开源项目,自然会吸引开发者丰富其生态,datagridview合计行源码特别是在前端领域,生态发展更容易。
围绕现有核心组件,我们可以通过实践为 Blazor 生态做出补充。AntBlazor 项目正是致力于丰富 Blazor 生态的开源项目之一。
开发 Blazor 项目的价值
AntBlazor 项目不仅为开源实践提供了一个平台,还帮助开发者学习 Blazor 及其他技能。项目自 Blazor WebAssembly 3.1 preview 阶段创建,实验性开发组件和基于 WebAssembly 的文档项目。随着每个 preview 版本的发布,项目尽量集成最新特性。
除了官方发布的特性,项目还创造性地增强其“前端气息”,运用 Blazor 进行更多实践。
路由组件优化
路由组件是最基础的组件,官方实现基本功能如路由表和导航。通过分析源码,我们对路由组件进行了改进,具体分析将在后续的文章中提供。
多语言支持
当前版本尚未集成官方的全球化/本地化功能,项目中实现了多语言服务,动态切换语言。这一过程也加深了我们对状态刷新的理解,后续直播中将分享更多细节。
文档构建改进
项目使用 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 定义网站整体布局,包含导航、菜单、内容和页脚,提供统一风格的页面模板。
预览效果展示
.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方法等,提供更高效、灵活的开发体验。
webrtc使ç¨netcore
WebRTC æ¯ä¸ç§å®ç°æµè§å¨å¯¹çéä¿¡çææ¯ï¼éè¦å¨å端åå端å®ç°ãè .NET Core æ¯ç¨äºå¼å跨平å°åºç¨ç¨åºçæ¡æ¶ãå¦æè¦å° WebRTC åºç¨å° .NET Core ä¸ï¼éè¦è¿è¡ä»¥ä¸å·¥ä½ï¼
1. å¨å端å®ç° WebSocket åè®®ï¼WebRTC éè¦éè¿ WebSocket è¿è¡ä¿¡ä»¤ä¼ è¾ï¼å¯ä»¥ä½¿ç¨ ASP.NET Core SignalR æ¡æ¶æ¥å®ç° WebSocketã
2. å®ç° STUN å TURN æå¡ï¼WebRTC ä¸éè¦ä½¿ç¨ STUN å TURN æå¡æ¥ç©¿é NAT åé²ç«å¢ï¼å¯ä»¥ä½¿ç¨ C# çè¯è¨å¼å STUN æ TURN æå¡å¨ã
3. ä½¿ç¨ WebRTC éä¿¡åè®®ï¼WebRTC åºäº RTP/RTCP åè®®è¿è¡é³è§é¢æµä¼ è¾ï¼å¨ .NET Core ä¸ä¹éè¦å®ç°è¯¥åè®®ã
4. ä½¿ç¨ WebRTC åºï¼ä¸ºäºç®å WebRTC çå¼åï¼å¯ä»¥ä½¿ç¨ç¬¬ä¸æ¹ WebRTC åºï¼ä¾å¦ Google ç libwebrtcãè¿äºåºæä¾äº API æ¥å£å示ä¾ä»£ç ï¼ä¾¿äºå¨å端å®ç° WebRTC åè½ã
éè¦æ³¨æçæ¯ï¼WebRTC å¨å端åå端é½æ¶åå°å¾å¤çææ¯ç»èï¼éè¦ä¸°å¯çç»éªåæè½æè½è¿è¡å¼åãå æ¤ï¼å¦ææ¨æ²¡æç¸å ³çç»éªåæè½ï¼å»ºè®®å¯»æ¾ä¸ä¸çææ¯å¢éæå¨è¯¢æå¡æ¥å¸®å©æ¨å®æ WebRTC å¨ .NET Core ä¸çå¼åã
一套基于 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推荐或自荐,帮助提升这些项目和框架的可见度,共同促进社区的发展。
微软官方开源免费的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,让我们一起为社区贡献更多价值。一起来挖掘和推广这些优秀的项目,共同推动技术进步。