分层 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”文件夹

Blazor-Navigating组件

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

Blazor-NavigationLock组件

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

NavigationLockPage

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-组件路由事件

(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 本项目是利用 Bootstrap 样式进行封装的 UI 组件库 生态伙伴 WTM 快速开发框架，设计的核心理念就是”尽一切可能提高开发效率“。 目前 WTM 快速开发框架已深度集成 Blazor 欢迎大家使用 传送门 开发环境搭建 安装 .net core sdk 最新版 官方网址 安装 Visual Studio 2019 最新版 官方网址 获取本项目代码 BootstrapBlazor 相关资源 Blazor 官方文档 生成 Blazor Web 应用 什么是 Blazor 练习 - 配置开发环境 Blazor 组件 练习 - 添加组件 数据绑定和事件 练习 - 数据绑定和事件 总结 视频教程 B 站视频集锦 传送门 组件 Blazor 应用基于组件。

Blazor-设置组件焦点

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

Blazor-内置输入组件

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

Blazor-父子组件传值

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

MAUI使用Masa blazor组件库

前置知识 关于Masa Blazor请点击Masa Blazor官网[4]了解： MASA Blazor 基于Material Design和BlazorComponent的交互能力提供标准的基础组件库 组件库的引用 组件库的添加参考Masa官网[5]，这里写下Dotnet9后台[6]添加记录： 2.1 UI共享库的修改-Dotnet9.WebApp UI共享库 Dotnet9.WebApp 添加Maas.Blazor Maas.Blazor组件引用 添加文件. 时间戳功能的添加 在做Blazor Server版本网站时，有过一次时间戳功能开发的介绍(点击阅读[9])，代码很简单，这里不再细说，不能再水了.... 4. 总结 Masa.Blazor组件库已经添加，并恢复了时间戳功能，下一步，就是继续搭建网站后台了，使用Masa.Blazor搭建框架喽。

值得推荐的Blazor UI组件库

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

微软官方开源免费的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开发”工作负载。 参考AntBlazor官网示例AntBlazor官网提供了丰富的示例和文档，帮助开发者快速上手。你可以访问AntBlazor官网查看更多示例和组件用法。 结论通过使用AntBlazor组件库，你可以快速构建出功能齐全且美观的Blazor应用。

Blazor练习 定时刷新组件数据2

[C#] Blazor练习5 定时刷新组件数据 疫情被关在家，只能用小孩上网课的电脑再复习下。 @page "/"

定时刷新数据!

MatBlazor：为 Blazor 和 Razor 组件量身打造的组件库

MatBlazor 是一个专门为 Blazor 和 Razor Components 开发的组件库，基于 Google 的 Material Design 规范实现了一系列常用的交互组件。 MatBlazor 是一个开源项目，提供了一组遵循 Material Design 设计语言的 UI 组件，适用于 Blazor 和 Razor Components 开发。 • 跨平台支持：兼容 Blazor Server 和 Blazor WebAssembly。 • 社区活跃：拥有活跃的开发者社区，持续更新和完善功能。 二、快速入门 1. 是一个功能强大且易用的组件库，能够显著提升 Blazor 和 Razor Components 开发的效率。 无论你是初学者还是资深开发者，都可以从中受益。