分层 Blazor 组件

Blazor 组件是使用 Razor 语言编写而成，具体方式与生成 MVC 视图大致相同，而这正是让开发人员真正感兴趣的地方所在。 虽然标记帮助器很有用，但仍存在一些编程缺陷，而 Blazor 组件则绝妙地消除了这些缺陷。在本文中，我将生成新的 Blazor 组件，以通过 Bootstrap 4 框架服务显示模式对话框。 在此过程中，我将处理 Blazor 模板化组件和级联参数。 模式对话框 目的是要创建包装 Bootstrap 模式对话框组件的 Blazor 可重用组件。 总结 级联值专为分层组件而设计，但同时分层的模板化组件实际上是开发人员应编写的最常见类型 Blazor 组件。

Blazor-Navigating 组件

Navigating组件，其功能是当 Blazor 应用程序在切换页面时的中间等待界面，可能由于网络缓慢，或其他原因导致。 在App.razor中设置跳转等待过程中的界面，我们做一个延时的界面看看实际的效果 在 Blazor Web App 任何呈现模式的每页/组件交互位置的项目中，Navigating 组件是无效的。

创建 SpreadJS Blazor 组件

比较通用的 JavaScript 电子表格组件，可以轻松地使用、显示并通过数据绑定提供实时数据更新。 绿色 = 正 红色 = 负 创建 SpreadJS Blazor 组件 在将 SpreadJS 放入 Blazor 应用程序之前，我们必须首先创建一个 Blazor 组件来包含 SpreadJS。 想要创建组件，首先要创建一个 Razor 类库： 为简单起见，您可以将其命名为“SpreadJS_Blazor_Lib”： 创建项目后，我们需要将 SpreadJS 文件复制到“wwwroot”文件夹 values in the spreadsheet activeSheet.setValue(4, 1, stock.value); activeSheet.setValue(5,

Blazor-Navigating组件

Navigating组件，功能是当 Blazor 应用程序在切换页面时的中间等待界面，可能由于网络缓慢，或其他原因导致。 在 Blazor Web App 任何呈现模式的每页/组件交互位置的项目中，Navigating 组件是无效的。

Blazor创建TabControl组件

创建一个Blazor TabControl组件，有两个目标知识点： Pass data into a RenderFragment to give it context. 下面看最终效果图： 实操开始： 请先创建一个Blazor项目（Blazor Client或者Server皆可，我们以Blazor Server为例）， 第一步，创建两个组件：TabControl和TabPage TabPage组件有一个父TabControl属性引用（属性名Parent，添加CascadingParameter特性）。 TabControl组件： 文件路径：. ChildContent { get; set; } } TabPage组件： 文件路径：. 原文作者：blazor university 原文链接：https://blazor-university.com/templating-components-with-renderfragements

Blazor-NavigationLock组件

组件主要用于锁定导航，在当前页面导航到内部目标 URL 之前，会执行OnBeforeInternalNavigation 事件。 在 NavigationLock 组件上还具有一个ConfirmExternalNavigation 参数，用于设置导航到目标 URL 是否弹出确认提示框。 使用方法 NavigationLock组件需要在自动呈现模式+全局交互位置才能触发 @page "/NavigationLock"

NavigationLockPage

Blazor-组件路由事件

(3) 在 Blazor WebApp 中，任何呈现模式的交互位置为每页/组件时，单击当前页面上的链接进行转向，不会触发RegisterLocationChangingHandler()方法注册导航事件 但是使用 RegisterLocationChangingHandler()方法注册的事件在每页/组件交互位置下是不会被触发。 WebApp 中组件路由守卫，二者区别如下： 触发时机： (1) RegisterLocationChangingHandler()方法：导航正在发生之前运行，导航还未发生转向，还未跳转到目标 URL 触发条件： (1) LocationChanged 事件可以在任何的 Blazor 项目中通过代码和链接都可以被触发。 (2) RegisterLocationChangingHandler()方法注册的事件在 WebApp 任何呈现模式+每页/组件交互位置项目中链接不可触发，但代码可以触发。

ASP.NET Core Blazor进阶1：高级组件开发

本文将深入探讨Blazor中的高级组件开发技术，包括渲染片段、动态组件、错误边界和虚拟化组件，帮助您构建更强大、更灵活的Blazor应用。 1.渲染片段（RenderFragment）1.1基本概念RenderFragment是Blazor中用于动态渲染UI内容的核心概念，它允许组件接收并渲染来自父组件的标记内容。 中的四个高级组件开发特性：渲染片段（RenderFragment）：提供了灵活的组件内容注入机制动态组件：支持运行时组件类型解析和渲染错误边界：优雅地处理组件树中的异常虚拟化组件：优化大数据集的性能表现这些高级特性能够帮助您构建更加健壮 、灵活和高性能的Blazor应用程序。 在实际开发中，建议根据具体需求选择合适的模式，并注意性能优化和错误处理。以上就是《ASP.NETCoreBlazor进阶1：高级组件开发》的全部内容，希望你有所收获。关注、点赞，持续分享。

Blzor Bootstrap Blazor 组件库

Bootstrap Blazor 组件库 一套基于 Bootstrap 和 Blazor 的企业级组件库 项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架： 使用 C 支持 Net5 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。 本项目是利用 Bootstrap 样式进行封装的 UI 组件库 生态伙伴 WTM 快速开发框架，设计的核心理念就是”尽一切可能提高开发效率“。 目前 WTM 快速开发框架已深度集成 Blazor 欢迎大家使用 传送门 开发环境搭建 安装 .net core sdk 最新版 官方网址 安装 Visual Studio 2019 最新版 官方网址 获取本项目代码 BootstrapBlazor 相关资源 Blazor 官方文档 生成 Blazor Web 应用 什么是 Blazor 练习 - 配置开发环境 Blazor 组件 练习 - 添加组件

Blazor-内置输入组件

封装的输入组件 InputCheckbox：表示复选框。 InputDate：表示类型为 date 的日期选择框。 InputFile：表示文件上传。 InputNumber：表示数字框。

Blazor-设置组件焦点

在Blazor中，ElementReference类型的作用是提供对HTML DOM元素的引用，以便在C#代码中通过JavaScript互操作（JS Interop）操作特定元素。

Blazor-父子组件传值

父组件传值给子组件 在子组件中可以使用[Parameter]特性将组件中的属性暴露出来，让调用方可以控制特性所标记的属性的值，在调用方可以直接传具体的值，也可以传变量，这里我们传入变量就可以完成父组件给子组件传值的操作 按照我们的预期，应该首先显示的info为1，点击按钮后为2 初始显示： 点击按钮后： 结果和我们的预期一致，下来我们看看怎么子组件给父组件传值 子组件传值给父组件 子组件传值给父组件的思路类似于委托 在Blazor中做了一个规范的要求，让我没来进行传值。 需要用到@bind指令和EventCallback类型来实现，我们看看代码示例 子组件：我们在子组件中添加了按钮并执行回调方法。 按照 Blazor约定，EventCallback类型的参数属性(InfoChanged)必须以要传递的参数属性(Info)命名，并带有“Changed”后缀。 运行证明不使用@bind-Info，我在子组件的暴漏的属性中传入父组件的info变量，之后在子组件中直接进行修改，不会影响父组件的值。

.NET5 Blazor初探

前阵子.Net5发布后跟着做了个小的东西，也是无意间看到了Blazor后，抱着测试看看是否占用学习时间太多的想法做了个Demo，于是有这今天这篇。 实现效果 ? 说起Blazor的Slogan：将.Net技术带回浏览器。 组件 Blazor应用基于组件。Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。 组件类通常以 Razor 标记页（文件扩展名为 .razor）的形式编写。Blazor 中的组件有时被称为 Razor 组件。 Razor 是一种语法，用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。 总结一下 Blazor对于.Net的想做前端的开发人员来说学习成本真的很低。 我个人的学习方法，想要快速学习掌握新的知识---最好的方式就是直接在项目中实践，然后再针对不明白的东西返回来学基础。

MAUI使用Masa blazor组件库

组件库的引用 组件库的添加参考Masa官网[5]，这里写下Dotnet9后台[6]添加记录： 2.1 UI共享库的修改-Dotnet9.WebApp UI共享库 Dotnet9.WebApp 添加Maas.Blazor Maas.Blazor组件引用 添加文件. 时间戳功能的添加 在做Blazor Server版本网站时，有过一次时间戳功能开发的介绍(点击阅读[9])，代码很简单，这里不再细说，不能再水了.... 4. 总结 Masa.Blazor组件库已经添加，并恢复了时间戳功能，下一步，就是继续搭建网站后台了，使用Masa.Blazor搭建框架喽。 [4]Masa Blazor官网: https://masa-blazor-docs-dev.lonsid.cn/ [5]Masa官网: https://masa-blazor-docs-dev.lonsid.cn

值得推荐的Blazor UI组件库

前言 　　本文主要是推荐一些开源、免费、实用、美观的Blazor UI组件库，提供给广大C#/.NET开发者们学习和使用（注意：排名不分先后，都是十分优秀的开源框架和项目）。 /microsoft/fluentui-blazor 项目介绍 Microsoft Fluent UI Blazor是一个基于Blazor的组件库，提供了一系列的UI组件以及Fluent UI的设计系统 该库可以帮助开发人员快速构建现代化的 Web 应用程序，并且与 Blazor 技术相结合，可以实现高效而灵活的单页应用程序开发。 提供如布局、弹框标准、Loading、全局异常处理等标准场景的预置组件。从更多实际场景出发，满足更多用户和场景的需求，最大的减少开发者的时间成本。缩短开发周期提高开发效率。 的 UI 组件库，BlazorStrap的组件也支持响应式布局、主题定制以及多语言支持等功能，可以帮助开发者快速搭建出美观、易用的 Web 应用程序。

BCVP开发者说第5期：QuartzCore.Blazor

沉静岁月，淡忘流年 1项目简介 QuartzCore.Blazor QuartzCore.Blazor 是一个基于 .Net5 开发的轻量级 Quartz 作业配置中心，实践应用 Ant Design - 使用 FreeSql 作为数据库访问组件，亦可学习交流。 ） （任务作业新增） 核心功能 1、实时时间区间执行统计 2、应用管理 3、健康检查 4、作业管理 5、执行日志 6、参数管理 7、提供Cron表达式验证 8、其他 使用Freesql为数据访问组件。Freesql对多数据库的支持更加强劲，特别是对国产数据库的支持。 provider对照：mysql = MySql sqlite = Sqlite Mongo 注：master分支默认有Mongo组件，运行时需要配置mongo地址，若不需要使用mongo，可以选择no_mongo

微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor

前言 今天大姚给大家分享一个由微软官方开源（MIT License）、免费的Blazor UI组件库：Fluent UI Blazor。 全面的ASP.NET Core Blazor简介和快速入门 Fluent UI Blazor介绍 Fluent UI Blazor是一个基于Blazor的组件库，提供了一系列的UI组件以及Fluent 该库可以帮助开发人员快速构建现代化的 Web 应用程序，并且与 Blazor 技术相结合，可以实现高效而灵活的单页应用程序开发。 Blazor是什么？ Blazor 的目标是让开发人员使用C#编程语言来编写 Web 应用程序，使得C#程序员可以在一个熟悉的编程语言中完成整个应用程序的开发。这样既可以提高开发效率，也可以减少学习成本。 项目源代码 部分UI组件截图 在线使用文档：https://www.fluentui-blazor.net Checkbox InputFile Number field Radio Date &

Blazor-父子组件传递任意参数

在我们从父组件传参数给子组件时，可以通过子组件定义的[Parameter]特性的公开属性进行传值，但是当我们需要传递多个值的时候，就需要通过[Parameter]特性定义多个属性，有没有更简便的方式？ 我们可以使用定义 IDictionary<string,object>类型的参数，并使用[Parameter(CaptureUnmatchedValues =true)]特性进行标注，这样在父组件中嵌套子组件时 子组件：

ParameterChild

@if (Parameters ! Parameters { get; set; } } 我们在子组件中将所有参数展示出来，用于验证参数是否传递成功 父组件： @page "/demoPage" @rendermode InteractiveAuto ParameterChild class="123" x1 ="2"></ParameterChild> @code { } 运行结果： 我们通过运行结果可以看到，参数被正确的传递到了子组件

Blazor-父子组件回调方法

子组件调用父组件方法 在组件中，要实现从父组件向子组件传值，可以在父组件中给参数属性赋值。想要达成这一效果，需要在子组件中使用[Parameter]特性，将属性定义为参数类型的属性。 简单来说就是以下几个步骤： 子组件中定义[Parameter]特性，EventCallback类型的属性，绑定给对应的事件 父组件给EventCallback类型的属性赋值 子组件触发对应的事件将调用EventCallback 从而调用父组件方法 下面看看示例： 子组件：

子组件中

使用AntBlazor组件库快速构建Blazor应用

使用AntBlazor组件库快速构建应用：参考官网示例AntBlazor是一个基于Ant Design的Blazor组件库，提供了一系列优雅且功能强大的组件，适合用于构建现代化的Web应用。 为了帮助你快速上手，本文将参照AntBlazor官网的示例，展示如何在Blazor项目中使用AntBlazor组件库。1. 环境准备1.1 安装Visual Studio确保你已经安装了最新版本的Visual Studio，并选择了“ASP.NET和Web开发”工作负载。 5. 参考AntBlazor官网示例AntBlazor官网提供了丰富的示例和文档，帮助开发者快速上手。你可以访问AntBlazor官网查看更多示例和组件用法。 结论通过使用AntBlazor组件库，你可以快速构建出功能齐全且美观的Blazor应用。