甄文超

TNT 数字生活

blazor


BootstrapBlazor ValidateForm用法

ValidateForm 是 Bootstrap Blazor 中用于表单验证的组件。它基于 Blazor 的表单验证机制,结合 Bootstrap 的样式,提供了强大的表单验证功能。以下是 ValidateForm 的常见使用方法: 1. 基本用法 ValidateForm 包裹表单内容,并通过 EditContext 实现数据验证。 示例代码 @page "/validate-form-demo" @using BootstrapBlazor.Components @using System.ComponentModel.DataAnnotations <ValidateForm Model="@person" OnValidSubmit="OnValidSubmit"> <div class="form-group"> <label>Name</ …

blazor


Blazor 组件生命周期

Blazor 组件生命周期 Blazor 组件具有定义完善的生命周期,该生命周期从首次创建时开始,在销毁时结束。 组件生命周期由一组事件控制,这些事件响应特定触发器。 例如组件被初始化、用户与组件交互或组件所在的页面被关闭。 本单元介绍 Blazor 组件生命周期中发生的事件。 你将了解如何处理这些事件以优化完成的工作,并提高 Blazor 页面的响应能力。 Blazor 组件生命周期 Blazor 组件表示 Blazor 应用中的视图,它们定义布局和 UI 逻辑。 应用运行时,这些组件会生成 HTML 标记。 用户交互事件可以触发自定义代码,并且可以更新组件以重新呈现显示。 页面关闭时,Blazor 会删除组件,并清理所有资源。 当用户返回到页面时,将创建新实例。 下图说明了在组件生命周期内发生的事件,以及可用于处理这些事件的方法。 Blazor 提供每种方法的同步和异步版本, …

blazor

Blazor 表单的强大功能

用户使用表单输入数据。 在经典 Web 应用中,可以使用 <form> 元素创建表单,并允许用户使用 <input> 元素提供数据。 可在用户提交表单时验证输入。 如果验证成功,则可以执行相应的操作,例如使用提供的信息向数据库添加新条目或更新记录。 <form> 和 <input> 元素提供的功能非常简单,但相对基础。 Blazor 扩展了表单功能及其 <EditForm> 组件。 此外,Blazor 提供了一系列专用输入元素,可用于设置用户所输入数据的格式并进行验证。 在本单元中,你将了解如何使用 <EditForm> 元素和输入元素来生成功能性表单。 你还将了解如何使用表单进行数据绑定。 什么是 EditForm? EditForm 是一个 Blazor 组件,它在 Blazor 页面上履行 HTML 表单这一角色。 EditForm 和 HTML 表单之间的主要区别是: 数据绑定:可 …

blazor

使用 Blazor 事件处理程序将 C# 代码附加到 DOM 事件

大多数 HTML 元素都会公开在发生重要事件(例如页面加载完成、用户单击某个按钮或 HTML 元素的内容已更改)时触发的事件。 应用可以通过多种方式处理事件: 应用可以忽略此事件。 应用可以运行用 JavaScript 编写的事件处理程序来处理事件。 应用可以运行用 C# 编写的 Blazor 事件处理程序来处理事件。 本单元将详细介绍第三个选项:如何用 C# 创建用于处理事件的 Blazor 事件处理程序。 使用 Blazor 和 C# 处理事件 Blazor 应用的 HTML 标记中的每个元素都支持许多事件。 这些事件中的大多数对应于常规 Web 应用程序中可用的 DOM 事件,但你也可以创建通过编写代码触发的用户定义事件。 若要使用 Blazor 捕获事件,请编写处理该事件的 C# 方法,然后使用 Blazor 指令将事件绑定到该方法。 对于 DOM 事件,Blazor 指令与等效 …

blazor

Blazor 布局

编写 Blazor 布局 Blazor 布局是特定类型的组件,因此编写 Blazor 布局与编写其他组件以在应用中呈现 UI 类似。 例如,以相同的方式使用 @code 块和很多指令。 布局在扩展名为 .razor 的文件中定义。 文件通常存储在应用的&ldquo;Shared&rdquo;文件夹中,但你可以选择将其存储在使用它的组件可访问的任何位置。 布局组件有两个独特的要求: 必须继承 LayoutComponentBase 类。 必须在要呈现发起引用的组件内容的位置包含 @Body 指令 @inherits LayoutComponentBase &lt;header&gt; &lt;h1&gt;Blazing Pizza&lt;/h1&gt; &lt;/header&gt; &lt;nav&gt; &lt;a href="Pizzas"&gt;Browse …

blazor

Blazor路由

使用路由模板 用户请求你的 Web 应用中的页面时,可以使用 URI 中的信息指定要查看的内容。 例如: http://www.contoso.com/pizzas/margherita?extratopping=pineapple 在协议和网站地址之后,此 URI 指示用户想要了解玛格丽特披萨。 此外,问号后的查询字符串显示他们有兴趣额外添加一份菠萝配料。 在 Blazor 中,使用路由来确保将每个请求发送到最适合的组件,并且该组件具有显示用户所需内容的全部信息。 在本例中,你可能希望将请求发送到 Pizzas 组件,并使该组件显示玛格丽特披萨,并显示有关添加菠萝配料的信息。 Blazor 使用名为 Router 组件的专用组件路由请求。 它在 App.razor 中配置如下: &lt;Router AppAssembly="@typeof(Program).Assembly"& …

blazor

Blazor数据绑定和事件

呈现 C# 表达式值 若要在 Razor 中呈现 C# 表达式的值,可以使用前导 @ 字符。 例如,Counter 组件可以呈现其 currentCount 字段的值,如下所示: &lt;p role="status"&gt;Current count: @currentCount&lt;/p&gt; Razor 通常可以判断出 C# 表达式何时结束,以及何时转换回编写 HTML。 但是,也可以使用 parens 来明确表达式的开始和结束。 &lt;p role="status"&gt;Current count: @(currentCount)&lt;/p&gt; 添加控制流 可以使用普通的 C# 语句将控制流添加到组件呈现逻辑。 例如,可以使用 C# if 语句有条件地呈现某些内容,如下所示: @if (currentCount &gt; 3) { &lt;p&gt; …

blazor

Blazor Server WebApi

在Blazor里提供Webapi服务的方法 1、注册Controller服务 builder.Services.AddControllers();   2、监听控制器 //app.UseHttpsRedirection(); 如果使用https app.MapControllers();   3、注册Swagger builder.Services.AddSwaggerGen(c => { c.SwaggerDoc("v1", new OpenApiInfo { Title = "Your App Title", Version = "v1" }); });   4、启动Swagger服务 app.UseSwagger(); app.UseSwaggerUI(c => { c.SwaggerEndpoint("/swagger/v1/swagger.json", " …

blazor