Blazor：如何在通用组件中将事件传递给 onClick 函数

Question

我正在为我正在制作的网站制作表格组件。 我希望能够在一个页面上创建、更新、添加和删除表中的条目。 我还将在整个网站上使用这个组件，并以多种类作为输入。 我去这里学习如何做到这一点。 我还认为在表中的每一行都有一个内部组件是明智的。 到目前为止，这是我的代码：

可编辑类.Razor

@using WbotV2.Data
@using System
@using System.Collections
@using System.Reflection
@typeparam TItem

    <tr>
        @foreach (var datum in Data)
        {
            <td>@datum</td>
        }
        <td><button class="btn btn-success">Edit</button></td>
        <td>@ChildContent</td>
    </tr>


@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter] 
    public TItem Item { get; set; }

    public List<string> Data;
    public bool Editable = false;
    protected override async Task OnInitializedAsync()
    {
        Data = GetData(Item);
    }

    public static List<string> GetData<T>(T instance)
    {
        List<string> ret = new List<string>();
        FieldInfo[] infos = typeof(T).GetFields();
        foreach (FieldInfo info in infos)
        {
            ret.Add(info.GetValue(instance).ToString());
        }
        return ret;
    }
}

这个组件应该允许我将一个类作为参数传入，然后编辑它的字段。 也不应将用户带到单独的页面进行编辑（如果可能，我希望将其嵌入表格中）。 我的想法是使用绑定来做到这一点，但类名是任意的，所以我不知道如何将它传递给@bind，这就是我被卡住的地方。

表格组件.razor

@using WbotV2.Data
@using System
@using System.Collections
@using System.Reflection
@typeparam TItem

<table class="table">
    <thead>
        <tr>
            @foreach (string header in Headers)
            {
                <th>@header</th>   
            }
            <td>Edit</td>
            <td>Delete</td>
            <td><button class="btn btn-primary">Add</button></td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <EditableClass Item="@item"><button class="btn btn-danger"  @onclick="(Delete(item))">Delete</button></EditableClass>
        }
    </tbody>
</table>


@code {
        [Parameter] 
        public IList<TItem> Items { get; set; }

        [Parameter] 
        public TableUtilityClass<TItem> DataInstance { get; set; }

    public string[] Headers;

    protected override async Task OnInitializedAsync()
    {
        Headers = GetHeaders();
    }

    public string[] GetHeaders()
    {
        List<string> ret = new List<string>();
        FieldInfo[] infos = typeof(TItem).GetFields();
        foreach (FieldInfo info in infos)
        {
            ret.Add(info.Name);
        }
        return ret.ToArray();
    }

    public void Delete(TItem itemToDelete)
    {
        DataInstance.Delete(itemToDelete);
        StateHasChanged();
        Console.WriteLine("Here");
    }

    public void Add(TItem itemToAdd)
    {
        DataInstance.Add(itemToAdd);
        StateHasChanged();
        Console.WriteLine("Here");
    }

    public List<List<string>> GetDataString<T>(IEnumerable<T> instance)
    {
        List<List<string>> ret = new List<List<string>>();
        foreach (T item in instance)
        {
            ret.Add(new List<string>());
            FieldInfo[] infos = typeof(T).GetFields();
            foreach (FieldInfo info in infos)
            {
                ret[ret.Count - 1].Add(info.GetValue(item).ToString());
                Console.WriteLine($"{info.Name}: {info.GetValue(item)}");
            }
        }
        return ret;
    }
}

该组件应该在一个表中包含大量可编辑的类组件，并处理对它的新条目的添加和删除。 我当前的问题是删除，我已经尝试实施此解决方案，但在此行上出现无法从 void 转换为 Microsoft.AspNetCore.Components.EventCallback 错误<EditableClass Item="@item"><button class="btn btn-danger" @onclick="(Delete(item))">Delete</button></EditableClass>我也试过这个和这个。 我也希望得到一些帮助，要么解决错误，要么找到解决问题的巧妙方法。

表实用程序类.cs

using System.Threading.Tasks;

namespace WbotV2.Data
{
    public abstract class TableUtilityClass<T>
    {
        public abstract Task Delete(T Item);
        public abstract Task Add(T Item);
    }
}

这个类应该只是帮助使与许多不同类型的服务交互变得容易，因为我预计会有很多。

最后，这是我的 Country.razor（表格组件进入的页面）

@page "/countries"

@using WbotV2.Data
@inject WbotCountryService CountryService


<h1>Country Information</h1>


@if (countries == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <TableComponent Items="@countries" DataInstance="@CountryService"/>
}

@code {

    public List<WbotCountry> countries;

    protected override async Task OnInitializedAsync()
    {
        countries = await CountryService.GetCountriesAsync();
    }
}

对于那些想知道 Country 服务看起来像这样的人：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace WbotV2.Data
{
    public class WbotCountryService : TableUtilityClass<WbotCountry>
    {
        public WbotData WbotDataInstance;

        public WbotCountryService()
        {
            WbotDataInstance = WbotData.LoadData();
        }
        public Task<List<WbotCountry>> GetCountriesAsync()
        {
            return Task.FromResult(WbotDataInstance.countries);
        }

        public override Task Delete(WbotCountry c)
        {
            WbotDataInstance.countries.Add(c);
            WbotDataInstance.SaveData();

            return Task.CompletedTask;
        }
        public override Task Add(WbotCountry c)
        {
            WbotDataInstance.countries.Remove(c);
            WbotDataInstance.SaveData();

            return Task.CompletedTask;
        }
    }
}

任何帮助都会受到赞赏！

Answer 1

这是有效的：

可编辑类.razor

@using WbotV2.Data
@using System
@using System.Collections
@using System.Reflection
@typeparam TItem

<tr>
    @foreach (var datum in Data)
    {
        <td>@datum</td>
    }
    <td><button class="btn btn-success">Edit</button></td>
    <td>@ChildContent</td>
</tr>


@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    [Parameter]
    public EventCallback<TItem> Delete { get; set; }

    [Parameter]
    public TItem Item { get; set; }

    public List<string> Data;
    public bool Editable = false;
    protected override void OnInitialized()
    {
        Data = GetData(Item);
    }

    public static List<string> GetData(TItem instance)
    {
        List<string> ret = new List<string>();
        FieldInfo[] infos = typeof(TItem).GetFields(BindingFlags.NonPublic | BindingFlags.Instance
            | BindingFlags.Public);
        foreach (FieldInfo info in infos)
        {
            ret.Add(info.GetValue(instance).ToString());
        }
        return ret;
    }
}

请注意我所做的更改以及我添加的代码。

TableComponent.razor

<EditableClass Item="@item"><button class="btn btn-danger" @onclick="@(() => Delete(item))">DeleteMe</button></EditableClass>


public void Delete(TItem itemToDelete)
    {
        DataInstance.Delete(itemToDelete);
      //  StateHasChanged();
       // Console.WriteLine("Here");
    }

还有其他问题，但现在，我没有时间。 我会努力进一步改进它。 此服务可以向您展示如何创建您的服务以及它如何与组件通信： https : //github.com/aspnet/samples/blob/master/samples/aspnetcore/blazor/FlightFinder/FlightFinder.Client/Services/AppState.cs

希望这可以帮助...