Asp.net core 使用JQuery Datatable时单击事件不在Blazor中工作

我已经在OnAfterRenderAsync中初始化了Datatable，它工作正常 但onclick事件不起作用

网格剃须刀 当您说“我已经在OnAfterRenderAsync中初始化了Datatable”时，下面的示例就是这样做的，如果您复制、粘贴并运行它，您将发现没有任何内容得到渲染。您已经在呈现页面后获取了数据。在

OnInitializedAsync

中获取数据，它就会工作

您还可以说“它工作正常，但onclick事件不工作。”

EditData

方法应该在

Grid.razor

中，而不是

GridModel

中，它似乎在提供的代码片段中

下面的代码显示了一个简单的工作示例（使用

OnInitializedAsync

中的

GetData

）

@page”/Test
@foreach（国家中的var国家）
{
@国家，国家编辑
}
@代码{
类模型
{
公共int Id{get；set；}
公共字符串国家{get；set；}
}
私有列表国家=新列表（）；
受保护的任务OnClick（int-id）
{
var x=id；
返回Task.CompletedTask；
}
受保护的覆盖任务OnInitializedAsync（）
{
//GetData（）；
返回base.OnInitializedAsync（）；
}
AfterRenderAsync（bool firstRender）上受保护的覆盖任务
{
GetData（）；
返回base.OnAfterRenderAsync（firstRender）；
}
受保护的void GetData（）
{
国家=新名单（）
{
新模型（）{Id=1，Country=“UK”}，
新型号（）{Id=2，Country=“西班牙”}，
新型号（）{Id=3，Country=“葡萄牙”}
};
}
}

我保留了一些我认为是不言自明的东西，例如GridModel.cs继承了ComponentBase类，所以事件不需要出现在razor页面上，因为我在razor页面中继承了thta GridModel。我的问题是，在使用jQuery Datatable时，单击事件不起作用，否则一切都正常。如果

Grid.razor

继承自

GridModel

，则可以调用

EditData

。您需要解释一下“JQuery数据库”是什么意思。如果在Blazor渲染DOM之后使用JQuery来操作DOM，那么很容易破坏Blazor。Blazor和JQuery不是好搭档！请看一次。。。其Jquery数据表不是数据库网格：

<tbody>
    @foreach (RecommendedActivityCreateViewModel model in activityList)
    {
        <tr>
            <td><img src="@model.image_url" width="100" /></td>
            <td>@model.title</td>
            <td>@model.description</td>
            <td>@model.created_at.ToString("dd-MMM-yyyy")</td>                                    
            <td nowrap="nowrap">                                        
                <button @onclick="(()=>EditData(model.Id))" data-toggle="modal" data-target="#AddEditEmpModal" class="btn btn-sm btn-clean btn-icon" title="Edit details">
                    <i class="la la-edit"></i>
                </button>
                <a class="btn btn-sm btn-clean btn-icon delete-link" data-url="api/RecommendedActivity/" data-id="@model.Id" title="Delete">
                    <i class="la la-trash"></i>
                </a>
            </td>
        </tr>
    }
</tbody>

public class GridModel : ComponentBase
{
    [Inject]
    protected HttpClient Http { get; set; }

    protected async Task EditData(string id)
    {
        await Http.GetAsync($"api/RecommendedActivity/{id}");
    }
}

@page "/Test"

@foreach (var country in Countries)
{
    <div>@country.Country <button class="btn-btn-dark" @onclick="() => OnClick(country.Id)">Edit</button></div>
}

@code {
    class Model
    {
        public int Id { get; set; }
        public string Country { get; set; }
    }

    private List<Model> Countries = new List<Model>();

    protected Task OnClick(int id)
    {
        var x = id;
        return Task.CompletedTask;
    }

    protected override Task OnInitializedAsync()
    {
        // GetData();
        return base.OnInitializedAsync();
    }

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        GetData();
        return base.OnAfterRenderAsync(firstRender);
    }

    protected void GetData()
    {
        Countries = new List<Model>()
{
            new Model(){ Id=1, Country = "UK"},
            new Model(){ Id=2, Country = "Spain"},
            new Model(){ Id=3, Country = "Portugal"}
        };

    }
}