如何在提交表单时将 HTML 标签值传递给 PageModel

Question

不确定是否可以完成，但我如何将 HTML 标签值分配给 BindProperty。

在我的 PageModel 中，我有一个我生成的日期时间列表，这个列表在 Razor 页面中使用并显示在行上。（submissionDates 是列表）

               <tbody>
                    @foreach (var item in Model.submissionDates)
                    {
                        <tr>
                            <td>
                                <div class="form-group">
                                    <label asp-for="Timesheet.TimesheetStart" class="control-label">@item.Date</label>
                                </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" id="NotesTextArea" rows="3"></textarea>
                                </div>                                
                            </td>
                            <td>  
                                <div class="form-group">
                                    <input type="submit" value="Submit" class="btn btn-primary" />
                                </div>                                
                            </td>
                        </tr>
                    }
                </tbody>

在 PageModel 的 OnPost 中，我需要提交行中的日期以添加到模型中。

public async Task<IActionResult> OnPostAsync()
         { 
             string weekSelected = Request.Form["Timesheet.TimesheetStart"];
             var emptyTimesheet = new Timesheet()
             {
                Submitted = DateTime.Now,
                TimesheetStart = DateTime.Parse(weekSelected),
                TimesheetEnd = TimesheetStart.AddDays(7),
                ColleagueID = UserColleague,
                BranchID = (int)branchFilter
             };

             if ( await TryUpdateModelAsync<Timesheet>(
                 emptyTimesheet,
                 "timesheet",
                  s => s.TimesheetNotes
             ))
             {
                 _context.Timesheets.Add(emptyTimesheet);
                 await _context.SaveChangesAsync();
                 return RedirectToPage("./Index");
             }

             return Page();
         }

我试过像使用 TimesheetNotes 一样使用模型绑定，但它是空的，上面显示的尝试是直接从表单响应读取，这也是空的。

我是不是以错误的方式解决这个问题，或者在我的情况下无法获得该标签值？

Answer 1

Request.Form 中只有 INPUT 元素可用。您可以为每个标签使用 HTML 隐藏字段。使用隐藏字段，您也可以进行模型绑定。

<div class="form-group">
<label asp-for="Timesheet.TimesheetStart" class="control-label">@item.Date</label>
<input type="hidden" asp-for="Timesheet.TimesheetStart" />
</div>

Answer 2

你可以使用一个隐藏的输入，名字是Timesheet.TimesheetStart，.net core bind data with name attribute.And你需要用@item.Date设置它的值。然后你需要将表单放在 <tr></tr> 之外，这样当您单击按钮时，它只会 post 当前行的值而不是所有行的值。

<tbody>
        @foreach (var item in Model.submissionDates)
        {

            <form method="post">
                <tr>

                    <td>
                        <div class="form-group">
                            <label asp-for="Timesheet.TimesheetStart" class="control-label">@item.Date</label>
                            <input hidden name="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" id="NotesTextArea" rows="3"></textarea>
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <input type="submit" value="Submit" class="btn btn-primary" />
                        </div>
                    </td>

                </tr>
            </form>

        }
    </tbody>

结果：

如何在提交表单时将 HTML 标签值传递给 PageModel

How to pass HTML label value to PageModel on form submission

model-binding

asp.net-core

razor-pages