ASP.NET Core Blazor 5：Blazor表单和数据

似水明俊德

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2026-11-02 14:55:18 发布 852 阅读 AI 写同款· GEO 优化 ›

一文看懂Blazor 和 ASP.NET Core MVC 异同阅读详情

本章将描述 Blazor 为处理 HTML 表单提供的特性，包括对数据验证的支持。

1 准备工作

继续使用上一章项目。
创建 Blazor/Forms 文件夹并添加一个名为 EmptyLayout.razor 的 Razor 组件。本章使用这个组件作为主要的布局。

@inherits LayoutComponentBase

<div class="m-2">
    @Body
</div>

为 Blazor/Forms 文件夹添加 FormSpy.razor，这个组件用来显示表单元素和旁边正在编辑的值。

<div class="container-fluid no-gutters">
    <div class="row">
        <div class="col">
            @ChildContent
        </div>
        <div class="col">
            <table class="table table-sm table-striped table-bordered">
                <thead>
                    <tr><th colspan="2" class="text-center">Data Summary</th></tr>
                </thead>
                <tbody>
                    <tr><th>ID</th><td>@PersonData?.PersonId</td></tr>
                    <tr><th>Firstname</th><td>@PersonData?.Firstname</td></tr>
                    <tr><th>Surname</th><td>@PersonData?.Surname</td></tr>
                    <tr><th>Dept ID</th><td>@PersonData?.DepartmentId</td></tr>
                    <tr><th>Location ID</th><td>@PersonData?.LocationId</td></tr>
                </tbody>
            </table>            
        </div>
    </div>
</div>

@code {

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public Person PersonData { get; set; }
}

Blazor/Forms 文件夹添加 Editor.razor，此组件将用于创建和编辑 Person 对象。

@page "/forms/edit/{id:long}"
@layout EmptyLayout

<h4 class="bg-primary text-center text-white p-2">Edit</h4>

<FormSpy PersonData="PersonData">
   <h4 class="text-center">Form Placeholder</h4>
   <div class="text-center">
       <NavLink class="btn btn-secondary" href="/forms">Back</NavLink>
   </div>
</FormSpy>


@code
{

    [Inject]
    public NavigationManager NavManager { get; set; }

    [Inject]
    DataContext Context { get; set; }

    [Parameter]
    public long Id { get; set; }

    public Person PersonData { get; set; } = new Person();

    protected async override Task OnParametersSetAsync()
    {
        PersonData = await Context.People.FindAsync(Id);
    }
}

代码中的组件使用 @layout 表达式覆盖默认布局并选择 EmptyLayout。并排布局用于在占位符旁边显示 PersonTable 组件，在这里将添加表单。
最后，在 Blazor/Forms 文件夹中创建 List.razor，该组件以表的形式向用户显示 Person 对象列表。

@page "/forms"
@page "/forms/list"
@layout EmptyLayout

<h5 class="bg-primary text-white text-center p-2">People</h5>

<table class="table table-sm table-striped table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Dept</th>
            <th>Location</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @if (People.Count() == 0)
        {
            <tr><th colspan="5" class="p-4 text-center">Loading Data...</th></tr>
        }
        else
        {
            @foreach (Person p in People)
            {
                <tr>
                    <td>@p.PersonId</td>
                    <td>@p.Surname, @p.Firstname</td>
                    <td>@p.Department.Name</td>
                    <td>@p.Location.City</td>
                    <td>
                        <NavLink class="btn btn-sm btn-warning"
                                 href="@GetEditUrl(p.PersonId)">
                            Edit
                        </NavLink>
                    </td>
                </tr>
            }
        }
    </tbody>
</table>

@code 
{
    [Inject]
    public DataContext Context { get; set; }

    public IEnumerable<Person> People { get; set; } = Enumerable.Empty<Person>();

    protected override void OnInitialized()
    {
        People = Context.People.Include(p => p.Department).Include(p => p.Location);
    }

    string GetEditUrl(long id) => $"/forms/edit/{id}";
}

请求 http://localhost:5000/forms，这将生成一个数据表。单击其中一个 Edit 按钮,将看到表单占位符和显示所选 Person 对象当前属性值的摘要。

2 使用 Blazor 表单组件

Blazor 提供的表单组件：

名称	描述
EditForm	此组件将呈现连接起来进行数据验证的表单元素
InputText	此组件呈现一个绑定到 C# 字符串属性的输入元素
InputCheckbox	此组件呈现一个输入元素，它的类型属性是 checkbox，并且绑定到 C# bool 属性
InputDate	此组件呈现一个输入元素，该元素的类型属性为date，并绑定到C# DateTime 或DateTimeOffset属性
InputNumber	此组件呈现一个输入元素，其类型属性为 number，并绑定到 C# int、long、float、double 或 decimal 值
InputTextArea	此组件呈现一个绑定到 C#字符串属性的 textarea 组件

EditFomm 组件必须用于任何其他组件才能工作。Blazor/Forms 文件夹的 Editorrazor 文件中使用表单组件，添加一个 EditForm 和两个 ImputText 组件，来表示 Person 类定义的两个属性。

<FormSpy PersonData="PersonData">
    <EditForm Model="PersonData">
        <div class="form-group">
            <label>Person ID</label>
            <InputNumber class="form-control"
            @bind-Value="PersonData.PersonId" disabled />
        </div>
        <div class="form-group">
            <label>Firstname</label>
            <InputText class="form-control" @bind-Value="PersonData.Firstname" />
        </div>
        <div class="form-group">
            <label>Surname</label>
            <InputText class="form-control" @bind-Value="PersonData.Surname" />
        </div>
        <div class="form-group">
            <label>Dept ID</label>
            <InputNumber class="form-control"
            @bind-Value="PersonData.DepartmentId" />
        </div>
        <div class="text-center">
            <NavLink class="btn btn-secondary" href="/forms">Back</NavLink>
        </div>
    </EditForm>
</FormSpy>

EditForm 组件呈现一个表单元素，Model 属性用于向 EditForm 提供表单用于编辑和验证的对象。
名称以 Input 开头的组件用于显示单个模型属性的 input 或 textarea 元素。这些组件定义了一个名为 Value 的自定义绑定，该绑定使用@bind-Value 属性与模型属性关联。属性级组件必须与它们呈现给用户的属性类型相匹配。
重启并请求 http://localhost:5000/forms/edit/2，将看到显示的三个输入元素。编推值并通过按 Tab 键移动焦点，将在更新窗口的右侧看到汇总数据。

2.1 创建自定义表单组件

Blazor 仅为 input 和 textarea 元素提供内置组件。不过创建一个集成到 Blazor 表单特性的自定义组件是一个简单的过程。在 Blazor/Forms 文件夹中添加一个名为 CustomSelect.razor 的Razor 组件。

@typeparam TValue
@inherits InputBase<TValue>

<select class="form-control @CssClass" value="@CurrentValueAsString"
@onchange="@(ev => CurrentValueAsString = ev.Value as string)">
    @ChildContent
    @foreach (KeyValuePair<string, TValue> kvp in Values)
    {
        <option value="@kvp.Value">@kvp.Key</option>
    }
</select>

@code
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public IDictionary<string, TValue> Values { get; set; }

    [Parameter]
    public Func<string, TValue> Parser { get; set; }

    protected override bool TryParseValueFromString(
        string value, out TValue result, out string validationErrorMessage)
    {
        try
        {
            result = Parser(value);
            validationErrorMessage = null;
            return true;
        }
        catch
        {
            result = default(TValue);
            validationErrorMessage = "The value is not valid";
            return false;
        }
    }
}

表单组件的基类是 InputBase，其中通用类型参数是组件表示的模型属性类型。基类负责大部分工作，并提供 CurrentValueAsString 属性，该属性用于在用户选择新值时在事件处理程序中提供当前值：value="@CurrentValueAsString" @onchange="@(ev => CurrentValueAsString = ev.Value as string)"。在准备数据验证的过程中，该组件包括 CssClass 属性的值，在select 元素的 class 属性中@CssClass。
必须实现抽象的 TryParseValueFromString 方法，以便基类能够在 HTML 元素使用的字符串值和 C#模型属性的相应值之间进行映射。这里不想将自定义 select 元素实现为任何特定的 C# 数据类型，因此使用@typeparam 表达式来定义通用类型参数。Values 属性用于接收将显示给用户的字典映射字符串值和用作 C# 值的 TValue 值。该方法接收两个out 参数，这些参数用于设置解析值以及解析器验证错误消息，如果存在问题，该错误消息将显示给用户。由于正在使用泛型类型，因此 Parser 属性接收一个函数，调用该函数，以将字符串值解析为 TValue 值。

在 BlazorFomms 文件央的 Edior.razor 文件中使用自定义表单元素，因此用户可为 Person 类定义的 Departmentld 和 Locationld 属性选择值。

@page "/forms/edit/{id:long}"
@layout EmptyLayout

<h4 class="bg-primary text-center text-white p-2">Edit</h4>

<FormSpy PersonData="PersonData">
    <EditForm Model="PersonData">
        <div class="form-group">
            <label>Firstname</label>
            <InputText class="form-control" @bind-Value="PersonData.Firstname" />
        </div>
        <div class="form-group">
            <label>Surname</label>
            <InputText class="form-control" @bind-Value="PersonData.Surname" />
        </div>
        <div class="form-group">
            <label>Dept ID</label>
            <CustomSelect TValue="long" Values="Departments" Parser="@(str=>long.Parse(str))"
            @bind-Value="PersonData.DepartmentId">
                <option selected disabled value="0">choose a Department</option>
            </CustomSelect>
        </div>
        <div class="form-group">
            <label>Location ID</label>
            <CustomSelect TValue="long" Values="Departments" Parser="@(str=>long.Parse(str))"
            @bind-Value="PersonData.LocationId">
                <option selected disabled value="0">choose a Location</option>
            </CustomSelect>
        </div>
        <div class="text-center">
            <NavLink class="btn btn-secondary" href="/forms">Back</NavLink>
        </div>
    </EditForm>
</FormSpy>


@code
{

    [Inject]
    public NavigationManager NavManager { get; set; }

    [Inject]
    DataContext Context { get; set; }

    [Parameter]
    public long Id { get; set; }

    public Person PersonData { get; set; } = new Person();

    public IDictionary<string, long> Departments { get; set; }
        = new Dictionary<string, long>();
    public IDictionary<string, long> Locations { get; set; }
        = new Dictionary<string, long>();

    protected async override Task OnParametersSetAsync()
    {
        PersonData = await Context.People.FindAsync(Id);
        Departments = await Context.Departments
            .ToDictionaryAsync(d => d.Name, d => d.Departmentid);
        Locations = await Context.Locations
            .ToDictionaryAsync(l => $"{l.City}, {l.State}", l => l.LocationId);
    }
}

使用 Entity Framework Core ToDictionaryAsync 方法从 Department 和 Location 数据创建值和标签的集合，并使用它们配置 CustomSelect 组件。重启请求 http://localhost:5000/forms/edit/2，当选择一个新值时，CustomSelect 组件将更新 CurrentValueAsString 属性，TryParseValueFromString 方法被调用，其结果用于更新 Value 绑定。

2.2 验证表单数据

blazor 提供了使用标准属性执行验证的组件。

名称	描述
DataAnnotationsValidator	此组件将应用于模型类的验证属性集成到 Blazor 表单特性中
ValidationMessage	此组件显示单个属性的验证错误消息
ValidationSummary	此组件显示整个模型对象的验证错误消息

验证组件生成分配给类的元素，可以用 CSS 样式化这些元素。

名称	描述
validation-errors	ValidationSummary 组件生成一个 ul 元素，该元素被分配给这个类，并且是验证消息摘要的顶级容器
validation-message	ValidationSummary 组件使用为每个验证消息分配给这个类的 il 元素来填充它的 ul 元素。ValidationMessage 组件为这个类的属性级消息呈现一个分配给它的 div 元素

Blazor Input* 组件将它们生成的 HTML 元素添加到下表描述的类中，以指示验证状态。这包括 ImnputBase类，从这个类派生了 CustomSelect 组件，它也是代码中 CssClass 属性的用途。

名称	描述
modifed	一旦用户编辑了值，元素就会添加到这个类中
valid	如果包含的值通过验证，则将元素添加到该类中
invalid	如果元素包含的值验证失败，则将元素添加到该类中

将一个名为 blazorValidation.css 的 CSS 样式表添加到 wwwroot 文件夹中。

.validation-errors {
    background-color: rgb(220, 53, 69);
    color: white;
    padding: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

div.validation-message {
    color: rgb(220, 53, 69);
    font-weight: 500
}

.modified.valid {
    border: solid 3px rgb(40, 167, 69);
}

.modified.invalid {
    border: solid 3px rgb(220, 53, 69);
}

这些样式将错误消息格式化为红色，并对单个表单元素应用红色或绿色边框。导入 CSS 样式表并在Editor.razor 文件中应用验证组件。

@page "/forms/edit/{id:long}"
@layout EmptyLayout
<link href="~/blazorvalidation.css" rel="stylesheet" />
<h4 class="bg-primary text-center text-white p-2">Edit</h4>

<FormSpy PersonData="PersonData">
    <EditForm Model="PersonData">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="form-group">
            <label>Firstname</label>
            <ValidationMessage For="@(()=>PersonData.Firstname)" />
            <InputText class="form-control" @bind-Value="PersonData.Firstname" />
        </div>
        <div class="form-group">
            <label>Surname</label>
            <ValidationMessage For="@(()=>PersonData.Surname)" />
            <InputText class="form-control" @bind-Value="PersonData.Surname" />
        </div>
        <div class="form-group">
            <label>Dept ID</label>
            <ValidationMessage For="@(()=>PersonData.DepartmentId)" />
            <CustomSelect TValue="long" Values="Departments" Parser="@(str=>long.Parse(str))"
            @bind-Value="PersonData.DepartmentId">
                <option selected disabled value="0">choose a Department</option>
            </CustomSelect>
        </div>
        <div class="form-group">
            <label>Location ID</label>
            <ValidationMessage For="@(()=>PersonData.LocationId)" />
            <CustomSelect TValue="long" Values="Locations" Parser="@(str=>long.Parse(str))"
            @bind-Value="PersonData.LocationId">
                <option selected disabled value="0">choose a Location</option>
            </CustomSelect>
        </div>
        <div class="text-center">
            <NavLink class="btn btn-secondary" href="/forms">Back</NavLink>
        </div>
    </EditForm>
</FormSpy>

DataAnnotationsValidator 和 ValidationSummary 组件在应用时没有任何配置属性。ValidationMessag 属性使用 For 属性配置，该属性接收一个的数，该函数返回组件所表示的属性。

启用数据验证的最后一步是将属性应用到模型类，在 Models 文件夹的 Person.cs 文件中应用验证属性。

public class Person
    {
        public long PersonId { get; set; }

        [Required(ErrorMessage = "A firstname is required")]
        [MinLength(3, ErrorMessage = "Firstnames must be 3 or more characters")]
        public string Firstname { get; set; }

        [Required(ErrorMessage = "A surname is required")]
        [MinLength(3, ErrorMessage = "Surnames must be 3 or more characters")]
        public string Surname { get; set; }

        [Required]
        [Range(1, long.MaxValue, ErrorMessage = "A department must be selected")]
        public long DepartmentId { get; set; }

        [Required]
        [Range(1, long.MaxValue, ErrorMessage = "A location must be selected")]
        public long LocationId { get; set; }

        public Department Department { get; set; }
        public Location Location { get; set; }
    }

要查看验证组件的效果，重启请求 http://localhost:5000/forms/edit/2。除 Firstname 字段并通过按 Tab 键或单击另一个字段移动焦点。当焦点更改时，将执行验证，并显示错误消息。Editor 组件同时显示摘要消息和每个属性消息，因此相同的错误消息会显示两次从 Surname 字段中删除除前两个字符以外的所有字符，当更改焦点时将显示第二条验证消息。也有对其他属性的验证支持，但是 select 元素不允许用户选择无效的有效值。如果更改了一个值，select 元素将用绿色边框装饰，以指示有效的选择，但是在演示如何使用表单维件创建新的数据对象之前，看不到无效的响应。

2.3 处理表单事件

EditForm 组件定义了允许应用程序响应用户操作的事件。

名称	描述
OnValidSubmit	当提交表单且表单数据通过验证时触发此事件
OnInvalidSubmit	当提交表单且表单数据验证失败时触发此事件
OnSubmit	此事件在表单提交和验证执行之前触发

这些事件通过提交按钮来触发。向 Editor 组件中添加一个 submit 按钮来处理 EditForm 事件。

@page "/forms/edit/{id:long}"
@layout EmptyLayout
<link href="~/blazorvalidation.css" rel="stylesheet" />
<h4 class="bg-primary text-center text-white p-2">Edit</h4>
<h6 class="bg-info text-center text-white p-2">@FormSubmitMessage</h6>

<FormSpy PersonData="PersonData">
    <EditForm Model="PersonData" OnValidSubmit="HandleValidSubmit"
              OnInvalidSubmit="HandleInvalidSubmit">
        <DataAnnotationsValidator />
        ......
        <div class="text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
            <NavLink class="btn btn-secondary" href="/forms">Back</NavLink>
        </div>
    </EditForm>
</FormSpy>


@code
{
    ......
    public string FormSubmitMessage { get; set; } = "Form Data Not Submitted";
    public void HandleValidSubmit() => FormSubmitMessage = "Valid Data Submitted";
    public void HandleInvalidSubmit() => FormSubmitMessage = "Invalid Data Submitted";
}

重启请求 http://localhost:5000/forms/edit/2，清除 Firstname 字段，然后单击 Submit 按钮。除了验证错误之外，还将看到一条消息，指示提交的表单使用了无效数据。在字段中输入一个名称，再次单击 Submit，消息会更改。

3 使用 EF Core 与 Blazor

Blazor 模型改变了 EF Core 的行为方式，如果习惯于编写常规的 ASE.NET Core 应用程序，那么这可能会导致意想不到的结果。接下来将解释这些问题以及如何避免可能出现的问题。

3.1 理解 EF Core 上下文范围问题

第一个问题是，更改 Firstname 之后未提交，点击返回主列表后，主列表数据已经改变了。
在 Blazor 应用程序中，路由系统响应 URL 更改，而不发送新的 HTTP 请求，这意味着只使用 Blazor 维护的到服务器的持久 HTTP 连接来显示多个组件。这将导致多个组件共享单个依赖注入范围，一个组件所做的更改将影响其他组件，即使这些更改没有写入数据库。1.丢弃未保存的数据更改
如果在组件之间共享上下文，那么可采用这种方法，并确保组件在销毁时放弃任何更改。在 Blazor/Forms 文件夹的 Editor.razor 文件中丢弃未保存的数据更改。

@implements IDisposable
......
public void Dispose() => Context.Entry(PersonData).State = EntityState.Detached;

2.创建新的依赖注入范围
若想保留其余部分使用的模型，就必须创建新的依赖注入范围。并让每个组件接收子级的 EF Core 上下文对象。这是通过使用 @ inherits 表达是将组件的基类设置为 OwningComponentBase 来完成的。
OwningComponentBase 类定义了组件继承的 ScopedServices 属性，提供了一个可用于获取服务的 IServiceProvider 对象，该服务在一个特定于组件的生命周期的作用域中创建，该范围不会与其他任何组件共享。
在 Blazor/Forms 文件夹的 Editor.razor 文件中使用新的范围。

@inherits OwningComponentBase
@using Microsoft.Extensions.DependencyInjection
......
DataContext Context => ScopedServices.GetService<DataContext>();

注释掉了 Inject 属性，并通过获得 DataContext 服务来设置 Context 属性的值。Micosof.Extensions.DependencyIniection 名称空间包含扩展方法，这样 IServiceProvider 对象更容易获取服务。
OwningComponentBase 类定义了一个额外的便利属性，来访问范围类型 T 的服务，如果组件只需要范围内单一的服务，该属性就可以很有用。

@inherits OwningComponentBase<DataContext>
......
DataContext Context => Service;

有作用域的服务可通过名为 Service 的属性使用。在这个例子中，指定 DataContext 作为基类的类型参数。
无论使用哪个基类，结果都是Editor组件有自己的依赖注入作用域和自己的DataContext对象。List 组件没有修改，因此它将接收请求范围的 DataContext 对象。

3.2 理解重复查询问题

Blazor 尽可能高效地响应状态变化，但仍然必须呈现组件的内容，以确定应该发送到浏览器的变化，它会导致发送到数据库的查询数量急剧增加。在 Blazor/Foms 文件夹的 List.razor文件中添加一个按钮计数器来反映这个问题。

......
@layout EmptyLayout
...... 
<button class="btn btn-primary" @onclick="@(() => Counter++)">Increment</button>
<span class="h5">Counter:@Counter</span>

@code
{
    ......
    public int Counter { get; set; } = 0;
}

请求 http://localhost:5000/forms。单击按钮并观察 ASP.NET Core 服务器的输出。每次单击该按钮时，都会调用事件处理程序，并向数据库发送一个新的数据库查询。
每次呈现组件时，EFCore 都向数据库发送两个相同的请求，即使在没有执行数据操作的地方单击了 Increment 按钮，也是如此。当使用 EF Core 时，就会出现这个问题，而 Blazor 则加重了这个问题。

管理组件中的查询
Blazor 和 EF Core 之间的交互对所有项目来说都不是问题，但是如果是的话，那么最好的方法是査询一次数据库，并且只对用户希望发生更新的操作再次进行査询。有些应用程产可能需要为用户提供显式选项来重新加载数据，特别是对于用户希望看到更新的应用程序。
在 Blazor/Forms 文件夹的 List.razor 文件中控制查询。

<button class="btn btn-danger" @onclick="UpdateData">Update</button>
......
protected async override Task OnInitializedAsync()
{
    await UpdateData();
}
private async Task UpdateData() =>
    People = await Context.People.Include(p => p.Department)
        .Include(p => p.Location).ToListAsync<Person>();

UpdateData 方法执行相同的査询，但应用 ToListAsync 方法，该方法强制对 EFCore 查询进行评估。结果分配给 People 属性，可以重复读取，而不触发其他查询。为了让用户控制数据，添加了一个按钮，当单击 UpdateData 方法时，该按钮会调用该方法。重启请求 http:/localhost:5000/forms，然后单击 Increment 按钮。监视服务器的输出，将看到只有在组件初始化时才进行査询。要显式触发查询，请单击Update 按钮。

一些操作可能需要一个新的查询，这很容易执行。为了便于演示，向 List 组件添加了一个排序操作，该操作是使用和不使用新查询实现的。

<button class="btn btn-danger" @onclick="(()=>UpdateData())">Update</button>
<button class="btn btn-info" @onclick="SortWithQuery">Sort (With Query)</button>
<button class="btn btn-info" @onclick="SortWithoutQuery">Sort (No Query)</button>
......
protected async override Task OnInitializedAsync()
{
    await UpdateData();
}
private IQueryable<Person> Query =>
    Context.People.Include(p => p.Department).Include(p => p.Location);
private async Task UpdateData(IQueryable<Person> query = null) =>
    People = await (query ?? Query).ToListAsync<Person>();
public async Task SortWithQuery()
{
    await UpdateData(Query.OrderBy(p => p.Surname));
}
public async Task SortWithoutQuery()
{
    People = People.OrderBy(p => p.Firstname).ToList<Person>();
}

EF Core 査询表示为 IQueryable对象，允许该査询在发送到数据库服务器之前与附加的 LINQ 方法组合。示例中的新操作都使用 LINQ OrderBy 方法，但其中一个将其应用于 IQueryable，然后对其进行评估，以使用 ToListAsync 方法发送查询。另一个操作将 OrderBy 方法应用于现有结果数据，对其进行排序，而不发送新的查询。要查看这两个操作，请重新请求 http://localhost:5000/forms，并单击 Sort 按钮。当单击 Sort (With Query)按钮时，将看到一条日志消息，指示查询已发送到数据库。

4 执行增删改查操作

4.1 创建 List 组件

List 组件包含需要的基本功能。在 List.razor 中删除了前面部分中不再需要的一些特性，并派加了允许用户导航到其他函数的按钮。

<td class="text-center">
    <NavLink class="btn btn-sm btn-info"
             href="@GetDetailsUrl(p.PersonId)">
        Details
    </NavLink>
    <NavLink class="btn btn-sm btn-warning"
             href="@GetEditUrl(p.PersonId)">
        Edit
    </NavLink>
    <button class="btn btn-sm btn-danger"
    @onclick="@(() => HandleDelete(p))">
        Delete
    </button>
</td>
......
string GetEditUrl(long id) => $"/forms/edit/{id}";
string GetDetailsUrl(long id) => $"/forms/details/{id}";
public async Task HandleDelete(Person p)
{
    Context.Remove(p);
    await Context.SaveChangesAsync();
    await UpdateData();
}

对象的创建、査看和编辑操作导航到其他 URL，但是删除操作由 List 组件执行，注意在保存更改后重新加载数据，以将更改反映给用户。

4.2 创建 Details 组件

为 Blazor/Forms 文件夹添加一个名为 Details.razor 的 Blazor 组件。此组件显示的所有输入元素都被禁用，这意味着不需要处理事件或处理用户输入。

@page "/forms/details/{id:long}"
@layout EmptyLayout
@inherits OwningComponentBase<DataContext>

<h4 class="bg-info text-center text-white p-2">Details</h4>

<div class="form-group">
    <label>ID</label>
    <input class="form-control" value="@PersonData.PersonId" disabled />
</div>
<div class="form-group">
    <label>Firstname</label>
    <input class="form-control" value="@PersonData.Firstname" disabled />
</div>
<div class="form-group">
    <label>Surname</label>
    <input class="form-control" value="@PersonData.Surname" disabled />
</div>
<div class="form-group">
    <label>Department</label>
    <input class="form-control" value="@PersonData.Department?.Name" disabled />
</div>
<div class="form-group">
    <label>Location</label>
    <input class="form-control"
           value="@($"{PersonData.Location?.City}, {PersonData.Location?.State}")"
           disabled />
</div>
<div class="text-center">
    <NavLink class="btn btn-info" href="@EditUrl">Edit</NavLink>
    <NavLink class="btn btn-secondary" href="/forms">Back</NavLink>
</div>

@code
{
    [Inject]
    public NavigationManager NavManager { get; set; }

    DataContext Context => Service;

    [Parameter]
    public long Id { get; set; }

    public Person PersonData { get; set; } = new Person();

    protected async override Task OnParametersSetAsync()
    {
        PersonData = await Context.People.Include(p => p.Department)
            .Include(p => p.Location).FirstOrDefaultAsync(p => p.PersonId == Id);
    }

    public string EditUrl => $"/forms/edit/{Id}";
}

4.3 创建 Editor 组件

其余特性将由 Editor 组件处理。代码清单删除了前面示例中不再需要的特性，并添加了对创建和编辑对象的支持，包括持久化数据。

@page "/forms/edit/{id:long}"
@page "/forms/create"
@layout EmptyLayout
@inherits OwningComponentBase<DataContext>

<link href="/blazorValidation.css" rel="stylesheet" />

<h4 class="bg-@Theme text-center text-white p-2">@Mode</h4>

<EditForm Model="PersonData" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    @if (Mode == "Edit")
    {
        <div class="form-group">
            <label>ID</label>
            <InputNumber class="form-control"
            @bind-Value="PersonData.PersonId" readonly />
        </div>
    }
    <div class="form-group">
        <label>Firstname</label>
        <ValidationMessage For="@(() => PersonData.Firstname)" />
        <InputText class="form-control" @bind-Value="PersonData.Firstname" />
    </div>
    <div class="form-group">
        <label>Surname</label>
        <ValidationMessage For="@(() => PersonData.Surname)" />
        <InputText class="form-control" @bind-Value="PersonData.Surname" />
    </div>
    <div class="form-group">
        <label>Deptartment</label>
        <ValidationMessage For="@(() => PersonData.DepartmentId)" />
        <CustomSelect TValue="long" Values="Departments"
                      Parser="@(str => long.Parse(str))"
        @bind-Value="PersonData.DepartmentId">
            <option selected disabled value="0">Choose a Department</option>
        </CustomSelect>
    </div>
    <div class="form-group">
        <label>Location</label>
        <ValidationMessage For="@(() => PersonData.LocationId)" />
        <CustomSelect TValue="long" Values="Locations"
                      Parser="@(str => long.Parse(str))"
        @bind-Value="PersonData.LocationId">
            <option selected disabled value="0">Choose a Location</option>
        </CustomSelect>
    </div>
    <div class="text-center">
        <button type="submit" class="btn btn-@Theme">Save</button>
        <NavLink class="btn btn-secondary" href="/forms">Back</NavLink>
    </div>
</EditForm>

@code
{

    [Inject]
    public NavigationManager NavManager { get; set; }

    DataContext Context => Service;

    [Parameter]
    public long Id { get; set; }

    public Person PersonData { get; set; } = new Person();

    public IDictionary<string, long> Departments { get; set; }
        = new Dictionary<string, long>();
    public IDictionary<string, long> Locations { get; set; }
        = new Dictionary<string, long>();

    protected async override Task OnParametersSetAsync()
    {
        if (Mode == "Edit")
        {
            PersonData = await Context.People.FindAsync(Id);
        }
        Departments = await Context.Departments
            .ToDictionaryAsync(d => d.Name, d => d.Departmentid);
        Locations = await Context.Locations
            .ToDictionaryAsync(l => $"{l.City}, {l.State}", l => l.LocationId);
    }

    public string Theme => Id == 0 ? "primary" : "warning";
    public string Mode => Id == 0 ? "Create" : "Edit";

    public async Task HandleValidSubmit()
    {
        if (Mode == "Create")
        {
            Context.Add(PersonData);
        }
        await Context.SaveChangesAsync();
        NavManager.NavigateTo("/forms");
    }
}

添加了对新 URL 的支持，并使用引导 CSS 主题来区分创建新对象和编辑现有对象。删除了验证摘要，以便只显示属性级别的验证消息，并添加了通过 EF Core 存储数据的支持。与使用控制器或 Razor Pages 创建的表单应用程序不同，本例不必处理模型绑定，因为 Blazor。直接处理 EF Core 从初始数据库査询生成的对象。重启并请求 http://localhost:5000/forms。将看到 Person 对象列表，单击 Create、Details、Edi和 Delete 按钮，将允许处理数据库中的数据。