通用Blazor组件能否处理结构相同但字段名不同的多个类？

需求背景 #

我已经开发了一个Blazor组件用于编辑数据库记录，现在希望复用该组件处理结构相似但字段名不同的实体。比如现有AccountTypeCode类：

public class AccountTypeCode
{
    public int AccountTypeId { get; set; }
    [Required]
    public string AccountType { get; set; } = string.Empty;
    [Required]
    public string? AccountTypeDescription { get; set; } = string.Empty;
    public string AdditionalInformation { get; set; } = string.Empty;
    public int DisplayOrder { get; set; } = 0;
    public DateOnly? DateTerminated { get; set; }
}

还有类似的CustomerTypeCode类，包含CustomerTypeId、CustomerType、CustomerTypeDescription等字段。当前组件硬编码了recordEdit.AccountType这类具体字段，需要改成通用逻辑，避免重复编写组件。

实现思路 #

通过定义通用接口契约，让所有需要编辑的实体类实现该接口，再将组件改为泛型组件并添加接口约束，就能用统一的接口属性替代硬编码的具体字段，实现组件复用。

具体步骤 #

1. 定义通用接口 #

创建包含所有编辑所需通用属性的接口，对应实体中的核心字段：

public interface IRecordType
{
    int RecordId { get; set; }
    [Required]
    string RecordType { get; set; }
    [Required]
    string? RecordTypeDescription { get; set; }
    string AdditionalInformation { get; set; }
    int DisplayOrder { get; set; }
    DateOnly? DateTerminated { get; set; }
}

2. 实体类实现接口 #

让每个需要编辑的实体类实现IRecordType接口，通过显式接口实现映射到自身的字段：

AccountTypeCode实现

public class AccountTypeCode : IRecordType
{
    public int AccountTypeId { get; set; }
    int IRecordType.RecordId 
    { 
        get => AccountTypeId; 
        set => AccountTypeId = value; 
    }

    [Required]
    public string AccountType { get; set; } = string.Empty;
    string IRecordType.RecordType 
    { 
        get => AccountType; 
        set => AccountType = value; 
    }

    [Required]
    public string? AccountTypeDescription { get; set; } = string.Empty;
    string? IRecordType.RecordTypeDescription 
    { 
        get => AccountTypeDescription; 
        set => AccountTypeDescription = value; 
    }

    public string AdditionalInformation { get; set; } = string.Empty;
    public int DisplayOrder { get; set; } = 0;
    public DateOnly? DateTerminated { get; set; }
}

CustomerTypeCode实现

public class CustomerTypeCode : IRecordType
{
    public int CustomerTypeId { get; set; }
    int IRecordType.RecordId 
    { 
        get => CustomerTypeId; 
        set => CustomerTypeId = value; 
    }

    [Required]
    public string CustomerType { get; set; } = string.Empty;
    string IRecordType.RecordType 
    { 
        get => CustomerType; 
        set => CustomerType = value; 
    }

    [Required]
    public string? CustomerTypeDescription { get; set; } = string.Empty;
    string? IRecordType.RecordTypeDescription 
    { 
        get => CustomerTypeDescription; 
        set => CustomerTypeDescription = value; 
    }

    public string AdditionalInformation { get; set; } = string.Empty;
    public int DisplayOrder { get; set; } = 0;
    public DateOnly? DateTerminated { get; set; }
}

3. 修改组件为泛型通用组件 #

将组件声明为泛型，约束为IRecordType，并把所有硬编码的具体字段替换为接口属性：

@typeparam TRecord where TRecord : IRecordType, new()

<div class="record-edit-component">
    <div class="form-group">
        <label>记录类型</label>
        <InputText @bind-Value="@recordEdit.RecordType" class="form-control" />
    </div>
    <div class="form-group">
        <label>类型描述</label>
        <InputTextArea @bind-Value="@recordEdit.RecordTypeDescription" class="form-control" />
    </div>
    <div class="form-group">
        <label>附加信息</label>
        <InputTextArea @bind-Value="@recordEdit.AdditionalInformation" class="form-control" />
    </div>
    <div class="form-group">
        <label>显示顺序</label>
        <InputNumber @bind-Value="@recordEdit.DisplayOrder" class="form-control" />
    </div>
    <div class="form-group">
        <label>终止日期</label>
        <InputDate @bind-Value="@recordEdit.DateTerminated" class="form-control" />
    </div>
    <button @onclick="HandleSave" class="btn btn-primary">保存</button>
</div>

@code {
    [Parameter]
    public TRecord? recordEdit { get; set; }

    [Parameter]
    public EventCallback<string> onSaveButton { get; set; }

    private async Task HandleSave()
    {
        if (recordEdit is not null && !string.IsNullOrEmpty(recordEdit.RecordType))
        {
            await onSaveButton.InvokeAsync(recordEdit.RecordType);
        }
    }
}

4. 复用通用组件 #

在父组件中直接指定实体类型即可使用：

<!-- 编辑AccountTypeCode -->
<RecordEditComponent<TRecord="AccountTypeCode" 
                     recordEdit="@currentAccountType" 
                     onSaveButton="@SaveAccountType" />

<!-- 编辑CustomerTypeCode -->
<RecordEditComponent<TRecord="CustomerTypeCode" 
                     recordEdit="@currentCustomerType" 
                     onSaveButton="@SaveCustomerType" />

@code {
    private AccountTypeCode currentAccountType = new();
    private CustomerTypeCode currentCustomerType = new();

    private void SaveAccountType(string typeName)
    {
        // 处理AccountType保存逻辑
    }

    private void SaveCustomerType(string typeName)
    {
        // 处理CustomerType保存逻辑
    }
}

组件界面说明 #

组件界面包含：记录类型输入框、类型描述文本域、附加信息文本域、显示顺序数字输入框、终止日期选择器，以及保存按钮，所有输入控件均绑定到通用接口属性，适配不同实体类的编辑需求。

内容的提问来源于stack exchange，提问作者Paul Pritchard