如何绑定单选按钮（In HTML table）检索整行值的方式？ (Blazor)

Question

我的项目中有一个 table 可以完美运行。我想根据用户为该特定行选择的单选按钮检索整行的值。这样我就可以 POST 它进入我的数据库 table。例如我有这个 HTML Table:

Radio button    ID      Company Name
0              123      Company1
0              343      Company2

根据单选按钮的选择，我需要一个保存整行值的参数，我可以将其传递给控制器函数。如果用户选择第一行，则 SaveValue 存储 ID = 123，CompanyName = Company1。希望我清楚我的问题。由于无法粘贴我刚刚编辑的整个代码并快速添加了一些片段。如果需要任何其他输入，请告诉我。

为了更好地理解，这里有一些代码片段：

<EditForm Model="@SearchFilter" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
        <table>
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>Company Name</th>
            </tr>
        </thead>
        <tbody>
    
    
            @if (lstResult != null)
            {
            @foreach (Models.TP Result in lstResult.tp)
                {
            <tr>
                <td>
                    <input value="1" id="type_radio_1" name="type_radio" type="radio"/>
                </td>
                <td>@Result .id</td>
                <td>@Result .companyName</td>
            </tr>
                 }
            }
            @else
            {
            <tr>
                <td><div>No record Found</div></td>
            </tr>
            }
        </tbody>
    </table>
    <div class="form-row">
      <div class="text-left col-6">
        <button type="submit" class="btn btn-primary mr-1 btn-success">Save</button>
      </div>                  
    </div>
</EditForm>

  protected async void HandleValidSubmit()
        {
            await Http.PostAsJsonAsync($"api/company/add", SaveValue);
            toastService.ShowSuccess("Company saved successfully!");
        }

Answer 1

这是一个您可以遵循的简单演示：

型号：

public class Result
{
    public List<TP> tp { get; set; }
}
public class TP
{
    public int id { get; set; }
    public string companyName { get; set; }
}

Index.razor:

<EditForm Model="@lstResult" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <table>
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>Company Name</th>
            </tr>
        </thead>
        <tbody> 
        @if (lstResult != null)
        {
            @foreach (TP Result in lstResult.tp)
            {
             <tr>
                  <td>                                            //add here!!!!
                  <input value="1" id="type_radio_1" name="type_radio" 
                                     type="radio" @onclick="(() => Add(Result))" />
                  </td>
                  <td>@Result.id</td>
                  <td>@Result.companyName</td>
                  </tr>
            }
        }
        else
        {
            <tr>
                <td><div>No record Found</div></td>
            </tr>
        }
        </tbody>
    </table>
    <div class="form-row">
        <div class="text-left col-6">
            <button type="submit" class="btn btn-primary mr-1 btn-success">Save</button>
        </div>
    </div>
</EditForm>
@code{ 

    //for easy testing, hard coded the data...
    Result lstResult = new Result()
    {
        tp = new List<TP>()
        {
            new TP(){id=1,companyName="aa"},
            new TP(){id=2,companyName="bb"},
            new TP(){id=3,companyName="cc"}
        }
    };
    //create a variable...
    TP SaveValue = new TP();
    //add this method to get the selected model...
    protected async Task Add(TP tp)
    {
        SaveValue = tp;
    }
    protected async void HandleValidSubmit()
    {
        //do your stuff....
        await Http.PostAsJsonAsync($"api/company/add", SaveValue);      
    }
}

如何绑定单选按钮（In HTML table）检索整行值的方式？ (Blazor)

How to Bind the radio button(In HTML table) the way it retreives the whole row values? (Blazor)

html

c#

asp.net-core

blazor

blazor-webassembly