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

Posted 2023-03-27

【中文标题】如何在表单提交时将 HTML 标签值传递给 PageModel

【英文标题】：How to pass HTML label value to PageModel on form submission

【发布时间】：2021-12-12 07:15:19

【问题描述】：

不确定是否可以完成，但是如何将 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 一样使用模型绑定，但那是空的，上面显示的尝试是直接从表单响应中读取的，这也是空的。

我是否以错误的方式进行此操作，或者在我的场景中无法获得该标签值？

【参考方案1】：

您可以使用隐藏输入，名称为Timesheet.TimesheetStart，.net核心绑定数据与名称属性。您需要使用@item.Date设置其值。然后您需要将表单放在<tr></tr>之外，所以当您单击按钮时，它只会发布当前行的值而不是所有行。

<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>

结果：

【参考方案2】：

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>