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

.net-standard blazor c# razor

Вопрос

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

К счастью, я понял, как динамически создавать кнопки в 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, веб-способ делать то, о чем я говорю?

Спасибо за любые рекомендации.

Принятый ответ

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

@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 #.


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

@MyFragment

Создайте метод Change Arrow

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
Является ли этот КБ законным? Да, узнайте, почему