组件属性不支持复杂内容（混合 C# 和标记）

我正在尝试使用 Razor 参数并将其传递到 Blazor 中进行进一步处理，但在我尝试构建的 @onclick 事件上收到此错误消息“组件属性不支持复杂内容（混合 C# 和标记）” img 标签如下：

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

任何建议将不胜感激！

导致编译器错误的代码的主要问题是调用 IncrementScore 方法的方式。您应该意识到 @onclick 不是您应该为其分配值的 Html 属性，在本例中是获取值的方法。

@onclick 属性是一个编译器指令，指示编译器如何形成一个事件处理程序，该事件处理程序应在单击元素、事件目标等时调用。在您的情况下，您希望调用一个方法并向其传递一个价值。这只能通过使用 lambda 表达式来完成，如下所示：

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

以下代码片段说明了在使用 for 循环或 foreach 循环时如何正确调用 IncrementScore 方法。对于传递给循环中的方法的局部变量来说，这种区别非常重要

您可以将以下代码放入 Index 组件中，然后按原样运行：

@*@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";
}
} 

希望这可以帮助...