如何在 Blazor 服务器应用程序中呈现父子 rowspan HTML Table？

Question

我正在尝试在 Blazor Server 应用程序的 HTML table 中显示带有行跨度的父子数据。 html table 已呈现但显示方式不正确

这是我来自 JSON

的数据

 "shareCapitalDetails": [
        {
            "currency": "BTN",
            "shares": [
                {
                    "amountOfIssuedShareCapital": "1",
                    "amountOfPaidUpShareCapital": "1",
                    "classOfShare": "CG",
                    "sharesHeld": "1"
                }
            ]
        },
        {
            "currency": "KWD",
            "shares": [
                {
                    "amountOfIssuedShareCapital": "100",
                    "amountOfPaidUpShareCapital": "100",
                    "classOfShare": "AV",
                    "sharesHeld": "100"
                },
                {
                    "amountOfIssuedShareCapital": "100",
                    "amountOfPaidUpShareCapital": "100",
                    "classOfShare": "C",
                    "sharesHeld": "100"
                },
                {
                    "amountOfIssuedShareCapital": "100",
                    "amountOfPaidUpShareCapital": "100",
                    "classOfShare": "A",
                    "sharesHeld": "100"
                }
            ]
        }
    ],

这是 Blazor 服务器代码


@if (TestModel == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table table-sm table-responsive table-condensed caption-top">
     <thead>
      <tr>
       <th scope="col">S/No</th>
       <th scope="col">Currency</th>
       <th scope="col">Class of share</th>
      <th scope="col">No.of Shares Held</th>
       <th scope="col">Amount of Issued Share Capital</th>
       <th scope="col">Amount of Paid Up Share Capital</th> 
      </tr>
     </thead>
     <tbody>
            @{int sno = 1; }
                @foreach (var shareCapital in TestModel.ShareCapitalDetails)
                {                    
                    <tr>
                    <td rowspan="@shareCapital.Shares.Count">@sno</td>
                    <td rowspan="@shareCapital.Shares.Count">@shareCapital.Currency</td> 
                    @{int j = 0; int max = shareCapital.Shares.Count - 1;}
                    @foreach (var share in shareCapital.Shares)
                    {   
                        <td>@share.ClassOfShare</td>        
                        <td>@share.SharesHeld</td>      
                        <td>@share.AmountOfIssuedShareCapital</td>      
                        <td>@share.AmountOfPaidUpShareCapital</td>  
                        
                        if (j < max)
                        {                        
                            @:</tr><tr>
                        }                        
                        j++;
                    }
                    </tr>
                    sno++;
                } 
     </tbody>
    </table>
}

问题是 HTML table 已呈现但不符合预期，Blazor 服务器无法正常工作 @:</tr><tr>

有什么解决办法吗？

Answer 1

Blazor 不允许 like/will 不允许呈现不正确的 html - 即使后续代码使 html 有效。

围绕完整的有效元素处理逻辑并围绕跨行的元素移动条件：

<tbody>
  @{
    int sno = 1;
    bool firstRow;
  }
  @foreach (var shareCapital in TestModel.ShareCapitalDetails)
  {                
    firstRow = true;
    foreach (var share in shareCapital.Shares)
    {   
      <tr>
        @if ( firstRow == true ) // for clarity
        {
        <td rowspan="@shareCapital.Shares.Count">@sno</td>
        <td rowspan="@shareCapital.Shares.Count">@shareCapital.Currency</td> 
        }
        <td>@share.ClassOfShare</td>        
        <td>@share.SharesHeld</td>      
        <td>@share.AmountOfIssuedShareCapital</td>      
        <td>@share.AmountOfPaidUpShareCapital</td>  
      </tr>
      firstRow = false;
    }
    sno++;
  }
</tbody>

如何在 Blazor 服务器应用程序中呈现父子 rowspan HTML Table？

How to render parent child rowspan HTML Table in Blazor Server Application?

html

html-table

blazor

blazor-server-side

blazor-webassembly