按钮在MudBlazor表不路由到不同的页面

Question

我是《Blazor》和《MudBlazor》的新手。我跟随了一个关于MudBlazor的视频，我喜欢它快速过滤和排序的方式。但是，现在我试图在表行中设置一些按钮，用于对记录进行CRUD操作。我似乎无法将其路由到另一个页面，也无法找到将记录ID传递给函数的方法。我试过一个MudButton和一个Bootstrap按钮，都不能工作。

在下面的代码中，我有一个按钮，我想要一个不同的页面，以及一个编辑按钮，我想导航到另一个页面，而沿着记录ID传递。当我运行这个并试着转到Groups按钮时，什么都没有发生。没有错误，只是没有路由到另一个页面。

谁知道我错过了什么，或者我可以遵循一个例子?

<MudTable Items="@listApplications" Dense="true" Hover="true" Bordered="true" Striped="true" 
Filter="new Func<Application,bool>(FilterFunc1)" @bind-SelectedItem="selectedApplication">
<ToolBarContent>
<MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
</ToolBarContent>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Description</MudTh>
<MudTh></MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Description">@context.Description</MudTd>
<MudTd>
<button type="button" class="btn btn-secondary btn-sm" onclick="GoToGroups()">Groups</button>
<button class="btn btn-primary btn-sm" >
Edit
</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager />
</PagerContent>
</MudTable>
@code {
private List<Application>? listApplications;
private string searchString = "";
private Application selectedApplication = null;
protected override async Task OnInitializedAsync()
{
listApplications = await _db.GetApplications();
}
private bool FilterFunc1(Application app) => FilterFunc(app, searchString);
private bool FilterFunc(Application app, string searchString)
{
if (string.IsNullOrWhiteSpace(searchString))
return true;
if (app.Description.Contains(searchString, StringComparison.OrdinalIgnoreCase))
return true;
if (app.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase))
return true;
return false;
}

void ShowApplication(int id)
{
NavigationManager.NavigateTo($"ApplicationMgmt/{id}");
}
void CreateNewApplication()
{
NavigationManager.NavigateTo("ApplicationMgmt");
}
void GoToGroups()
{
NavigationManager.NavigateTo("Groups");
}
}

Answer 1

在Blazor中，您可以使用语法@on{DOM EVENT}="{DELEGATE}"指定事件处理程序。

所以你需要用@onclick="GoToGroups"代替onclick="GoToGroups()"。

Blazor事件处理

传递参数可以使用以下语法:@onclick="() => ShowApplication(100)"。对于你的例子:

<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Description">@context.Description</MudTd>
<MudTd>
<button type="button" class="btn btn-secondary btn-sm" @onclick="GoToGroups">Groups</button>
<button class="btn btn-primary btn-sm" @onclick="() => ShowApplication(context.Id)">
Edit
</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</MudTd>
</RowTemplate>