Dotnet9

联系请关注微信公众号:Dotnet9

文章

(6/30)大家一起学Blazor:抽离C#代码

StrayaWorker 2021-12-12 21:59:24 Blazor 22
昨天看到`FetchData.razor`的代码太长了,为求方便,我们把`@code`的部分抽取出来另成一个文件。

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

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

先来看partial class,我们打开FetchData.razor,把前面提到的@using BlazorServer.Data移到_Imports.razor,再建立一个class叫做FetchData.razor.cs,在publicclass中间加上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.razorPostBase.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生命周期开始,里面的事情就会先做,其他还有OnAfterRenderAsyncOnParametersSetAsync等等,只要先输入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的DataAnnotationsValidatorValidationSummary两个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.razorEditFormModel参数移除,改为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

注:本文代码通过 .NET 6 + Visual Studio 2022重构,可点击原文链接与重构后代码比较学习,谢谢阅读,支持原作者

留言

回复