使用 JQuery 数据表时，单击事件在 Blazor 中不起作用 Grid.razorGridModel.cs

问题描述

我已经在 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}");
    }
}

解决方法

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

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

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

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

    }
}