如何在表单提交时将HTML label的值传递到ASP.NET Core PageModel

问题原因 #

HTML 中<label>元素不属于表单提交控件，浏览器发送表单请求时不会携带<label>的文本内容，所以不管你用模型绑定还是直接读Request.Form都拿不到对应值，这是HTML的原生规则，和Razor绑定逻辑无关。

解决方案 #

有两种常用实现方式，都可以拿到对应行的日期值：

方案1：新增隐藏表单域+每行独立表单 #

因为你现在是循环生成多行，每行对应独立的提交按钮，需要把每一行包裹在独立的<form>标签中，避免多行列数据互相干扰，同时新增type="hidden"的隐藏输入框存放日期值：

<tbody>
    @foreach (var item in Model.submissionDates)
    {
        <tr>
            <form method="post">
                <td>
                    <div class="form-group">
                        <label class="control-label">@item.Date</label>
                        <!-- 隐藏域存放日期，会随表单提交 -->
                        <input type="hidden" asp-for="Timesheet.TimesheetStart" value="@item.Date" />
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <label asp-for="Timesheet.TimesheetNotes" class="control-label">Submission Notes</label>
                        <textarea asp-for="Timesheet.TimesheetNotes" class="form-control" rows="3"></textarea>
                    </div>                                
                </td>
                <td>  
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-primary" />
                    </div>                                
                </td>
            </form>
        </tr>
    }
</tbody>

改完之后你原来的后端代码不需要做任何修改，就能正常通过Request.Form["Timesheet.TimesheetStart"]或者模型绑定拿到日期值。

方案2：直接通过提交按钮传路由参数 #

这种方式不需要加隐藏域，直接把日期作为路由参数绑在提交按钮上，后端直接接收参数即可：
前端只需要修改提交按钮的代码：

<input type="submit" value="Submit" class="btn btn-primary" asp-route-timesheetStart="@item.Date" />

后端修改OnPostAsync方法的签名，直接接收参数：

public async Task<IActionResult> OnPostAsync(DateTime timesheetStart)
{ 
    var emptyTimesheet = new Timesheet()
    {
        Submitted = DateTime.Now,
        TimesheetStart = timesheetStart, // 直接用接收的参数
        TimesheetEnd = timesheetStart.AddDays(7),
        ColleagueID = UserColleague,
        BranchID = (int)branchFilter
    };
    // 剩下的原有逻辑不变
}

这种方式代码更简洁，也不需要处理隐藏域的绑定问题。

额外注意 #

你现在的代码中循环生成的所有textarea都用了同一个id="NotesTextArea"，HTML规范要求页面id必须唯一，建议删除这个id属性，或者动态生成唯一id，避免前端JS操作时出现异常。

内容的提问来源于stack exchange，提问作者Colin-G-Davidson