让MudBlazor表格的某一行可点击？

Question

我有一个用MudBlazor制作的表格：

<MudTable ServerData="@(new Func<TableState, Task<TableData<DossierInfo>>>(GetServerData))"
      RowsPerPage="@_PageSize"
      Dense="true"
      Hover="true"
      Bordered="false"
      Striped="true"
      Outlined="true"
      Filter="new Func<DossierInfo,bool>(FilterFunc)" Elevation="0">
<ToolBarContent>
    <MudTextField @bind-Value="searchString" Label="Ricerca" Placeholder="Digitare il testo da ricercare" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" />
    <!--<MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium"></MudTextField>-->
</ToolBarContent>
<HeaderContent>
    <MudTh>Tipo</MudTh>
    <MudTh>Nr</MudTh>
    <MudTh>Targa</MudTh>
    <MudTh>Tipo veicolo</MudTh>
    <MudTh>Marca</MudTh>
    <MudTh>Modello</MudTh>
    <MudTh>Km</MudTh>
    <MudTh>Totale validato</MudTh>
    <MudTh>Data apertura OL</MudTh>
    <MudTh></MudTh>
</HeaderContent>

<RowTemplate>
    <MudTd DataLabel="Tipo pratica"><MudIcon Icon="@DossierTypeIconService.GetDossierTypeIcon(context.Type)"></MudIcon></MudTd>
    <MudTd DataLabel="Numero">@context.Number</MudTd>
    <MudTd DataLabel="Targa">@context.VehiclePlate</MudTd>
    <MudTd DataLabel="Tipo veicolo">@context.VehicleType</MudTd>
    <MudTd DataLabel="Marca">@context.VehicleMake</MudTd>
    <MudTd DataLabel="Modello">@context.VehicleModel</MudTd>
    <MudTd DataLabel="Km">@context.VehicleKm</MudTd>
    <MudTd DataLabel="Totale validato">@context.ValidatedTotalAmount</MudTd>
    <MudTd DataLabel="Data apertura OL">@context.OpenedDate</MudTd>
    <MudTd DataLabel="Azioni" Style="text-align:right">
        <MudButton Variant="Variant.Filled" DisableElevation="true" Color="Color.Primary" Size="Size.Small" OnClick="@((e) => ToDossierDetail(@context.Id))"><strong>Apri</strong></MudButton>
    </MudTd>
</RowTemplate>

<PagerContent>
    <MudTablePager PageSizeOptions="@_pageSizeOption" RowsPerPageString="Pratiche per pagina" />
</PagerContent>

我不知道是否可行，但我希望使表中的每一行都可以完全点击以访问每个档案的信息，而不是像现在这样使用MudButton。我在主要的MudBlazor网站上搜索了一下，但没找到任何关于此的内容。

- Lorenzo Bertolaccini

Answer 1

您可以使用事件回调函数 OnRowClick。

例如：

<MudTable 
  ServerData="@(new Func<TableState, Task<TableData<DossierInfo>>>(GetServerData))" 
  T="YourT" 
  OnRowClick="@RowClicked">

  // ...

</MudTable>

代码:

public void RowClicked(TableRowClickEventArgs<YourT> p)
{
  // Example:
  NavigationManager.NavigateTo($"/DossierInfo/{p.Item.IdDossier}");
}

MudTable<T> 的完整 API 文档：https://mudblazor.com/api/table

- yasseros

---

它似乎可以工作，但是当我将函数放在onrowclick上时，在@rowclicked()括号之间应该放什么？ - Lorenzo Bertolaccini

阅读有关委托和事件（回调）的内容，以了解它们的工作原理。 - yasseros

事实是，如果我这样放置它，它会给我一个错误，其中说它无法将“方法组”转换为“EventCallback”。 - Lorenzo Bertolaccini

我想应该是这样，我已经把DossierInfo放进去了，这是TableData<DossierInfo>中存在的类型。我查看了网上的其他例子，它们都将TableData字段中的一个类型放入其中。抱歉，我相当新手，所以我的语言水平不是很好。 - Lorenzo Bertolaccini

请确认在<MudTable>标签中是否有属性T="YourT"。 - Alexandre Swioklo