Blazor中自定义Telerik数值文本框双向绑定实现问题

先修正几个核心错误 #

• 拼写与基类错误：BuildRederTree是笔误（正确为BuildRenderTree），根源是自定义组件未继承Blazor组件的基类ComponentBase，且Razor组件继承的类名与代码后置类名不匹配。
• 模型类型错误：decimal Value1不能赋值字符串"Something"，必须使用合法的decimal数值（如0m）。
• 参数类型不匹配：TelerikNumericalTextBox的Min/Max/Step是decimal类型，你定义为string会导致绑定失败，需改为decimal。
• 双向绑定命名违规：Blazor双向绑定要求参数名为Value，对应ValueChanged事件，你用BindValue不符合约定，导致绑定语法报错。

修正后的完整代码 #

1. 页面模型修正 #

public class Model 
{
    // decimal类型赋值合法数值
    public decimal Value1 { get; set; } = 0m;
}

2. 自定义组件代码后置类（CustomNumericalTextBox.razor.cs） #

// 必须继承ComponentBase，Blazor组件的标准基类
public class CustomNumericalTextBox : ComponentBase
{
    // 遵循双向绑定约定：Value参数 + ValueChanged事件
    [Parameter]
    public decimal Value { get; set; }

    [Parameter]
    public EventCallback<decimal> ValueChanged { get; set; }

    [Parameter]
    public string Format { get; set; } = string.Empty;

    // 改为decimal类型，匹配Telerik组件参数类型
    [Parameter]
    public decimal Min { get; set; } = 0m;

    [Parameter]
    public decimal Max { get; set; } = 1m;

    // 新增Step参数，匹配你使用时传入的配置
    [Parameter]
    public decimal Step { get; set; } = 0.01m;

    [Parameter]
    public string Id { get; set; } = string.Empty;
}

3. 自定义组件Razor页面（CustomNumericalTextBox.razor） #

@inherits CustomNumericalTextBox

<FormItem>
    <Template>
        <!-- 绑定到组件的Value参数，自动关联ValueChanged事件实现双向绑定 -->
        <TelerikNumericalTextBox Id="@Id" 
                                 Format="@Format" 
                                 Min="@Min" 
                                 Max="@Max" 
                                 Step="@Step"
                                 @bind-Value="@Value">
        </TelerikNumericalTextBox>
    </Template>
</FormItem>

4. 页面中使用自定义组件 #

<!-- 现在可正常使用@Bind-Value绑定模型属性 -->
<CustomNumericalTextBox Id="ID" 
                        Format="P" 
                        Min="0" 
                        Max="1" 
                        Step="0.01m" 
                        @Bind-Value="@Model.Value1" />

关键说明 #

• Blazor双向绑定的核心规则：参数名（如Value）必须对应参数名+Changed后缀的EventCallback（如ValueChanged），这样@Bind-Value才能自动识别并完成双向绑定。
• 传递给Telerik组件的参数类型必须严格匹配，否则会触发类型转换或绑定失败问题。
• 自定义组件必须继承ComponentBase，才能正确生成Blazor所需的渲染逻辑，解决你遇到的BuildRenderTree相关错误。

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