如何正确连接 Blazor 中动态创建的按钮？答案

【问题标题】：How do you correctly wire up dynamically created buttons in Blazor?如何正确连接 Blazor 中动态创建的按钮？
【发布时间】：2019-03-06 01:29:40
【问题描述】：

我对 Web 前端相当陌生，但我认为为我正在显示的矩阵中的每个“缺陷”设置切换按钮会很棒（因此您可以选择回溯矩阵的路径）。

幸运的是，我知道如何在 Blazor 中动态制作按钮...不幸的是，我似乎不知道如何“连接”按钮。

如果我静态地制作一个按钮，我可以说 onclick="@(()=>alignment.ChangeArrow(1))" 用于第一个缺陷位置，将 1 替换为 2 用于第二个，等等。 .

在下面的代码 sn-p 中给它 1（而不是 i）会使所有按钮都适用于第一个缺陷，但如果我给它变量 i 那么它根本不起作用？

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

是否有更好的 Blazor 网络方式来执行我所说的操作？

感谢您的指导。

【问题讨论】：

标签： c# razor .net-standard blazor

【解决方案1】：

试试这个：

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

【讨论】：

哇！？很好，谢谢！你对此有什么原因吗？有趣的是，我正在尝试各种类似的事情（我从过去的经验中猜想），但并不认为本地化。我在组件中编写了一个单独的函数来调用alignment.ChangeArrow。这是不好的做法，还是这是一种合理的做法。效果很好，谢谢。

【解决方案2】：

这可能与调整一起工作....不知道性能等。无论如何看起来很有趣。让我想起了做 Winforms，但我真的不喜欢在 WinForms 后面做长代码。能够在 C# 中生成 RenderFragments 有一些好处。

在 cshtml 中放置一个 RenderFragment 标签。（无论你需要它呈现在页面上的什么地方）

@MyFragment

创建更改箭头方法

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

生成 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
        }
    };

【讨论】：