从Blazor中的生成的按钮调用函数 [英] Calling function from generated button in Blazor

问题描述

我目前正在尝试通过一些自动生成的按钮调用方法，这些按钮是通过某些配置设置的.因此按钮的数量是可配置的.我有如下所示的页面.我的问题是，如果我有3个按钮并且按了1个按钮，则正确调用了ButtonClicked，但是索引始终为3-for语句的int i结束值.我当然希望将按钮的索引传递给函数.一个明显的解决方案是将一个按钮包装在我自己的组件中，该组件随后将带有一个索引参数，并且可以将其传递给一个buttonclicked事件，但是如何在不构建自己的按钮组件的情况下使下面的代码正常工作?

I'm currently trying to call a method from some autogenerated buttons, that are set up from some configuration. So the number of buttons is configurable. I have the blazor page as shown below. My problem is that if I have 3 buttons and I press one then ButtonClicked is called correctly, but the index is always 3 - the end value of int i for the for-statement. I of course want the index of the button to be passed to the function. One obvious solution would be to wrap a button in my own component that would then take an index-parameter and this could be passed along to a buttonclicked event, but how can I make the code below work without making my own button component?

@inject Navigator navigator

<div class="chooseDiv">
    @for (int i = 0; i < Buttons.Count; i++)
    {
        <button type="button" class="btn btn-primary btn-lg" style="margin:10px" onclick="@((ui) => ButtonClicked(i))">@Buttons[i]</button>
    }
</div>

@functions {
    [Parameter] List<string> Buttons { get; set; } = new List<string>() { "You forgot to declare your buttons" };

    private void ButtonClicked(int index)
    {
        Console.WriteLine("Button clicked with index:" + index);
        navigator.CurrentResult = index;
        navigator.Next();
    }
}

推荐答案

我想您应该按如下所示将局部变量添加到循环中:

I guess you should add a local variable to your loop as follows:

@for (int i = 0; i < Buttons.Count; i++)
    {
        var local = i;
        <button type="button" class="btn btn-primary btn-lg" style="margin:10px" onclick="@((ui) => ButtonClicked(local))">@Buttons[i]</button>
    }

这是标准的C#行为，与Blazor无关，在该行为中，lambda表达式@((ui) => ButtonClicked(i))可以访问变量而不是其值.您必须定义一个局部于循环的变量，否则您的lambda表达式将始终调用ButtonClicked(i)，并且在循环结束时我等于3.

This is a standard C# behavior, not related to Blazor, where the lambda expression @((ui) => ButtonClicked(i)) has access to a variable and not to its value. You've got to define a variable which is local to your loop, otherwise your lambda expression always calls ButtonClicked(i) and i equals 3 when the loop ends.

希望这对您有帮助...

Hope this helps...

这篇关于从Blazor中的生成的按钮调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！