Blazorでどのように動的に作成されたボタンを正しく配線しますか?

.net-standard blazor c# razor

質問

私はウェブフロントエンドにはかなり新しいですが、私が表示していたマトリックスのすべての「欠陥」のためのボタンをトグルするのは素晴らしいことだと思っています(したがって、マトリックスをバックトレースするパスを選ぶことができます)。

幸いにも、私はBlazorでボタンを動的に作成する方法を考え出しました...残念ながら、ボタンのワイヤリング方法はわかりません。

もし私が静的にボタンを作っていたら、最初の欠陥の位置についてはonclick = "@(()=> alignment.ChangeArrow(1))"と答えることができます。

下のコードスニペットで1(iの代わりに)を与えると、すべてのボタンが第1の欠陥のために機能しますが、変数を指定すると、まったく機能しません。

@for (int i = 0; i < alignment.FlawList.Count; i++)
{
    <button class="button" style="background-color:@alignment.ReturnColor(i)" onclick="@(()=>alignment.ChangeArrow(i))">@alignment.FlawList[i] @i</button>
}

私が話していることを行うための優れたブレーザー、ウェブの方法がありますか?

ご指摘ありがとうございます。

受け入れられた回答

これを試して:

@for (int i = 0; i < alignment.FlawList.Count; i++)
{
   var local_i = i;
    <button class="button" style="background-color:@alignment.ReturnColor(local_i)" onclick="@(()=>alignment.ChangeArrow(local_i))">@alignment.FlawList[local_i] @local_i</button>
}

人気のある回答

これは調整でうまくいくかもしれません。 Winformsをすることを私に思い出させる、しかし私はWinFormsの後ろで長いコードをするのが好きではない。 C#でRenderFragmentsを生成できるという点で優れた点があります。


cshtmlにRenderFragmentタグを配置します。 (ページのどこにレンダリングする必要があるか)

@MyFragment

矢印変更メソッドを作成する

void ChangeArrow(int i)
{
    Console.WriteLine("Changing arrow");
}

RenderFragmentデリゲートを生成する

static RenderFragment MyFragment = build =>
    {
        for (int i = 0; i < alignment.FlawList.Count; i++)
        {
            build.OpenElement(i + 101, "button"); //Open Element
            build.AddAttribute(i + 101, "style",
                $"background-color:{alignment.ReturnColor(i)}");
            build.AddAttribute(i + 101, "onclick", ChangeArrow(i)); // Assign Func to the onclick Attribute
            build.AddContent(i + 101, $"{alignment.FlawList[i]} {i}");
            build.CloseComponent(); //Making sure to close Element
        }
    };    


ライセンスを受けた: CC-BY-SA with attribution
所属していない Stack Overflow
ライセンスを受けた: CC-BY-SA with attribution
所属していない Stack Overflow