Формы внутри цикла foreach в Razor Page

Question

У меня есть стандартная страница Razor, в которой перечислены все заказы в моей базе данных. Это закодировано довольно стандартно: IList<Order> свойство связывания в модели страницы, OnPost метод. Однако каждая из записей в таблице имеет столбец с элементом select , который показывает текущее состояние заказа, и кнопку , чтобы сохранить новый статус, если пользователь решит: Измени это. Сортировка встроенного редактирования статуса для каждой строки.

Итак, на моей странице есть цикл foreach , который перебирает все мои заказы:

@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 идентификатор заказа (скрытый вход элемент в форме) и выбранное состояние ( выберите в элементе формы). Однако эти параметры всегда отображаются как нулевые в методе. Я предполагаю, что это как-то связано с тем фактом, что, поскольку существует несколько элементов asp-for для одного и того же имени свойства (по одному для каждой формы - каждого заказа / строки), Razor запутывается и не делает Не знаю, кого отправить.

Есть ли способ обойти это?

Answer 1

Помощник тега select автоматически генерирует множественный выбор, если свойство, указанное в атрибуте asp-for, является IEnumerable.

public class OrderModel
{
     public IEnumerable<string> OrderStatusId{ get; set; }
}

Привязка атрибута asp-for к свойству OrderStatusId выполняется следующим образом:

<select asp-for="OrderStatusId" 
    asp-items="ViewBag.OrderStatus">
</select>

Answer 2

Цикл foreach в вашем примере генерирует тот же атрибут name для элементов <select>, который объясняет, почему Razor запутался (и это также недопустимый HTML). Предполагая, что Model.Orders реализует IEnumerable, вы должны использовать цикл for и числовой индекс для каждой итерации, чтобы генерировать разные <select> имена элементов:

<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> & submit <button> вне цикла, поскольку нет необходимости создавать несколько тегов <form> (и несколько кнопок отправки) без установки атрибута action внутри for цикл, если не указано иное.

Аналогичная проблема: Как связать массив с тегом asp-for?