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