组件属性不支持复杂内容（混合 C# 和标记）错误消息答案

【问题标题】：Component attributes do not support complex content (mixed C# and markup) error message组件属性不支持复杂内容（混合 C# 和标记）错误消息
【发布时间】：2021-08-26 03:28:56
【问题描述】：

我正在对 blazor 服务器应用程序中的表单进行验证。我在下面创建了我正在使用的组件

    @* Inherits from the original InputText component *@
    @inherits InputText
    @* Bind the oninput event *@
    <input @attributes="AdditionalAttributes"
           class="@CssClass"
           value="@CurrentValue"
           @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />

    @code {

    }

我在这个表单中使用 inputTextOnInput

     <EditForm EditContext="@EditContext">
                <DataAnnotationsValidator />
                <div class="mb-5">
                    <label for="projectnameinput" class="form-label">Name your project*</label>
                    <InputTextOnInput  class="form-control form-control-lg cust @pNameValidation" id="projectnameinput" @bind-value="projectModel.ProjectName" @onkeyup=KeyboardEventHandler />
                </div>
     </EditForm>

自从我创建它后，我开始收到下面的错误消息

组件属性不支持复杂内容（混合 C# 和标记）。属性：'class'，文本：'form-controlform-control-lgcustpNameValidation

你知道这意味着什么吗？

【问题讨论】：

标签： c#-4.0 blazor-server-side

【解决方案1】：

如果您已为此声明特定参数，则不能在新组件中使用 class 属性。

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

您需要从上面删除class 并通过CssClass 传递它。

【讨论】：

cssclass在哪里？
如果您确实想要拥有额外的 css，请查看属性 splatting 和/或使用额外 css 作为属性传递参数。

【解决方案2】：

出于某种原因，Blazor/Razor 不允许您在属性值中混合文本文字和变量。所以当你尝试去做时

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

class 语句无效，因为它包含文字“form-control”、“form-control-lg”和“cust”以及变量“@pNameValidation”。

我对这个问题的解决方案是在组件基类上创建一个小方法，它允许混合这两种东西。

    public string Class(string classStr, params string[] objStrs)
    {
        var output = new StringBuilder();
        output.Append(classStr);
        output.Append(' ');
        output.AppendJoin(' ', objStrs);
        return output.ToString();
    }

现在我要做的就是这样写我的台词

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

通过使用参数，您还可以添加任意数量的字符串变量。

【讨论】：