List of buttons and custom event Handlers in a shared blazor component

Question

I'm at my wits end with this one, I've been pluggin away at all kinds of methods online but don't seem to be getting anywhere.

I have a shared component, in this case a component that mimicks a list view from the web forms era. I would like for any future developers to implement the list view in to projects and be able to build a custom set of buttons to be appended to each row (This bit I can get to work fine). The trouble I'm having is being able to assign a custom Action handler to each button to run a method on the parent component of the list view. I have a class like this:

using System;

namespace Speedy.Razor.SharedComponents.WebFormComponents.Shared
{
    public class CustomAction
    {
        public string Name { get; set; }

        public string Icon { get; set; }

        public Action<int> OnClick { get; set; }
    }
}

Which I am applying to the row like this:

foreach (var customAction in CustomActions)
{
   <span class="@customAction.Icon" @onclick='() => customAction.OnClick(obj.Id)'></span>
}

Which works okay.

Then I'm trying to create the list of custom actions as below:

List<CustomAction> customActions = new List<CustomAction>()
{
    new CustomAction {Name = "Edit", Icon="oi oi-pencil", OnClick =  },
    new CustomAction {Name = "Contacts", Icon="oi oi-person", OnClick = }
};

I've tried delegates but can't seem to fire the required methods unless it is static, which I don't want; or I'd need to create a reference to the class which causes issues in Blazor as a new reference to the class which is on the component causes StateHasChanged to fail.

Any ideas?

Thanks

Answer 1

This is working...copy and run it. Ask question if you have, as I am not sure what I should explain here.

Index.razor

@page "/"

@foreach (var customAction in customActions)
{
count++;
<span class="@customAction.Icon" @onclick="@(() => 
 customAction.OnClick(count))"></span>
}

@code{
List<CustomAction> customActions;

private int count = 10;


private void myclick(int myint)
{
    Console.WriteLine(myint.ToString());
}

private void myclick2(int myint)
{
    Console.WriteLine(myint.ToString());
}

protected override void OnInitialized()
{
    customActions = new List<CustomAction>()
{
    new CustomAction {Name = "Edit", Icon="oi oi-pencil", OnClick = myclick  
},
    new CustomAction {Name = "Contacts", Icon="oi oi-person", OnClick = 
  myclick2} };

    base.OnInitialized();
}
}

Answer 2

assign a custom Action handler to each button to run a method on the parent component of the list view

Assuming that customActions is also a member of that parent component, just define a method at the same level:

List<CustomAction> customActions = new List<CustomAction>()
{
    new CustomAction {Name = "Edit", Icon="oi oi-pencil", OnClick = ClickHandler },
    new CustomAction {Name = "Contacts", Icon="oi oi-person", OnClick = ClickHandler }
};

void ClickHandler(int id)
{
   ... 
}

Answer 3

Thank you for the responses, it really was that simple and after looking at your example I realised the reason I was having such problems which was not obvious in my initial question. I was trying to initialise the List outside of a method which didn't have access to the non-static methods in the class.

Thank you again for helping me spot this!