Как правильно подключить динамически созданные кнопки в Blazor?

Question

Я довольно новичок в веб-интерфейсе, но подумал, что было бы здорово иметь переключающие кнопки для каждого «изъяна» в матрице, которую я отображал (чтобы вы могли выбрать путь, возвращающий вверх по матрице).

К счастью, я понял, как динамически создавать кнопки в Blazor ... К сожалению, я не могу понять, как "связать" кнопки.

Если я статически делал кнопку, яможно сказать onclick = "@ (() => alignment.ChangeArrow (1))" для первого местоположения дефекта, замените 1 на 2 для второго и т. д. *

давая ему 1 (вместо этогоиз i) в приведенном ниже фрагменте кода все кнопки работают для первого недостатка, но если я передам ему переменную i, то она вообще не будет работать?

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

Есть ли лучший Blazor,способ сделать то, о чем я говорю?

Спасибо за любые советы.

Answer 1

Это может работать с корректировками .... понятия не имею о производительности и т. Д. В любом случае это было забавно.Напоминает мне о работе с Winforms, но мне действительно не нравится делать длинный код в WinForms.Есть что-то приятное в возможности генерировать RenderFragment в C #.

---

Поместить тег RenderFragment в cshtml.(Везде, где вам нужно, чтобы он отображался на странице)

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

Answer 2

Попробуйте это:

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