Come si cablano correttamente i pulsanti creati dinamicamente in Blazor?

.net-standard blazor c# razor

Domanda

Sono abbastanza nuovo per il frontend web, ma ho pensato che sarebbe stato bello avere pulsanti per ogni "difetto" in una matrice che stavo visualizzando (in modo da poter scegliere un percorso che ricalcasse la matrice).

Fortunatamente, ho capito come creare i pulsanti dinamicamente in Blazor ... Purtroppo, non riesco a capire come collegare i pulsanti.

Se stavo facendo un pulsante in modo statico, potrei dire onclick = "@ (() => alignment.ChangeArrow (1))" per la prima posizione del difetto, sostituire il 1 con un 2 per il secondo, ecc ...

Dandogli 1 (invece di i) nello snippet di codice seguente tutti i pulsanti funzionano per il primo difetto, ma se gli do la variabile, allora non funziona affatto?

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

C'è un Blazor migliore, un modo per fare ciò di cui sto parlando?

Grazie per qualsiasi consiglio.

Risposta accettata

Prova questo:

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

Risposta popolare

Questo può funzionare con aggiustamenti .... nessuna idea sulle prestazioni ecc. Sembrava comunque divertente da fare. Mi ricorda di fare Winforms, ma in realtà non mi piace fare codice lungo dietro in WinForms. C'è qualcosa di carino nell'essere in grado di generare RenderFragments in C #.


Inserire un tag RenderFragment in cshtml. (Ovunque ne abbiate bisogno, renderizzato sulla pagina)

@MyFragment

Creare il metodo freccia di cambiamento

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

Genera il delegato 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
        }
    };    


Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
È legale questo KB? Sì, impara il perché
Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
È legale questo KB? Sì, impara il perché