组件属性不支持复杂内容(混合的C#和标记) [英] Component attributes do not support complex content (mixed C# and markup)

问题描述

我正在尝试使用Razor参数并将其传递给Blazor进行进一步处理，但在我尝试在下面的img标记上构建的@onClick事件上，我收到了这样的错误消息"Component Attributes Do Support Complex Content(Mixed C#and Markup)"：

<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属性是一个编译器指令，指示编译器如何形成一个事件处理程序，在单击元素、事件的目标等时应该调用该事件处理程序。在您的例子中，您希望调用一个方法并向其传递一个值。这只能通过使用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#和标记)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！