如何在 Blazor 中正确连接动态创建的按钮?
How do you correctly wire up dynamically created buttons in Blazor?
我对 Web 前端相当陌生,但我认为为我显示的矩阵中的每个 'flaw' 设置切换按钮会很棒(这样您就可以选择回溯矩阵的路径)。
幸运的是,我想出了如何在 Blazor 中动态制作按钮...不幸的是,我似乎无法弄清楚如何 'wire' 按钮。
如果我静态制作一个按钮,我可以说 onclick="@(()=>alignment.ChangeArrow(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 网络方式来完成我所说的事情?
感谢您的指导。
试试这个:
@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>
}
这可能需要调整....不知道性能等。无论如何看起来很有趣。让我想起做 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
}
};
我对 Web 前端相当陌生,但我认为为我显示的矩阵中的每个 'flaw' 设置切换按钮会很棒(这样您就可以选择回溯矩阵的路径)。
幸运的是,我想出了如何在 Blazor 中动态制作按钮...不幸的是,我似乎无法弄清楚如何 'wire' 按钮。
如果我静态制作一个按钮,我可以说 onclick="@(()=>alignment.ChangeArrow(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 网络方式来完成我所说的事情?
感谢您的指导。
试试这个:
@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>
}
这可能需要调整....不知道性能等。无论如何看起来很有趣。让我想起做 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
}
};