"Onclick" value takes always last value inside foreache (Blazor)

Question

I am trying to put an "onclick" inside a foreach. But for some reason this always takes me to the last value of my variable. I give you an example in case someone can help me (in blazor):

variable:

        public Dictionary<string, string> navs { get; set; } = new Dictionary<string, string>()
        {
            { "/home", "Home" },
            { "/contact", "Contact" },
            { "/about", "About" },
        };

code:

<ul>
    @foreach(var nav in navs)
    {
        <li @onclick="@(() => _Nav.NavTo(nav.Key, ""))"> @nav.Value</li> @*nav.Value returns correct value, but Key ever return "/about"*@
    }
</ul>

Update:

this is my real code, the other was an example (some things are in Spanish).

 <ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
        @foreach (var pieza in CV.Piezas) {
            @* @(pieza.Situacion == "Montada revisada" ? "shadow-blue-500" : pieza.Situacion == "Almacenada" ? "shadow-green-500" : "shadow") *@
            <li class="col-span-1 relative p-2 rounded-lg bg-white shadow" @onclick="@(() => OnClickPieza(pieza.RefId))">
                <div class="pb-2 border-b">
                    <div class="block relative w-full pb-24">
                        @if (string.IsNullOrEmpty(pieza.Thumb))
                        {
                            <img class="absolute top-0 left-0 w-full h-full object-center object-contain pointer-events-none" src="/images/bg_nofoto.jpg" alt="">
                        } else {
                            <img class="absolute top-0 left-0 w-full h-full object-center object-contain pointer-events-none" onerror="if (this.src != '/images/bg_nofoto.jpg') this.src = '/images/bg_nofoto.jpg';" src=@pieza.Thumb alt="">
                        }
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between">
                        <div class="relative mt-1 space-y-2">
                            <p class="text-gray-900 text-sm font-medium">@pieza.Articulo</p>
                            <p class="">
                                @if (pieza.Situacion == "Montada revisada")
                                {
                                    <span class="px-2 py-1 text-white text-xs font-medium bg-metal rounded-full">@pieza.Situacion</span>
                                }
                                else if (pieza.Situacion == "Almacenada")
                                {
                                    <span class="px-2 py-1 text-white text-xs font-medium bg-metal rounded-full">@pieza.Situacion</span>
                                }
                                else
                                {
                                    <span class="px-2 py-1 text-white text-xs font-medium bg-gray-100 rounded-full">@pieza.Situacion</span>
                                }
                            </p>
                        </div>
                        <div class="relative mt-1">
                            <a class="inline-flex items-center justify-center w-8 h-8 text-gray-400 hover:text-gray-500 cursor-pointer" onclick="alert('Claudio esto es un toggle'); return false;">
                                <span class="sr-only">Open options</span>
                                <!-- Heroicon name: solid/dots-vertical mr-2 -->
                                <svg class="w-5 h-5 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                                </svg>
                            </a>
                            <div class="fixed inset-0 transition-opacity" onclick="alert('Aquí esconde el toggle'); return false;" aria-hidden="true"></div>
                            <ul class="absolute top-8 -right-2 w-56 mt-2 py-1 text-left bg-white rounded-md shadow-lg divide-y divide-gray-100 z-10" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                                <li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Pasar a vendido</li>
                                <li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Pasar a extraviado</li>
                                <li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Pasar a mordido por rata</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        }
        <!-- More items... -->
    </ul>

The problem is in the line <li> @onclick = "@ (() => OnClickPieza (pieza.RefId))" this value always returns the last value in my list.

Instead <p class="text-gray-900 text-sm font-medium">@pieza.Articulo</p> he returns me the correct article

Update 2:##

Added this on my code: <p class="text-gray-900 text-sm font-medium">@pieza.Articulo @pieza.RefId</p>

As you can see, I get the id 22, but if I click it, it takes me the 23 (which is the last one)

Update 3##

I include my class OnClickPieza and Navto

        public void NavTo(string url, string param1, string param2 = default, string param3 = default, bool forceload = false) {
            Param1 = param1;
            Param2 = param2;
            Param3 = param3;
            _localStorage.SetAsync("sesionTimeout", DateTime.Now.AddMinutes(ApplicationSettings.SessionTimeout));
            NavManager.NavigateTo(url, forceload);
        }

        public void OnClickPieza(int id) {
            _Nav.NavTo($"/pieza/{id}?ref={CV.SelectedVehiculo.Id}&accion={CV.OrdenAccion}", "");
        }

Answer 1

Okey,

I think I found the error ... For some reason this line was making my dom render again ... Removing it works

@*<div class="fixed inset-0 transition-opacity" aria-hidden="true"></div>*@

Answer 2

Here's a slighlty modified version of the code you posted that works

@page "/"

<h1>Hello, world!</h1>

    Welcome to your new app.

<ul>
    @foreach (var nav in navs)
    {
        <li @onclick="@(() => NavTo(nav.Key, ""))"> @nav.Value</li>
        @*nav.Value returns correct value, but Key ever return "/about"*@
    }
</ul>

<div>Nav To = @_message</div>


@code {

    public Dictionary<string, string> navs { get; set; } = new Dictionary<string, string>()
    {
            { "/home", "Home" },
            { "/contact", "Contact" },
            { "/about", "About" },
        };

    private string _message = "Starting";

    private void NavTo(string key, string x)
    {
        _message =  key;
    }

}

Update

And here is you latest example:

@page "/"

<h1>Hello, world!</h1>

    Welcome to your new app.

<div>Nav To = @_message</div>

<ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
    @foreach (var pieza in Piezas)
    {
        @* @(pieza.Situacion == "Montada revisada" ? "shadow-blue-500" : pieza.Situacion == "Almacenada" ? "shadow-green-500" : "shadow") *@
        <li class="col-span-1 relative p-2 rounded-lg bg-white shadow" @onclick="@(() => OnClickPieza(pieza.RefId))">
            <div class="pb-2 border-b">
                <div class="block relative w-full pb-24">
                    @if (string.IsNullOrEmpty(pieza.Thumb))
                    {
                        <img class="absolute top-0 left-0 w-full h-full object-center object-contain pointer-events-none" src="/images/bg_nofoto.jpg" alt="">
                    }
                    else
                    {
                        <img class="absolute top-0 left-0 w-full h-full object-center object-contain pointer-events-none" onerror="if (this.src != '/images/bg_nofoto.jpg') this.src = '/images/bg_nofoto.jpg';" src=@pieza.Thumb alt="">
                    }
                </div>
            </div>
            <div class="flex-1">
                <div class="flex justify-between">
                    <div class="relative mt-1 space-y-2">
                        <p class="text-gray-900 text-sm font-medium">@pieza.Articulo</p>
                        <p class="">
                            @if (pieza.Situacion == "Montada revisada")
                            {
                                <span class="px-2 py-1 text-white text-xs font-medium bg-metal rounded-full">@pieza.Situacion</span>
                            }
                            else if (pieza.Situacion == "Almacenada")
                            {
                                <span class="px-2 py-1 text-white text-xs font-medium bg-metal rounded-full">@pieza.Situacion</span>
                            }
                            else
                            {
                                <span class="px-2 py-1 text-white text-xs font-medium bg-gray-100 rounded-full">@pieza.Situacion</span>
                            }
                        </p>
                    </div>
                    <div class="relative mt-1">
                        <a class="inline-flex items-center justify-center w-8 h-8 text-gray-400 hover:text-gray-500 cursor-pointer" onclick="alert('Claudio esto es un toggle'); return false;">
                            <span class="sr-only">Open options</span>
                            <!-- Heroicon name: solid/dots-vertical mr-2 -->
                            <svg class="w-5 h-5 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                            </svg>
                        </a>
                        <div class="fixed inset-0 transition-opacity" onclick="alert('Aquí esconde el toggle'); return false;" aria-hidden="true"></div>
                        <ul class="absolute top-8 -right-2 w-56 mt-2 py-1 text-left bg-white rounded-md shadow-lg divide-y divide-gray-100 z-10" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                            <li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Pasar a vendido</li>
                            <li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Pasar a extraviado</li>
                            <li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Pasar a mordido por rata</li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    }
    <!-- More items... -->
</ul>

@code {

    public Dictionary<string, string> navs { get; set; } = new Dictionary<string, string>()
{
            { "/home", "Home" },
            { "/contact", "Contact" },
            { "/about", "About" },
        };

    public class Pieza
    {
        public string RefId { get; set; }
        public string Text { get; set; }
        public string Situacion { get; set; }
        public string Articulo { get; set; }
        public string Thumb { get; set; }
    }

    public List<Pieza> Piezas = new List<Pieza>()
{
           new Pieza () { RefId = "/home", Text = "Home" },
            new Pieza () { RefId =  "/contact", Text = "Contact" },
            new Pieza () {  RefId = "/about", Text = "About" },
    };

    private string _message = "Starting";

    private void NavTo(string key, string x)
    {
        _message = key;
    }

    private void OnClickPieza(string key)
    {
        _message = key;
    }

}

Second Update

Make a copy of your page and strip it back to this:

<ul>
    @foreach (var pieza in CV.Piezas)
    {
        <li @onclick="@(() => OnClickPieza(pieza.RefId))">
            pieza.RefId
        </li>
    }
</ul>
<div>Nav To = @_message</div>
@code {
    private string _message = "Starting";

    private void OnClickPieza(int key)
    {
        _message = key.ToString();
    }

}

And test what you get.