(06/30)Blazor系列：抽离C#代码

昨天看到FetchData.razor的代码太长了，为求方便，我们把@code的部分抽取出来另成一个文件。

Blazor提供了两个方法：partial class跟ComponentBase，同样两者各有优缺点，笔者偏好ComponentBase，看个人使用习惯。

先来看partial class，我们打开FetchData.razor，把前面提到的@using BlazorServer.Data移到_Imports.razor，再建立一个class叫做FetchData.razor.cs，在public跟class中间加上partial修饰词，接着把FetchData.razor的@code区块剪切贴到FetchData.razor.cs后稍作修改，可以看出跟旧的C#代码没什么差别。我们按下F5，一样看到10条天气数据。

原FetchData.razor：

原FetchData.razor

提取C#代码后代码截图：

提取C#代码后代码截图

页面展示不变：

页面展示不变

接着来看ComponentBase，先把partial class里面的代码复制下来，接着建立一个新class取名为FetchDataBase.cs，将刚刚的代码贴上后稍做修改，再删除FetchData.razor.cs这个partial class，因为两种模式不能并存。可以看到除了继承ComponentBase跟加上[Inject]外，几乎没有差别，这里的[Inject]相当于在FetchData.razor.cs使用@inject WeatherForecastService ForecastService，我们按下F5启动调试模式，在14行左边按一下点击中断点，可以看到一样取得了天气数据。

使用ComponentBase：

使用ComponentBase

接着开始做自己的Component吧！先将不必要的Component删除，Program.cs和_Import.razor里面跟天气有关的using及注册同样删除，如果忘记这两个文件在哪里，可以在删除Component后将滑鼠移到项目BlazorServer点右键，选取重建项目，Visual Studio就会告诉你哪里出错了。

删除多余组件等文件：

删除多余组件等文件

之前说过要完成让使用者写日志的网站，所以需要最基本的输入框，而日志的单位就以一篇计算。首先建立Models文件夹，建立PostModel类型，里面很简单只有3个属性，接着在Pages文件夹建立Post.razor跟PostBase.razor.cs，最后将NavMenu.razor的连接留下一个，href属性的值改为Post。

/Models/PostModel.cs

namespace BlazorServer.Models;

public class PostModel
{
 public int Id { get; set; }

 public string? Title { get; set; }

 public string? Content { get; set; }
}

/Shared/NavMenu.razor：

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="/Post" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Post
            </NavLink>
        </div>
    </nav>
</div>

PostModel是用来承接数据的容器，目前没有Service，所以在PostBase.razor.cs放一笔假数据，这边可以看到一个方法OnInitializedAsync()，代表当这个Component生命周期开始，里面的事情就会先做，其他还有OnAfterRenderAsync、OnParametersSetAsync等等，只要先输入override再按一下空白键，就可以看到这些方法，且也有同步跟异步两种模式，这些方法有机会再说明。

PostBase

而Post.razor用了EditForm这个Component，编译过后相当于html的form元素，里面还有3个input元素，Blazor也有提供相对应的Input Component，可以从官方文件看到分别编译后的html元素。

@page "/Post"
@inherits PostBase

<EditForm Model="@Post">
    
    <input type="number" value="@Post!.Id"/>
    <input type="text" value="@Post!.Title"/>
    <textarea value="@Post!.Content" ></textarea>
    
    <button type="submit">Submit</button>

</EditForm>

上下两种写法对比：

@page "/Post"
@inherits PostBase

<EditForm Model="@Post">
    
    <InputNumber @bind-Value="Post!.Id"></InputNumber>
    <InputText @bind-Value="Post!.Title"></InputText>
    <InputTextArea @bind-Value="Post!.Content"></InputTextArea>
    
    <button type="submit">Submit</button>

</EditForm>

Blazor提供相对应的Input Component：

Input Component

这时候打开网页来看，可以看到上面出现了我们定义在PostBase.razor.cs的值，但这是怎么连接起来的呢？原因就是EditForm的Model属性及3个<Input>Component的属性@bind-Value，这里在告诉Blazor：我的Model跟里面的值要跟这个EditForm绑在一起，如果这里有跟后端代码连接，网页上输入的内容经过事件触发后，就会提交后端处理。

Post页面展示

不过<Input>预设的CSS样式不太好看，我们先套用基本的boostrap样式；因为Id通常不会让使用者输入，所以这边先注释，然后再加入表格验证机制，毕竟不能让使用者随便输入就提交表格，但如果不想自己写一堆验证机制呢？可以试试看Blazor的DataAnnotationsValidator及ValidationSummary两个Component。

添加样式

我们先在PostModel的Title跟Content加上两个Attribute，Required代表必填，MaxLength及MinLength则是限制最大及最小字数，还可以自定义错误信息。接着在EditForm里面加上那两个ComponentDataAnnotationsValidator及ValidationSummary，第一个是验证各个Input，第二个则是将错误信息显示在表格上方。

添加验证

验证错误提示

但如果不喜欢验证机制预设的CSS样式呢？Blazor也提供了定制化的方法。先建立一个class名为CustomFieldClassProvider且继承FieldCssClassProvider，重载方法GetFieldCssClass，里面的内容待会再说。

using Microsoft.AspNetCore.Components.Forms;

namespace BlazorServer;

public class CustomFieldClassProvider : FieldCssClassProvider
{
 public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
 {
  var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

  return isValid ? "text-primary" : "text-danger";
 }
}

接着在PostBase.razor.cs加入一个类型为EditContext的字段EditContext，初始化字段EditContext，将原本的Post字段丢进去，然后调用EditContext的方法SetFieldCssClassProvider，添加CustomFieldClassProvider实例。

自定义样式关联

最后最重要的一步，在Post.razor将EditForm的Model参数移除，改为EditContext参数，里面的值就是刚刚的EditContext字段。

替换Model为EditContext

这时候再提交表单一次，可以看到textarea的红色外框消失了，字体也变成text-danger的红色，而正确的字段值则是变成text-primary的蓝色。我们再回头看CustomFieldClassProvider，原来EditContext指的就是EditForm的内容，fieldIdentifier则是当前验证的Input标签，如果EditContext调用的方法GetValidationMessages有在fieldIdentifier取得任何信息，代表这是错误的字段值，没有则是正确字段值，这就是Blazor帮我们定制化Form的作法。

定制的数据验证提示

**引用: **

1. Split HTML And C# Code In Blazor Using Either Partial Class Or ComponentBase Class
2. ASP.NET Core Blazor forms and validation
3. Custom validation CSS class attributes