使用 JQuery 数据表时单击事件在 Blazor 中不起作用

Question

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

Grid.razor

<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>

GridModel.cs

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

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

Answer 1

当您说“我已经在 OnAfterRenderAsync 中初始化了 Datatable”时，下面的示例会执行此操作，如果您复制、粘贴并运行它，您会发现没有渲染任何内容。呈现页面后，您已获取数据。获取OnInitializedAsync中的数据，就可以了。

您还说“它工作正常，但 onclick 事件不起作用。” EditData 方法应该在 Grid.razor 而不是 GridModel 中，它似乎在提供的代码 sn-ps 中。

下面的代码显示了一个简单的工作示例（OnInitializedAsync 中的GetData）。

@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"}
        };

    }
}