Blazor Server自定义InputText组件报Component attributes相关错误如何解决

DevOps 小满

2026-10-6

报错含义

这个报错是Blazor Razor语法的限制：自定义Blazor组件的属性不支持在同一个属性值内混合写静态文本和C#变量的简写写法。你在给InputTextOnInput的class属性赋值时，直接将静态类名form-control form-control-lg cust和C#变量@pNameValidation放在同一对引号里，编译器无法识别这种混合内容，因此抛出错误。

解决方法

以下是三种可直接使用的解决方案：

方案1：字符串插值写法（最便捷，适合简单场景）
把原class属性改写为完整的C#插值表达式，用@()包裹：

<InputTextOnInput  
    class="@($"form-control form-control-lg cust {pNameValidation}")" 
    id="projectnameinput" 
    @bind-value="projectModel.ProjectName" 
    @onkeyup=KeyboardEventHandler />

方案2：提前拼接类名字符串（可读性更高，适合多变量场景）
在当前页面的@code代码块中提前拼接好类名：
```
// 提前构造输入框的class字符串
private string ProjectNameInputClass => $"form-control form-control-lg cust {pNameValidation}";
```
组件属性直接绑定该变量即可：
```
class="@ProjectNameInputClass"
```
方案3：使用CssBuilder构造（适合多条件类名场景）
如果类名需要根据多个条件动态判断，可使用Blazor内置的CssBuilder工具类构造：
```
private string ProjectNameInputClass => new CssBuilder("form-control form-control-lg cust")
    .Add(pNameValidation)
    .Add("is-invalid", () => EditContext.GetValidationMessages(() => projectModel.ProjectName).Any())
    .Build();
```
后续新增条件类名只需要链式调用Add方法即可，逻辑更清晰，不容易出现拼接错误。