求助：基于Telerik Form的泛型动态表单组件实现及绑定问题

核心解决思路 #

• 泛型属性无法直接使用@bind-Value，改用反射读写属性值，配合EditContext手动触发字段变更通知，模拟双向绑定效果
• 针对字符串、日期、枚举等不同属性类型，分别匹配对应的Telerik组件并实现自定义模板
• 保留Telerik Form原生验证体系，确保验证规则正常生效

完整Demo代码 #

@inject IStringLocalizer<InsertEntity<TEntity>> Localizer
@typeparam TEntity where TEntity : class, IValidable<TEntity>, IHub<TEntity>, new()

<TelerikForm EditContext="@FormEditContext" 
             OnValidSubmit="@OnValidSubmitHandler" 
             Class="m-auto mb-5" 
             Model="@EditableEntityDTO" 
             Columns="@(ScreenSize == MediaQuery.Medium ? 1 : 2)" 
             ColumnSpacing="25px" 
             Width="80%">
    <FormValidation>
        <TelerikValidationSummary>
            <Template>
                <div class="custom-validation-message" style="color:red">
                    @if (!string.IsNullOrEmpty(CustomValidationMessage))
                    {
                        <div>
                            <TelerikSvgIcon Icon="@SvgIcon.XOutline" />
                            <span>@Localizer[CustomValidationMessage]</span>
                        </div>
                    }
                </div>
            </Template>
        </TelerikValidationSummary>
    </FormValidation>

    <FormItems>
        @{
            foreach (var property in Properties)
            {
                var fieldIdentifier = new FieldIdentifier(EditableEntityDTO, property.Name);
                
                if (property.PropertyType == typeof(string))
                {
                    <FormItem Field="@property.Name">
                        <Template>
                            <label for="@property.Name" class="k-label k-form-label">
                                @ModelHelper.GetAttributeValue<TEntity, DisplayAttribute>(property.Name)
                            </label>
                            <div class="k-form-field-wrap">
                                <TelerikTextBox 
                                    Placeholder="@ModelHelper.GetAttributeValue<TEntity, PlaceholderAttribute>(property.Name)"
                                    Value="@(property.GetValue(EditableEntityDTO) as string)"
                                    ValueChanged="@((string value) => HandleValueChange(value, property))"
                                    ValueExpression="@(() => property.GetValue(EditableEntityDTO) as string)" />

                                <TelerikValidationMessage For="@fieldIdentifier" />
                            </div>
                        </Template>
                    </FormItem>
                }
                else if (property.PropertyType == typeof(DateTime) || property.PropertyType == typeof(DateTime?))
                {
                    <FormItem Field="@property.Name">
                        <Template>
                            <label for="@property.Name" class="k-label k-form-label">
                                @ModelHelper.GetAttributeValue<TEntity, DisplayAttribute>(property.Name)
                            </label>
                            <div class="k-form-field-wrap">
                                <TelerikDatePicker 
                                    Value="@(property.GetValue(EditableEntityDTO) as DateTime?)"
                                    ValueChanged="@((DateTime? value) => HandleValueChange(value, property))"
                                    ValueExpression="@(() => property.GetValue(EditableEntityDTO) as DateTime?)" />

                                <TelerikValidationMessage For="@fieldIdentifier" />
                            </div>
                        </Template>
                    </FormItem>
                }
                else if (property.PropertyType.IsEnum)
                {
                    <FormItem Field="@property.Name">
                        <Template>
                            <label for="@property.Name" class="k-label k-form-label">
                                @ModelHelper.GetAttributeValue<TEntity, DisplayAttribute>(property.Name)
                            </label>
                            <div class="k-form-field-wrap">
                                <TelerikDropDownList 
                                    Data="@Enum.GetValues(property.PropertyType).Cast<Enum>()"
                                    TextField="@(e => e.GetDisplayName())"
                                    Value="@(property.GetValue(EditableEntityDTO) as Enum)"
                                    ValueChanged="@((Enum value) => HandleValueChange(value, property))"
                                    ValueExpression="@(() => property.GetValue(EditableEntityDTO) as Enum)" />

                                <TelerikValidationMessage For="@fieldIdentifier" />
                            </div>
                        </Template>
                    </FormItem>
                }
            }
        }
    </FormItems>
</TelerikForm>

@code {
    [Parameter]
    public TEntity? Entity { get; set; }

    public TEntity EditableEntityDTO { get; set; } = new TEntity();
    public EditContext? FormEditContext { get; set; }
    public IEnumerable<PropertyInfo> Properties { get; set; } = Enumerable.Empty<PropertyInfo>();
    public string? CustomValidationMessage { get; set; }
    [Inject] public NavigationManager NavManager { get; set; } = default!;

    protected override void OnInitialized()
    {
        // 初始化可编辑实体副本，避免修改原数据
        if (Entity != null)
        {
            EditableEntityDTO = CloneEntity(Entity);
        }
        
        FormEditContext = new EditContext(EditableEntityDTO);
        // 获取TEntity的可读写公共属性（可按需过滤不需要展示的字段）
        Properties = typeof(TEntity).GetProperties(BindingFlags.Public | BindingFlags.Instance)
                                    .Where(p => p.CanRead && p.CanWrite);
    }

    // 通用值变更处理方法
    private void HandleValueChange<T>(T value, PropertyInfo property)
    {
        property.SetValue(EditableEntityDTO, value);
        // 通知EditContext字段变更，触发验证和UI更新
        FormEditContext?.NotifyFieldChanged(new FieldIdentifier(EditableEntityDTO, property.Name));
    }

    // 实体克隆（可根据实际场景替换为序列化/映射工具）
    private TEntity CloneEntity(TEntity entity)
    {
        var json = System.Text.Json.JsonSerializer.Serialize(entity);
        return System.Text.Json.JsonSerializer.Deserialize<TEntity>(json)!;
    }

    // 表单提交逻辑
    private async Task OnValidSubmitHandler()
    {
        try
        {
            // 替换为你的实际保存逻辑
            // await YourEntityService.SaveAsync(EditableEntityDTO);
            NavManager.NavigateTo("/entity-list");
        }
        catch (Exception ex)
        {
            CustomValidationMessage = ex.Message;
        }
    }
}

// 枚举扩展方法：获取DisplayAttribute文本
public static class EnumExtensions
{
    public static string GetDisplayName(this Enum enumValue)
    {
        return enumValue.GetType()
                        .GetMember(enumValue.ToString())
                        .FirstOrDefault()?
                        .GetCustomAttribute<DisplayAttribute>()?
                        .GetName() ?? enumValue.ToString();
    }
}

关键细节说明 #

1. 双向绑定替代方案：放弃@bind-Value，手动实现Value（读取属性值）、ValueChanged（设置属性值）、ValueExpression（提供表达式供验证系统使用）的三元组组合，通过反射完成泛型属性的读写
2. EditContext字段通知：每次值变更后调用NotifyFieldChanged，确保Telerik的验证系统感知到字段变化，实时更新验证状态
3. 类型适配处理：针对不同属性类型匹配对应的Telerik组件，同时兼容可空类型（如DateTime?）
4. 枚举显示优化：通过扩展方法读取枚举的DisplayAttribute文本，提升表单的可读性
5. 实体副本机制：创建实体的克隆副本进行编辑，避免直接修改原数据，适合新增/编辑场景

内容的提问来源于stack exchange，提问作者Miky-Bet