c# - “Onclick”值总是在 foreache (Blazor) 中取最后一个值
问题描述
我正在尝试在 foreach 中放置一个“onclick”。但由于某种原因，这总是将我带到变量的最后一个值。我给你一个例子，以防有人可以帮助我（在 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}", "");
}
解决方案
这是您发布的代码的轻微修改版本
@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();
}
}
并测试你得到什么。
推荐阅读
- swift - 在 Alamofire 请求中使用 validate() 时如何处理错误？
- java - Java-允许一个线程更新一个值，其他线程等待并跳过临界区
- c - Semmle QL：TaintTracking hasFlow() 污染其参数的源的问题
- android - 状态栏在沉浸模式下保持可见
- intellij-idea - Intelij 的输入问题
- c# - 编译 C# WPF 项目时的 MessageBox
- javascript - 单选按钮选择具有相同名称的其他组按钮
- php - 使用 PHP 向 Android 应用推送通知
- java - 杰克逊禁用@JsonFormat注解
- uitabbar - 无法在 tvOS 13 上设置 UITabBarleadingAccessoryView