时间戳

首页 > 解决方案 > 使用 Blazor 单击时发送动态参数

c# - 使用 Blazor 单击时发送动态参数

问题描述

我正在尝试创建一个红色方块的网格（10 x 10）。每个正方形都是一个<div>具有@onclick功能的元素。单击一个元素时，它应该将颜色变为红色。我已经设法使用以下代码将每个元素的背景绑定到一个返回颜色的方法：

@code{
    private string[,] _colors = new string[10,10];

    protected override void OnInitialized() {
        for(int r = 0; r < _colors.GetLength(0); r++) {
            for(int c = 0; c < _colors.GetLength(1); c++) {
                _colors[r, c] = "#FF0000";
            }
        }
    }

    private void ChangeColor(int r, int c) {
        _colors[r,c] = "#0000FF";
    }

    public string GetColor(int r, int c) {
        return _colors[r,c];
    }
}

所有非常基本的东西，似乎按预期工作。但是，我正在努力将参数r和c传递给ChangeColor，因为<div>元素也是由代码生成的，就像这样（受这篇文章的启发）：

<div class="grid">
@for (int r = 0; r < 10; r++) {
    <div class="row">
    @for (int c = 0; c < 10; c++) {
        <div class="box"><div class="inner" style="background-color: @(GetColor(r,c));" @onclick="() => ChangeColor(r, c)">@((r*10+c).ToString())</div></div>
    }
    </div>
}
</div>

我认为r和c会得到它们在生成时的值，但它们总是 10（它们在 for 循环之后停止的值）。

有什么方法可以将 r和c “存储”到元素并在我的onclick活动中使用它？

标签： c#blazorblazor-server-side

解决方案

它被称为“捕获循环变量”，谷歌。Lambda 和 for 循环不能很好地结合在一起。

快速解决方法是制作副本：

@for (int r = 0; r < 10; r++) {
    int rr = r;
    <div class="row">
    @for (int c = 0; c < 10; c++) {
        int cc = c;
        <div class="box"><div class="inner" style="background-color: @(GetColor(r,c));" @onclick="() => ChangeColor(rr, cc)">@((r*10+c).ToString())</div></div>
    }

推荐阅读