"Onclick“值总是取foreache (Blazor)中的最后一个值

Question

我正在尝试将一个"onclick“放在foreach中。但由于某些原因，这总是将我带到我的变量的最后一个值。我给你一个例子，以防有人可以帮助我(在blazor中)：

变量：

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

代码：

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

更新：

这是我真正的代码，另一个是一个例子(有些东西是西班牙语的)。

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

问题出在<li> @onclick = "@ (() => OnClickPieza (pieza.RefId))"这一行，这个值总是返回列表中的最后一个值。

相反，他给我返回了正确的文章<p class="text-gray-900 text-sm font-medium">@pieza.Articulo</p>

更新2：

在我的代码中添加了这个：<p class="text-gray-900 text-sm font-medium">@pieza.Articulo @pieza.RefId</p>

​

​

​

​

正如你所看到的，我得到了id 22，但是如果我点击它，它就会得到23 (这是最后一个)

更新3

我包含了我的类OnClickPieza和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

以下是您发布的代码的略微修改版本，可以正常工作

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

}

更新

这是你最新的例子：

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

}

第二次更新

复制您的页面并将其剥离为以下内容：

<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();
    }

}

然后测试一下你得到了什么。

Answer 2

好的，

我想我找到了错误..。由于某种原因，这行代码再次让我的dom渲染……移除它是可行的

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