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属性是编译器指令，它指示编译器如何形成事件处理程序，该事件处理程序在单击元素时，事件的目标等时应被调用。在您的情况下，您希望调用方法并传递一个值。这只能通过使用如下的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";
}
}

希望这对您有帮助...

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

1 个答案: