Maybe_ch的博客

本文介绍了几种常见的封装输入组件，包括：复选框(InputCheckbox)、日期选择框(InputDate)、文件上传(InputFile)、数字框(InputNumber)、单选按钮(InputRadio)、单选按钮组(InputRadioGroup)、下拉菜单(InputSelect)、单行文本框(InputText)以及多行文本框(InputTextArea)。这些组件为表单开发提供了标准化的解决方案，简化了不同类型输入字段的开发工作。

Blazor中的EditContext是管理表单状态和验证的核心类，它跟踪表单字段修改状态并提供事件通知机制。通过绑定模型对象，可以初始化EditContext来监控表单字段变化。示例展示了EditContext的基本用法，包括获取字段定义、使用OnFieldChanged事件响应字段值变化，以及如何在提交事件中处理EditContext参数。关键功能包括：1) 绑定模型对象来跟踪表单状态；2) 使用Field方法获取字段信息；3) 通过OnFieldChanged事件捕获字段变更；4) 在提交事件中直接使

Blazor预呈现技术通过在服务器端预先渲染页面提升WebAssembly应用的加载速度和SEO优化。它支持四种模式：None（静态）、Server（交互式SSR）、WebAssembly（交互式CSR）和Auto（Server+WebAssembly），其中后三种支持预呈现。开发人员可通过@rendermode参数控制预呈现行为，如禁用(prerender:false)或启用(prerender:true)该功能。预呈现实现了从静态HTML到交互式SPA的平滑过渡，同时允许组件在Server或WebAss

Ant Design Blazor是一个基于Blazor的开源UI组件库，提供Ant Design风格的界面元素。它支持快速创建项目，通过dotnet模板即可生成完整的前端解决方案。安装时使用dotnet new --install AntDesign.Templates命令，创建项目时可选择是否包含全部Pro页面(-f参数)、指定托管模型(-ho)和样式类型(--styles)。示例展示了如何创建包含完整Pro页面的MyAntDesignApp项目，并成功运行web应用。该框架适合需要快速构建企业级Bla

本文对比了Blazor框架中<EditForm>组件与原生HTML <form>的使用差异。<EditForm>通过Model属性关联数据模型，支持双向数据绑定和内置验证机制，提供OnSubmit等事件处理，无需整页刷新，优化了SPA体验。而原生<form>需要手动处理数据绑定和验证，默认会整页刷新。文章还展示了交互式SSR和静态SSR两种模式下<EditForm>的具体实现方法，包括模型绑定、表单提交和参数配置。通过功能对比，说明了<Edi

本文介绍了Blazor中的三种表单提交方式：1) 传统HTML表单提交，使用标准HTML表单元素但会导致页面刷新；2) 交互式SSR提交，采用@bind双向绑定和@onsubmit事件处理，支持防伪令牌(AntiforgeryToken)防止CSRF攻击；3) 静态SSR提交，使用[SupplyParameterFromForm]属性绑定模型。三种方式各适用于不同场景，其中SSR方式能更好地与Blazor集成，避免页面刷新。代码示例展示了表单定义、字段绑定和提交处理的具体实现。

组件主要用于锁定导航，在当前页面导航到内部目标 URL 之前，会执行OnBeforeInternalNavigation 事件。在 OnBeforeInternalNavigation 事件中，具有一个LocationChangingContext 类型的参数，该类型的参数与使用RegisterLocationChangingHandler()方法注册的事件处理程序中的参数类型是一样的。

Navigating组件，其功能是当 Blazor 应用程序在切换页面时的中间等待界面，可能由于网络缓慢，或其他原因导致。在App.razor中设置跳转等待过程中的界面，我们做一个延时的界面看看实际的效果。我们添加了一个跳转的延时操作。

导航正在发生之前运行，导航还未发生转向，还未跳转到目标 URL，可在此方法注册的事件处理程序中进行拦截，可阻止导航或进一步转向。在当前页面上单击链接或通过代码执行 NavigateTo()方法都可以转向目标 URL，但要注意如下事项：(1)，通过单击链接或通过代码执行NavigateTo()方法都可以转向目标 URL，并且都会触发RegisterLocationChangingHandler()方法注册的导航事件。(2) 在中，任何呈现模式的交互位置为。

本次主要来说下通过对当前URL进行，添加、更改或删除一个或多个查询参数的U R L 字符串的方法。

URl的获取使用 NavigationManager 的 Uri 属性获取当前页面的URI,内容简单我们直接来上代码我们在上面的代码中获取了绝对的url和基础url绝对URL基本URL。

OnNavigateAsync获取或设置导航到新页面之前应调用的处理程序，是发生在导航到目标 URL 之前触发的事件。(1)在浏览器的地址栏中手动输入访问页面的 URL 会触发(2) 在应用中单击链接会触发，会触发。(3) 使用NavigationManager.NavigateTo()方法以代码的方式访问页面会触发。

我们这里使用{id:int}限制路由，id为int类型，并且路由参数 id 对应的 Id 属性也必须是 int 类型。我们试试能否正常访问int类型路由可以正常访问使用字符串无法访问到该路由。

Blazor 的路由模板是定义应用中不同页面或组件访问路径的一种方式。通过路由模板，你可以管理应用程序的导航结构，支持基本路由、参数路由、子路由和区域路由等功能。我们为访问组件使用如这个页面我们设置了路由为/demoPage/demoPage是可以直接访问 DemoPage.razor 组件的.

在Blazor中，ElementReference类型的作用是提供对HTML DOM元素的引用，以便在C#代码中通过JavaScript互操作（JS Interop）操作特定元素。在Razor中设置焦点我们需要用到ElementReference类型的变量，使用@ref指令引用到设置焦点HTML的元素。在代码中elementReference我们可以理解为就是input元素，相当于dom元素一样。

Navigating组件，功能是当 Blazor 应用程序在切换页面时的中间等待界面，可能由于网络缓慢，或其他原因导致。在App.razor中设置跳转等待过程中的界面，我们做一个延时的界面看看实际的效果。我们添加了一个跳转的延时操作。

我们在Program文件中注册了三个级联值，第一个级联值为设置名称，后面两个级联值都设置了名称注意：如果我们使用的是Auto的模式，那么需要注册两次才能进行使用，组件首次访问组件，组件使用InteractiveAuto呈现模式，该模式第一次访问该组件是交互式SSR，是在服务器上运行的，获取对象来自在主项目的 Program.cs 中注册的级联值。第二次及以后访问该组件，则是在浏览器的WebAssembly 中运行的，获取的对象值来自在*.Client 项目的Program.cs 中注册的级联值。

我们可以使用@attributes标签对多属性值赋值进行简化，通过一个字典直接进行赋值，这个功能毕竟简单，我们直接用代码来做示例。

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

Blazor开发中，@attributes指令通过字典展开简化了组件元素属性绑定。传统方式需逐个声明和绑定属性，而@attributes允许将属性集中管理在字典中，实现声明式注入。这种方法显著提升代码简洁性，支持动态扩展和批量管理属性，同时实现属性配置与渲染逻辑的解耦。两种方式最终渲染效果相同，但字典展开方式更易于维护和扩展，尤其适合需要动态修改或批量管理属性的场景。

在Blazor中，ElementReference类型的作用是提供对HTML DOM元素的引用，以便在C#代码中通过JavaScript互操作（JS Interop）操作特定元素。在Razor中设置焦点我们需要用到ElementReference类型的变量，使用@ref指令引用到设置焦点HTML的元素。在代码中elementReference我们可以理解为就是input元素，相当于dom元素一样。

在Blazor 项目中，微软对事件的事件参数进行了封装，所有的事件参数类都必须继承 EventArgs 基类。如我们不清楚当前的方法封装的事件到底是什么类型的？我们可以使用EventArgs来接收参数，之后断点查看下EventArgs的子类类型，这样就可以判断出来事件的类型。我们这里使用的是@onclick可以看到封装的类型为MouseEventArgs在 Razor 组件中，事件参数只需要在事件处理程序上定义，在调用时无需要传入任何值。

在子组件中可以使用[Parameter]特性将组件中的属性暴露出来，让调用方可以控制特性所标记的属性的值，在调用方可以直接传具体的值，也可以传变量，这里我们传入变量就可以完成父组件给子组件传值的操作，示例如下：父组件：在父组件中引用子组件我们将父组件中的字段info传入了子组件，并添加了按钮用于更新父组件中的info值。按照我们的预期，应该首先显示的info为1，点击按钮后为2初始显示：点击按钮后：结果和我们的预期一致，下来我们看看怎么子组件给父组件传值。

今天我们来说说<select>标签的用法，我们还是从一个示例代码开始上述代码中我们绑定了list，用于显示列表，并使用了multiple对列表进行了展开，我们看看效果可以看到数据都被展示出来了，下来我们看看其他的相关用法。

在有些场景下我们可能需要绑定DateTime的数据类型，并根据我们的需要显示相应的日期格式，下来我们看看怎么设置数据的日期格式我们先不做格式化处理看看默认的格式，看可以得到如下的结果我们想只显示年月日，以-作为分割，我们对代码添加format这次我们就可以看到，日期被进行了格式化了。

bind可以实现双向绑定，有时候我们可能需要处理一些逻辑，这时候我们可以将set和get分开来进行绑定，使用@bind:get和@bind:set来实现，进行分别处理。@bind:get指定要绑定的字段，属性@bind:set指定给字段，属性设置值的回调，绑定c#方法与@bind一致，@bind:set也默认使用onchange事件。

不同类型项目注册服务的位置

调用方法可以呈现组件UI，使用方法也会增加成本开销。在Razor组件的呈现中，大部分的方法是不需要通常情况下，Blazor会在状态变化时自动触发重新渲染，因此只有在需要显式控制重新渲染时（如异步操作或外部事件处理）才需要使用。如果在 Blazor 的生命周期方法（如或）中，框架会自动检测并调用，因此在这些地方不需要手动调用。自动呈现由ComponentBase 基类完成。需要手动调用的时机(1) 在异步处理程序中调用了多个异步方法。

若类实现了接口，则必须实现接口中的所有成员，编写具体的代码，否则无法编译通过。我们需要实现接口中的GetName(),在Blazor中，组件的本质也是类，和正常的实现接口是一致的。我们在组件中用@implements实现了IStudent接口，我们可以看到报错了，提示没有实现接口成员。实现接口，这里我们创建一个接口，试试用组件实现接口，创建一个IStudent接口。我们试试让Razor组件继承某个基类，先创建一个基类。我们发现组件报错了，提示没有找到合适的方法重写。我们实现下接口成员，报错恢复正常。

我们可以把TypeparamModule.razor的list数据暴露出来，这里可以使用[Parameter]特性，使用[Parameter]特性需要将字段修改为属性，我们做如下修改。我们创建一个ShowModule组件用来展示TypeparamModule.razor组件，我们可以在组件中设置TypeparamModule的泛型类型。我们可以使用@typeparam指令做一个通用的子组件，模板化组件，通过传入泛型类型，让模板组件的通用性更强。下面我们创建一个子组件来说说@typeparam指令的用法。

在Razor 组件中，可以通过 @inject 指令将服务的实例注入到 Razor 组件类中。这段代码中我们注入了系统类ILogger并在构造函数中进行调用，我们来试试结果。我们发现程序报错了，注入的logger的值为空，产生了报错。在上面的过程中调用是有问题的，在Razor组件的生命周期中，在实例化组件类的过程中没有注入ILogger类型的实例，依赖性是在组件实例化完成后才可以使用，在实例化类的过程中必须要调用构造函数，所以在构造函数中不能使用依赖项。

带有 value属性的标记都可以使用@bind 绑定，等非输入标记，无法使用@bind 指令的，默认绑定了 onchange 事件，onchange 事件是指在输入框中输入内容之后，当失去焦点时执行。我们用一段代码来看看@bind的作用从运行的动画可以看到，当输入框失去焦点时，会触发onchange事件，改变strName的值。

今天我们来说说Blazor选择语句和循环语句。下面我们以一个简单的例子来讲解相关的语法，我已经创建好了一个Student类，以此类来进行语法的运用因为我们需要交互性所以我们将类创建在*.client目录下。

在Blazor开发中，Razor 组件具备两种重要的呈现方式，分别是静态呈现和交互式呈现。

让我们还是从创建项目开始，来一起了解下Blazor Web App的项目情况。

接上次这次我们继续来说说剩余的项目文件。

今天我们来创建一个BlazorWebAssmbly项目，来看看项目结构是如何得，我们创建带模板得项目，会创建出一个demo，来看看项目结构。创建的项目可以直接启动运行，首次启动会看见加载的过程，这个过程是正在下载.NET的捆绑包等资源。

今天我们来说说Blazor的三种部署方式，如果大家还不了解Blazor，那么我先简单介绍下BlazorBlazor 是一种 .NET 前端 Web 框架，在单个编程模型中同时支持服务器端呈现和客户端交互性：● 使用 C# 创建丰富的交互式 UI。● 共享使用 .NET 编写的服务器端和客户端应用逻辑。● 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。● 使用 .NET 和 Blazor 生成混合桌面和移动应用。