如何在Razor Page中提交表格单元格值并传递指定行的RecordId参数

下面给出3种常用的实现方式，你可以根据业务场景选择：

方案1：用asp-route标签助手直接传值（推荐，改动最小） #

你只需要给现有的submit按钮添加asp-route-recordid属性，Razor Pages会自动把对应RecordId作为请求参数传递给后台处理方法，修改后的表格行代码如下：

@foreach(var x in  Model.masterrecords)
{
    <tr class="border text-center">
        <td>@x.RecordId</td>
        <td>@x.FirstName</td>
        <td>@x.LastName</td>
        <td>@x.NumberOfRecords</td>
        <td>
            <input type="submit" asp-page-handler="ViewDetailsBtn" asp-route-recordid="@x.RecordId" value="view details" class="btn btn-sm" />
        </td>
    </tr>
}

对应后台PageModel的处理方法直接接收参数即可：

public IActionResult OnPostViewDetailsBtn(int recordId)
{
    // 按传入的recordId查询详情逻辑
    var recordDetail = _yourDbContext.masterrecords.FirstOrDefault(r => r.RecordId == recordId);
    // 按需返回当前页绑定详情数据，或者跳转到专门的详情页
    return Page();
}

方案2：GET跳转详情页（适合公开详情，无需表单提交） #

如果你的详情页面不需要走POST提交、没有写操作，可以直接用锚点标签替代按钮，跳转更简单：

<td>
    <a asp-page="RecordDetail" asp-route-id="@x.RecordId" class="btn btn-sm">view details</a>
</td>

新建RecordDetail.cshtml详情页，后台OnGet方法接收id参数查询数据即可。

方案3：整行点击传值（扩展需求，无需点击固定按钮） #

如果需要支持点击整行任意位置都能跳转详情，给tr加data属性结合JS实现即可：

@foreach(var x in  Model.masterrecords)
{
    <tr class="border text-center record-row" data-id="@x.RecordId" style="cursor:pointer">
        <td>@x.RecordId</td>
        <td>@x.FirstName</td>
        <td>@x.LastName</td>
        <td>@x.NumberOfRecords</td>
        <td>
            <span class="btn btn-sm">view details</span>
        </td>
    </tr>
}

页面底部加JS逻辑：

document.querySelectorAll('.record-row').forEach(row => {
    row.addEventListener('click', () => {
        const recordId = row.dataset.id;
        // 按需跳转或者提交请求
        location.href = `/RecordDetail?id=${recordId}`;
    });
});

内容的提问来源于stack exchange，提问作者JamesW