c# - 组件属性不支持复杂的内容(混合的C#和标记)

Question

我正在尝试使用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>

任何建议将不胜感激!

Answer 1

由于发生编译器错误而导致代码的主要问题是调用IncrementScore方法的方式。您应该意识到@onclick不是您应该为其分配值的Html属性，在这种情况下，该方法是一种获取值的方法。

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

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

希望这可以帮助...