Question

我对Web前端还很陌生，但是我认为为我显示的矩阵中的每个“缺陷”都具有切换按钮会很棒（这样您就可以选择一个回溯矩阵的路径）。

幸运的是，我想出了如何在Blazor中动态制作按钮的方法。不幸的是，我似乎无法弄清楚如何“连接”按钮。

如果我是静态地制作一个按钮，则可以对第一个缺陷位置说onclick =“ @（（）=> alignment.ChangeArrow（1））”“，对第二个缺陷位置用1替换为2，以此类推。

在下面的代码片段中将其赋予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网络方法可以执行我正在谈论的事情？

感谢您的指导。

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

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

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

2 个答案: