- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
这里只对 RCL 创建和使用的做一些简单的概述,详细内容参考官方文档 使用 Razor 类库 (RCL) 中的 ASP.NET Core Razor 组件.
创建 Razor 类库跟创建普通类库步骤一样,关键步骤如下:
在项目中使用 RCL 中组件的方法跟使用普通类库的方法一样:
若要使 RCL 中的可路由组件可用于直接请求,必须向应用的路由器公开 RCL 的程序集。打开服务器项目的 Program.cs 文件,并添加以下代码:
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(MyComponents.Client._Imports).Assembly)
//添加以下代码,引入RCL的程序集
.AddAdditionalAssemblies(typeof(RazorClassLibrary1._Imports).Assembly);
RCL 的静态资产可用于任何使用该库的应用,将静态资产放在 RCL 的 wwwroot 文件夹中,并在应用中使用以下路径引用静态资产:
_content/{PACKAGE ID}/{PATH AND FILE NAME}
<img src="_content/RazorClassLibrary1/img/test.png" />
此路径格式还用于应用中由添加到 RCL 的 NuGet 包提供的静态资产.
组件呈现的是标准的 HTML 元素, 实际上可以使用标准的 HTML 表单元素。但还是建议使用各种 Blazor 输入控件, 因为它们带有额外的功能。关于组件更详细的内容,请参考官方文档ASP.NET Core Blazor表单概述.
Blazor 中提供了一个可用的输入组件的标准集合,所有组件都派自基类 InputBase<T>
下面是一个标准输入组件使用示例,都比较简单就不再单独介绍:
@page "/demo"
@rendermode InteractiveAuto
<h3>Demo</h3>
<EditForm Model="FormData">
<label>输入复选框 Boolean:</label>
<InputCheckbox @bind-Value=FormData.Boolean /> <br />
<label>输入日期 DateTime:</label>
<InputDate @bind-Value=FormData.DateTime ParsingErrorMessage="必须是日期" /> <br />
<label>输入数:</label>
<label>输入整数 Integer:</label><br />
<InputNumber @bind-Value=FormData.Integer ParsingErrorMessage="必须是整数值" /> <br />
<label>输入十进制 Decimal:</label> <br />
<InputNumber @bind-Value=FormData.Decimal ParsingErrorMessage="必须是十进制值" /> <br />
<label>输入选择 Select:</label>
<InputSelect @bind-Value=FormData.Select>
@foreach (var item in Enum.GetValues(typeof(State)))
{
<option value=@item>@item.ToString()</option>
}
</InputSelect><br />
<label>输入单选 Radio:</label> <br />
<InputRadioGroup @bind-Value=FormData.Radio>
@foreach (var item in Enum.GetValues(typeof(State)))
{
<InputRadio Value=@item />
@item.ToString()
<br />
}
</InputRadioGroup>
<label>输入文本 String:</label> <br />
<InputText @bind-Value=FormData.String /> <br />
<label>输入多行文本 String:</label> <br />
<InputTextArea @bind-Value=FormData.MultiLineStr /> <br />
</EditForm>
@code
{
//指示应从表单数据中提供关联属性的值
[SupplyParameterFromForm]
private TestModel FormData { get; set; } = new TestModel();
class TestModel
{
public bool Boolean { get; set; }
public DateTime? DateTime { get; set; }
public int Integer { get; set; }
public decimal Decimal { get; set; }
public string String { get; set; }
public string MultiLineStr { get; set; }
public State Select { get; set; } = State.Active;
public State Radio { get; set; }= State.Active;
}
public enum State
{
Pending,
Active,
Suspended
}
}
运行效果如下:
表单验证需要注意两点:
下面是一个简单的示例,注意要使用OnValidSubmit事件,否则验证不会生效:
@page "/demo"
@rendermode InteractiveAuto
@using System.ComponentModel.DataAnnotations
<h3>Demo</h3>
<EditForm Model=@Person FormName="personForm" OnValidSubmit=@SubmitForm>
@* 必须指定一个验证机制 *@
<DataAnnotationsValidator />
@* 显示表单中所有错误的完整列表 *@
<ValidationSummary />
<div class="form-group">
<label for="Name">Name</label>
<InputText @bind-Value=Person.Name/>
@* 显示单个字段的错误消息 *@
<ValidationMessage For="() => Person.Name" />
</div>
<div class="form-group">
<label for="Age">Age</label>
<InputNumber @bind-Value=Person.Age/>
@* 引用"" 和 Razor 表达式@(...) 两种形式都是等效的
1.引用的表格更易于阅读,
2.Razor 表达式可以清楚地知道定义的是表达式而不是字符串 *@
<ValidationMessage For=@(() => Person.Age) />
</div>
<input type="submit" class="btn btn-primary" value="保存" />
</EditForm>
@code {
//验证需要引入命名空间 System.ComponentModel.DataAnnotations
public class PersonModel
{
//指定属性不能为 null 或为空
[Required(ErrorMessage = "姓名不能为空。")]
public string Name { get; set; }
//指定属性的有效值范围(从 18 到 80),还提供适合向用户显示的错误消息
[Range(18, 80, ErrorMessage = "年龄必须在18岁到80岁之间。")]
public int Age { get; set; }
}
[SupplyParameterFromForm]
private PersonModel Person { get; set; } = new PersonModel();
}
运行效果如下:
使用常规 HTML <form> 标签创建表单,并指定用于处理提交的表单请求的 @onsubmit 处理程序:
@* 必须提供表名 *@
<form @formname="htmlForm" @onsubmit="SubmitForm">
@* 为了安全起见,必须提供 AntiforgeryToken *@
<AntiforgeryToken />
<div class="form-group">
<label for="Name">Name</label>
<InputText @bind-Value=Person.Name class="form-control" />
</div>
<div class="form-group">
<label for="Age">Age</label>
<InputNumber @bind-Value=Person.Age class="form-control" />
</div>
<input type="submit" class="btn btn-primary" value="保存" />
</form>
在表单中包含 AntiforgeryToken 组件以包含防伪支持,详细内容可参考官方文档 防伪支持.
对于基于 EditForm 的窗体,默认情况下会自动添加 AntiforgeryToken 组件和 [RequireAntiforgeryToken] 属性以提供防伪保护.
最后此篇关于.NET8Blazor从入门到精通:(三)类库和表单的文章就讲到这里了,如果你想了解更多关于.NET8Blazor从入门到精通:(三)类库和表单的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
Blazor 中的缓存破坏有什么解决方案吗?我在 Blazor WebAssembly 中转换了我的 asp.net 核心应用程序,我在 razor 页面中使用 asp-append-version=
使用 NavigationManager.NavigateTo() 在页面之间移动非常简单,但我想知道是否有一种导航到页面的方法,这样我就可以在不丢失状态的情况下导航回去第一页。 我正在寻找类似 Na
假设我的大部分组件都有一个标题。我想创建一个具有 header 变量的基本组件,并使所有其他组件从该组件继承并设置 header 。所以我有 基础组件 @inherits LayoutComponen
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
我现在正在试验 Blazor 一段时间,我正试图找到关于两者之间差异的解释 Something 和 methodCall()">Something 为什么 @ expected before onc
我正在使用 BlazorInputFile 包在 Blazor 中上传文件。 问题 此代码无效。 如何限制用户只能在 Blazor 中上传 jpeg 或 png?如果需要更多的东西来支持这个问题,请
这存在于许多现代 SPA 库/框架中...... 我将提供一个使用 React 的示例(但它可以是 Angular 或 Vue),您可以执行类似... this.props.router.push({
我有一个 Blazor 服务器端应用程序,我将托管在离我的主要用户将使用的地方不远的服务器上,我想模拟某些功能是否可用但有一些延迟,或者延迟是否会真正影响它。 但我无法在开发时测试延迟,而且我不想每次
我有一个 Blazor 服务器项目,我想将一些共享组件移动到不同的程序集中,看看它是否会在编译时间上产生差异(让我知道这是否可行的奖励......) ,但这并不是那么顺利。 在 VS2019 中,组件
我最近开始使用 Blazor,发现它是一项非常有前途的技术。 我正准备制作自定义嵌套 Blazor 组件,但我似乎没有让它按我想要的方式工作。 目标是拥有一个具有“ContentHeader”和“Co
我想在我的 Blazor 项目中插入和使用 Mapster。我找不到关于如何注册映射并将它们注入(inject)我的应用程序的不同层的好引用。 有人知道我该如何实现吗? 谢谢 最佳答案 原来很简单。
我正在考虑在 Blazor 服务器项目上使用 PostSharp,想知道此 Postsharp 博客 (https://blog.postsharp.net/post/blazor-support-6
我在使用 RenderTreeBuilder 的 Blazor 组件上使用事件绑定(bind)时遇到问题。我了解如何使用编写 HTML 并将事件附加到组件的直接方法来触发事件。但是,我现在需要使用 R
当用户按下包含登录的左上链接的登录链接时,我试图将其存档: 但相反,我收到了这个: 换句话说:我想转到一个没有主布局导航栏的页面。如何存档? MainLayout.razor inherits Lay
如果程序中有错误,我会收到“发生未处理的错误”。使用 Blazor Web 程序集,我可以在浏览器中打开开发者工具以获取所发生事件的详细信息。这在 Blazor MAUI 中是不可能的。 那么如何在
我刚刚在 Blazor WebAssembly 中完成了我的第一个重要测试应用程序。 Blazor 是令人印象深刻的东西,但我发现很难推断属性更改如何导致 DOM 更新 - 例如,在 Razor 组件
很高兴了解 Blazor。这个框架有很多潜力! VS 2017 build 15.8.9 和 Blazor v 15.5.9 的 VS 扩展好的,所以在使用 asp.net 核心(托管)模板开始新项目
我想要在 ASP.NET Core blazor 中触发 click 事件的确切目标。这是可以实现的吗? 最佳答案 您可以使用@ref 获取对 DOM 对象的引用,然后将其作为参数传递给您的处理程序函
Blazor 服务器端基于 Signalr,因此我假设它知道用户何时离开网站(关闭连接)。是否有任何事件可用于记录此事件?或者其他任何方式! 最佳答案 我认为这项服务可以帮助您... public c
我是一名优秀的程序员,十分优秀!