☰

コンポーネント属性は複雑なコンテンツ（C#とマークアップの混合）をサポートしていません 質問する

tag-icon • tag-icon c# razor blazor
コンポーネント属性は複雑なコンテンツ（C#とマークアップの混合）をサポートしていません 質問する

Razor 引数を使用して Blazor に渡してさらに処理しようとしていますが、以下の img タグで構築しようとしている @onclick イベントで「コンポーネント属性は複雑なコンテンツ (C# とマークアップの混合) をサポートしていません」というエラー メッセージが表示されます。

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

ご提案があればぜひお聞かせください。

ベストアンサー1

コンパイラ エラーの原因となっているコードの主な問題は、IncrementScore メソッドの呼び出し方法です。@onclick は、値を割り当てる HTML 属性ではなく、この場合は値を取得するメソッドではないことに注意する必要があります。

@onclick 属性はコンパイラ ディレクティブであり、要素がクリックされたときに呼び出されるイベント ハンドラー、イベントのターゲットなどを作成する方法をコンパイラに指示します。この場合、メソッドを呼び出して値を渡す必要があります。これは、次のようにラムダ式を使用することによってのみ実行できます。

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

お役に立てれば...

おすすめ記事