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

Question

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

网格剃刀

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

网格模型.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这是它在提供的代码片段中看起来的位置。

下面的代码显示了一个简单的工作示例(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"}
};
}
}