如何解决使用 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"}
};
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。