¿Cómo cablear correctamente los botones creados dinámicamente en Blazor?

.net-standard blazor c# razor

Pregunta

Soy bastante nuevo en la interfaz web, pero pensé que sería genial tener botones de alternar para cada "defecto" en la matriz que estaba mostrando (para que pueda elegir una ruta que retroceda hacia la matriz).

Afortunadamente, descubrí cómo hacer botones dinámicamente en Blazor ... Desafortunadamente, parece que no puedo entender cómo "cablear" los botones.

Si estuviera haciendo un botón de forma estática, podría decir onclick = "@ (() => alineación.CambiarCarrera (1))" para la ubicación del primer defecto, reemplace el 1 con un 2 para el segundo, etc ...

Dando 1 (en lugar de i) en el siguiente fragmento de código hace que todos los botones funcionen para el primer defecto, pero si le doy la variable i, ¿entonces no funciona en absoluto?

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

¿Hay un Blazor mejor, una forma web de hacer lo que estoy hablando?

Gracias por cualquier orientación.

Respuesta aceptada

Prueba esto:

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

Respuesta popular

Esto puede funcionar con ajustes ... no tengo idea sobre el rendimiento, etc. Parecía divertido hacerlo de todos modos. Me recuerda a hacer Winforms, pero realmente no me gusta hacer código largo atrás en WinForms. Hay algo bueno acerca de poder generar RenderFragments en C #.


Coloque una etiqueta RenderFragment en el cshtml. (Donde sea que lo necesites renderizado en la página)

@MyFragment

Crear el método de cambio de flecha

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

Generar el delegado de 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
        }
    };    


Licencia bajo: CC-BY-SA with attribution
No afiliado con Stack Overflow
Licencia bajo: CC-BY-SA with attribution
No afiliado con Stack Overflow