Razor页面中的foreach循环内的表单 [英] Forms inside foreach loop in Razor Page

问题描述

我有一个标准的Razor页面，该页面列出了数据库中的所有订单.它的编码非常标准:页面模型中的IList<Order>绑定属性， OnPost 方法.但是，表中的每条记录都有一列，其中包含 select 元素(用于显示订单的当前状态)和 button (如果用户使用)来保存新状态决定更改它.对每一行的状态进行内联编辑.

I have a standard Razor Page that lists all Orders in my database. It's coded pretty standard: IList<Order> bind property in page model, OnPost method. However, each of the records in a table has a column with a select element that shows the current status of the order, and a button to save the new status if the user decides to change it. Sort of an inline edit of the status for each row.

所以我的页面上有一个 foreach 循环，可以循环浏览所有订单:

So I have a foreach loop in my page that cycles through all my orders:

@foreach (var item in Model.Orders)
{
   <tr><td>...</td></tr>
   <tr>
      <td>
         <form method="post" class="form-inline">
            <input type="hidden" value="@item.Id"/>
            <select asp-for="@item.OrderStatusId"
                    class="form-control form-control-sm"
                    asp-items="ViewBag.OrderStatusId"></select>
            <button type="submit" class="btn btn-secondary btn-sm">
               <i class="fas fa-save"></i>
            </button>
         </form>
      </td>
   </tr>
}

如您所见，最后一列是表格.我想做的是能够提交到我的 OnPost 方法，订单ID(表单中隐藏的 input 元素)和选定状态( select 中的形式).但是，这些参数在方法中始终显示为null.我猜这与以下事实有关:因为同一属性名称有多个 asp-for 元素(每种形式一个-每个订单/行)，Razor感到困惑，并且不知道要发送哪一个.

As you can see, the last column is a form. What I want done is to be able to submit to my OnPost method, the order id (hidden input element in the form) and the selected state (select in element the form). However, these parameters always show up as null in the method. I'm guessing it has something to do with the fact that, because there are multiple asp-for elements for the same property name (one for each form - each order/row), Razor gets confused and doesn't know which one to send.

有没有办法解决这个问题?

Is there a way around this?

推荐答案

示例中的foreach循环为<select>元素生成相同的name属性，这说明了Razor感到困惑的原因(并且它也是无效的HTML) .假设Model.Orders实现了IEnumerable，则每次迭代都应使用for循环和数字索引来生成不同的<select>元素名称:

The foreach loop in your example generates same name attribute for <select> elements, which explains why Razor got confused (and it's also invalid HTML). Assumed that Model.Orders implements IEnumerable, you should use a for loop and numeric index for every iteration to generate different <select> element names:

<form method="post" class="form-inline">
@for (int i = 0; i < Model.Orders.Count; i++)
{
   <tr><td>...</td></tr>
   <tr>
      <td>
            <input type="hidden" value="@item.Id"/>
            <select asp-for="Model.Orders[i].OrderStatusId" class="form-control form-control-sm"
                    asp-items="ViewBag.OrderStatusId"></select>
      </td>
   </tr>
}
   <button type="submit" class="btn btn-secondary btn-sm">
      <i class="fas fa-save">Save</i>
   </button>
</form>

注意:我故意将<form>&除非另外指定，否则无需在for循环内设置action属性而无需创建多个<form>标记(和多个提交按钮)，则无需在循环外提交<button>标记.

Note: I intentionally put the <form> & submit <button> tags outside the loop because it's unnecessary to create multiple <form> tags (and multiple submit buttons) without setting action attribute inside for loop, unless specified otherwise.

类似的问题:如何绑定数组使用asp-for标签?

这篇关于Razor页面中的foreach循环内的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！