MVC 5 получает значение DropDownList в строке таблицы

Question

У меня есть представление с таблицей продуктов, которые можно добавить в корзину покупок. Каждая строка имеет DropDownList с допустимыми количествами, которые можно заказать вместе с кнопкой для добавления в корзину. Все заполняется и отображается правильно. Я знаю, как передать идентификатор элемента в ActionLink, но как я могу получить значение DownDownList, связанного с строкой таблицы ActionLink, которая была нажата?

Возможно, я использую JQuery, который срабатывает при нажатии ActionLink?

Я также думал о том, чтобы сделать каждую строку формой, но это кажется излишним.

Есть ли простой способ MVC для этого?

Answer 1

Приготовление дополнительной информации для правильного вопроса и решение проблемы. Спасибо Стивен за толчок и информацию.

Я попытался положить Html.BeginForm вокруг каждого знака <tr> в разделе сведений. Это действительно помогло мне. Я смог легко получить уникальную информацию о форме POST для каждой отдельной строки. Однако, когда я включу JQuery DataTables, подача будет нарушена. Таблицы данных должны захватывать отправку или щелчок. Не понял этого, но это заставило меня попробовать JQuery, который кажется гораздо лучшим способом сделать это.

Вот как я построить строку таблицы данных:

@foreach (var item in Model) 
{ 
    <tr> 
     <td> 
      <img src="@item.GetFrontImage()" width="100" /> 
     </td> 
     <td> 
      <strong>@Html.DisplayFor(modelItem => item.DisplayName)</strong> 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.CustomerSKU) 
     </td> 
     <td> 
      @Html.DropDownList("OrderQty", item.GetAllowedOrderQuantities(), htmlAttributes: new { @class = "form-control" }) 
     </td> 
     <td> 
      <a class="btn btn-default pull-right" data-id="@item.ID">Add to Cart</a> 
     </td> 
    </tr> 
} 

Это создает отборное с идентификатором OrderQty и я внедренный идентификатор элемента в атрибуте данных идентификатор ссылки. Затем я использовал этот JQuery для захвата информации и отправки POST на мой контроллер. Просто тест DIV отображающего результатов в этом примере:

// Add to Cart click 
$('table .btn').click(function() { 
    // Gather data for post 
    var dataAddToCard = { 
     ID: $(this).data('id'),  // Get data-id attribute (Item ID) 
     Quantity: $(this).parent().parent().find('select').val() // Get selected value of dropdown in same row as button that was clicked 
    } 

    // POST data to controller 
    $.ajax({ 
     url: '@Url.Action("AddToCart","Shopping")', 
     type: 'POST', 
     data: JSON.stringify(dataAddToCard), 
     contentType: 'application/json', 
     success: function (data) { $('#Result').html(data.ID + ' ' + data.Quantity); } 
    }) 
}); 

Функция JQuery получает ссылку на ссылку быть нажат, так что я могу извлечь Item ID из атрибута данных идентификатора. Затем я могу получить ссылку на раскрывающийся список (select), который находится в той же строке, используя .parent.parent (получает меня к тегу <tr>), а затем просто находит следующий тег 'select'. Вероятно, это довольно очевидно для многих из вас.

Это отлично работает для моих целей. Я также могу обновить другие элементы данными, возвращаемыми из POST.

Спасибо

Karl