'Component attributes do not support complex content (mixed C# and markup) error message

I am working on validation on a form in a blazor server application. I created the component below that I am using

    @* 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 {

    }

I am using the inputTextOnInput in this form

     <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>

since I created this I started getting the error message below

Component attributes do not support complex content (mixed C# and markup). Attribute: 'class', text: 'form-controlform-control-lgcustpNameValidation

Do you have an idea of what this implies?

c#-4.0blazor-server-side


Solution 1:[1]

You cannot use the class attribute in your new component if you have declared a specific parameter for that.

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

you need to remove class from above and pass it via CssClass.

Solution 2:[2]

For some reason Blazor/Razor don't let you mix text literals and variables within an attribute value. So when you try and do

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

the class statement is invalid because it contains literals "form-control", "form-control-lg" and "cust" and also a variable "@pNameValidation".

My solution to this problem was to create a little method on a component base class which allows mixing the two things.

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

now all I have to do is to write my line like this

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

and by using params, you can also just add as many string variables as you want.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Nich Overend

Related Questions