ToB企服应用市场:ToB评测及商务社交产业平台

标题: .NET8 Blazor 从入门到精通：（三）类库和表单 [打印本页]
作者: 络腮胡菲菲    时间: 2024-8-19 18:36
标题: .NET8 Blazor 从入门到精通：（三）类库和表单
目录

Razor 类库

这里只对 RCL 创建和使用的做一些简单的概述，详细内容参考官方文档 使用 Razor 类库 (RCL) 中的 ASP.NET Core Razor 组件。
创建

创建 Razor 类库跟创建普通类库步骤一样，关键步骤如下：
使用

在项目中使用 RCL 中组件的方法跟使用普通类库的方法一样：
使可路由组件可从 RCL 获取

若要使 RCL 中的可路由组件可用于直接哀求，必须向应用的路由器公开 RCL 的程序集。打开服务器项目的 Program.cs 文件，并添加以下代码：
  1. app.MapRazorComponents<App>()
  2.     .AddInteractiveServerRenderMode()
  3.     .AddInteractiveWebAssemblyRenderMode()
  4.     .AddAdditionalAssemblies(typeof(MyComponents.Client._Imports).Assembly)
  5.     //添加以下代码，引入RCL的程序集
  6.     .AddAdditionalAssemblies(typeof(RazorClassLibrary1._Imports).Assembly);
复制代码
静态资源

RCL 的静态资产可用于任何使用该库的应用，将静态资产放在 RCL 的 wwwroot 文件夹中，并在应用中使用以下路径引用静态资产：
  1. _content/{PACKAGE ID}/{PATH AND FILE NAME}
复制代码
  1. <img src="https://www.cnblogs.com/_content/RazorClassLibrary1/img/test.png" />
复制代码
此路径格式还用于应用中由添加到 RCL 的 NuGet 包提供的静态资产。
表单

组件呈现的是标准的 HTML 元素， 实际上可以使用标准的 HTML 表单位素。但还是建议使用各种 Blazor 输入控件， 因为它们带有额外的功能。关于组件更详细的内容，请参考官方文档ASP.NET Core Blazor表单概述。
EditForm

Blazor 中提供了一个可用的输入组件的标准聚集，全部组件都派自基类 InputBase :

标准输入组件

下面是一个标准输入组件使用示例，都比较简单就不再单独先容：
  1. @page "/demo"
  2. @rendermode InteractiveAuto
  4. <h3>Demo</h3>
  5. <EditForm Model="FormData">
  6.     <label>输入复选框 Boolean:</label>
  7.     <InputCheckbox @bind-Value=FormData.Boolean /> <br />
  9.     <label>输入日期 DateTime:</label>
  10.     <InputDate @bind-Value=FormData.DateTime ParsingErrorMessage="必须是日期" /> <br />
  12.     <label>输入数:</label>
  13.     <label>输入整数 Integer:</label><br />
  14.     <InputNumber @bind-Value=FormData.Integer ParsingErrorMessage="必须是整数值" /> <br />
  15.     <label>输入十进制 Decimal:</label> <br />   
  16.     <InputNumber @bind-Value=FormData.Decimal ParsingErrorMessage="必须是十进制值" /> <br />
  18.     <label>输入选择 Select:</label>
  19.     <InputSelect @bind-Value=FormData.Select>
  20.         @foreach (var item in Enum.GetValues(typeof(State)))
  21.         {
  22.             <option value=@item>@item.ToString()</option>
  23.         }
  24.     </InputSelect><br />
  26.     <label>输入单选 Radio:</label> <br />
  27.     <InputRadioGroup @bind-Value=FormData.Radio>
  28.         @foreach (var item in Enum.GetValues(typeof(State)))
  29.         {
  30.             <InputRadio Value=@item />
  31.             @item.ToString()
  32.             <br />
  33.         }
  34.     </InputRadioGroup>
  36.     <label>输入文本 String:</label> <br />
  37.     <InputText @bind-Value=FormData.String /> <br />
  39.     <label>输入多行文本 String:</label> <br />
  40.     <InputTextArea @bind-Value=FormData.MultiLineStr /> <br />      
  41. </EditForm>
复制代码
  1. @code
  2. {
  3.     //指示应从表单数据中提供关联属性的值
  4.     [SupplyParameterFromForm]
  5.     private TestModel FormData  { get; set; } = new TestModel();
  7.     class TestModel
  8.     {
  9.         public bool Boolean { get; set; }
  10.         public DateTime? DateTime { get; set; }
  11.         public int Integer { get; set; }
  12.         public decimal Decimal { get; set; }
  13.         public string String { get; set; }
  14.         public string MultiLineStr { get; set; }
  15.         public State Select { get; set; } = State.Active;
  16.         public State Radio { get; set; }= State.Active;
  17.     }
  19.     public enum State
  20.     {
  21.         Pending,
  22.         Active,
  23.         Suspended
  24.     }
  25. }
复制代码
运行结果如下：

验证

表单验证必要注意两点：
下面是一个简单的示例，注意要使用OnValidSubmit事件，否则验证不会生效：
  1. @page "/demo"
  2. @rendermode InteractiveAuto
  3. @using System.ComponentModel.DataAnnotations
  5. <h3>Demo</h3>
  6. <EditForm Model=@Person FormName="personForm" OnValidSubmit=@SubmitForm>
  7.     @* 必须指定一个验证机制 *@
  8.     <DataAnnotationsValidator />
  9.     @* 显示表单中所有错误的完整列表 *@
  10.     <ValidationSummary />
  12.    
  13.         <label for="Name">Name</label>
  14.         <InputText @bind-Value=Person.Name/>
  15.         @* 显示单个字段的错误消息 *@         
  16.         <ValidationMessage For="() => Person.Name" />
  17.    
  19.    
  20.         <label for="Age">Age</label>
  21.         <InputNumber @bind-Value=Person.Age/>
  22.         @* 引用"" 和 Razor 表达式@(...) 两种形式都是等效的
  23.         1.引用的表格更易于阅读，
  24.         2.Razor 表达式可以清楚地知道定义的是表达式而不是字符串 *@
  25.         <ValidationMessage For=@(() => Person.Age) />
  26.    
  27.     <input type="submit"  value="保存" />
  28. </EditForm>
复制代码
  1. @code {
  2.     //验证需要引入命名空间 System.ComponentModel.DataAnnotations
  3.     public class PersonModel
  4.     {
  5.         //指定属性不能为 null 或为空
  6.         [Required(ErrorMessage = "姓名不能为空。")]
  7.         public string Name { get; set; }
  9.         //指定属性的有效值范围（从 18 到 80），还提供适合向用户显示的错误消息
  10.         [Range(18, 80, ErrorMessage = "年龄必须在18岁到80岁之间。")]
  11.         public int Age { get; set; }
  12.     }
  14.     [SupplyParameterFromForm]
  15.     private PersonModel Person { get; set; } = new PersonModel();
  16. }
复制代码
运行结果如下：

HTML 表单

使用常规 HTML  标签创建表单，并指定用于处理提交的表单哀求的 @onsubmit 处理程序：
  1. @* 必须提供表名 *@
  2. <form @formname="htmlForm" @onsubmit="SubmitForm">
  3.     @* 为了安全起见，必须提供 AntiforgeryToken *@
  4.     <AntiforgeryToken />   
  5.    
  6.         <label for="Name">Name</label>
  7.         <InputText @bind-Value=Person.Name  />
  8.    
  9.    
  10.         <label for="Age">Age</label>
  11.         <InputNumber @bind-Value=Person.Age  />
  12.    
  13.     <input type="submit"  value="保存" />
  14. </form>
复制代码
在表单中包罗 AntiforgeryToken 组件以包罗防伪支持，详细内容可参考官方文档 防伪支持。
对于基于 EditForm 的窗体，默认情况下会主动添加 AntiforgeryToken 组件和 [RequireAntiforgeryToken] 属性以提供防伪掩护。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4