Blazor 小技巧之 lambda传参

我们的按钮点击事件，基本上都是一个无参的方法或者是一个MouseEnvent方法。

这里以BootstrapBlazor的Button为例，它的点击回调是这样的：

EventCallback<MouseEventArgs>。

下面我们来看一个例子：

首先定义一个Foo作为内容

public class Foo
    {
        public int Id { get; set; }
        
        public string Name { get; set; }
    }

然后我们在OnInitialized中给一个初始值

protected override void OnInitialized()
    {
        base.OnInitialized();
        Foos = new List<Foo>()
        {
            new Foo()
            {
                Name = "a"
            },
            new Foo()
            {
                Name = "b"
            },
            new Foo()
            {
                Name = "c"
            },
            new Foo()
            {
                Name = "d"
            },
            new Foo()
            {
                Name = "e"
            },
            new Foo()
            {
                Name = "f"
            }
        };
    }

我们再创建一个无参的Callback方法

private async Task Callback()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "点击了按钮"
        });
    }

最后我们在razor文件中循环生成一个列表

@foreach (var foo in Foos)
{
    
    <Button OnClick="Callback">@foo.Name</Button>
}

这时候我们看到的Button大概是这样的

这时候，一个Callback显然很难实现我们的需求。因为我们无法区分究竟点击是哪个按钮，不管点击哪个按钮，我们都只能输出固定的内容。

这时候怎么办呢，我们可以用一个简单的lambda表达式来生成一个匿名方法传参。

首先我们改造一下我们的Callback，加一个参数接收我们的foo.Name。

private async Task Callback(string name)
    {
        await MessageService.Show(new MessageOption()
        {
            Content = $"点击了按钮{name}"
        });
    }

这个时候，我们的按钮就会报错，因为按钮的OnClick方法并没有一个参数为字符串的重载，所以我们需要改造一下我们的Button，用lambda做一个匿名方法出来调用它。

@foreach (var foo in Foos)
{
    
    <Button OnClick="() => { Callback(foo.Name);}">@foo.Name</Button>
}

这样我们就能轻松的将名字传到对应的方法里使用了。