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

Question

I am trying to use a Razor argument and pass it into Blazor for further processing, but I get this error message "Component attributes do not support complex content (mixed C# and markup)" on the @onclick event I am trying to build on the img tag below:

<tr>

            @{
                for (int j = 0; j < Candidates.Length; j++)
                {
                    <th>
                        <div class="grow">

                            <img src="/Candidates/@(Candidates[j].ToString()).jfif" alt="@Candidates[j].ToString()" @onclick="IncrementScore(@j)" />
                        </div>
                    </th>
                }
            }
        </tr>

Any suggestions would be greatly appreciated!

Answer 1

The main issue with your code because of which you've got a compiler error is the way you call the IncrementScore method. You should realize that @onclick is not an Html attribute to which you should assign a value, in this case a method that gets a value.

The @onclick attribute is a compiler directive, instructing the compiler how to form an event handler that should be invoked when the element is clicked, the target of the event, etc. In your case, you wish to call a method and pass it a value. This can only be done by using a lambada expression as follows:

@onclick="@(()=> IncrementScore(<value to pass to the method>))"

The following code snippet illustrates how to call the IncrementScore method properly when you're using a for loop or foreach loop. The distinction is very important regarding local variables that are passed to methods in loops

You can put the following code in the Index component, and run it as is:

@*@for (int j = 0; j < Candidates.Count; j++)
{
    int localVariable = j;

    <img src="@Candidates[j].Src"  @onclick="@(()=> 
                         IncrementScore(localVariable))" />
}*@

@foreach (var candidate in Candidates)
{
    Random random = new Random();

    <img src="@candidate.Src" @onclick="@(()=> 
                              IncrementScore(random.Next(0,9)))" />
}


<p>@Scores.ToString()</p>

@code {
   List<Candidate> Candidates = Enumerable.Range(1, 10).Select(i => new 
           Candidate { CandidateName = i }).ToList();

private int Scores;

private Task IncrementScore(int score)
{

    Scores = score;
    return Task.CompletedTask;
}

public class Candidate
{
    public int CandidateName { get; set; }
    public string Src => $"{CandidateName}.jfif";
}
} 

Hope this helps...

Answer 2

I came to this page in search for a solution for the same error:

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

In my case was all about the href link construction. I followed your solution on the accepted answer comment and it worked. Thanks @Øyvind Vik

Just in case it help others i'll leave my code as an example.

foreach (List<string[]> lss in searchResults)
            {
                var link = $"genericform/{entidadeSelecionada}/{lss.FirstOrDefault()[1]}";
                <tr>
                    @foreach (string[] st in lss)
                    {
                        if (camposAListar.Contains(st[0].ToLower()))
                        {
                            <td>@st[1]</td>
                        }
                    }

                    <td>
                        <NavLink href="@link">
                            <span class="oi oi-list-rich" aria-hidden="true"></span> Utilizador
                        </NavLink>
                    </td>
                </tr>
            }

Answer 3

You may also encapsulate the complex content in a code method:

<NavLink href="@GetLink()" class="button is-link">
   Details
</NavLink>


@code {

   [Parameter]
   public string? Id { get; set; }

   private string GetLink()
   {
       return this.Id != null ? $"/details/{this.Id}" : "#";
   }

}