Как передать значения в списке в контроллер в C # после изменения значений в представлении?

Question

У меня есть модель представления, которая содержит данные и загружена в моем представлении.Чтобы отобразить данные в HTML, я использовал несколько циклов @foreach.

Теперь страница содержит значения из модели представления.Например, если модель представления содержит 10 элементов, все 10 элементов загружаются через циклы @foreach в html.

После загрузки evertyhing мой код JavaScript проверяет, сколько элементов существует, и разбивает элементы на 2 разныхконтейнеры, если соблюдены определенные условия.

Чтобы придать эскизу больше цвета:

Элементы поставляются.Каждый результат имеет адрес, по которому он должен быть доставлен.Эти адреса будут отмечены как точки доставки на карте.На карте 1 контейнер.Так, например, если у меня есть 10 предметов, на карте будет 10 отметок.Javascript рассчитывает расстояние и время в пути между этими отметками.Если общее время доставки превышает 8 часов (рабочий день), то оно извлекает некоторые элементы из общего itempool, пока общее время доставки в этом конкретном контейнере не достигнет 8 часов.Остальная часть результатов будет помещена в другую карту (контейнер).

Вопрос

Как я могу отправить эти 2 новых контейнера, включая элементы, в мой контроллер?

Итак, мне нужно что-то вроде этого:

public ActionResult RetrieveContainerIncludingItems(List<ExampleModel> Containers)

Этот список должен содержать свои пункты.

Это мой код просмотра:

<div class="content-container map-outer">
   <div class="head">Transport</div>
   <div class="content">
      <div class="date-container">
      </div>
      <div class="map-inner">
         <div class="route-container">
            <div class="route-header">
               <div class="truck-container">
                  <span class="truck-number">1</span>
               </div>
               <div class="starting-time-container">Starttime: <span class="starting-time">8:00</span></div>
               <div class="data-right">
                  <span class="vehicle-number">XR-VR-95</span>
                  <span class="driver-name">Eric Peterson</span>
               </div>
            </div>
            <div class="route-inner">
               <!------------------------------------------>
               @{var counter = 0;}
               @foreach (var item in Model.TransportPlannerModels)
               {
               counter++;
               string status = (item.Status == "Deliver") ? "route-item drop-off" : "route-item pick-up";
               <div class="@status">
                  <div class="item-header">
                     <div class="item-order-container">
                        <span class="item-order">@counter</span>
                     </div>
                     <div class="location-type-container">
                        <span class="location-type">@item.Status</span>
                     </div>
                     <div class="location-address-container">
                        @Html.HiddenFor(x => item.Firstname)
                        <span class="location-address">@item.Firstname @item.LastName - @item.StreetName @item.Housenumber , @item.ZipCode <br/> @item.City</span>
                     </div>
                     <div class="icon-container">
                        <span class="icon icon-plus">+</span>
                        <span class="icon icon-minus">-</span>
                     </div>
                  </div>
                  <div class="item-center">
                     <div class="technical-info">
                        <span class="lat"></span>
                        <span class="lng"></span>
                        <span class="place_id"></span>
                     </div>
                     <div class="info-container">
                        <div class="order-number-container center-option-container">
                           <span class="center-bold">Ordernumber</span>
                           <span class="center-colon">:</span>
                           <span class="center-data order-number">@counter</span>
                        </div>
                        <div class="name-container center-option-container">
                           <span class="center-bold">Name</span>
                           <span class="center-colon">:</span>
                           <span class="center-data name">@item.Firstname @item.LastName</span>
                        </div>
                        <div class="address-container center-option-container">
                           <span class="center-bold">Address</span>
                           <span class="center-colon">:</span>
                           <span class="center-data address">@item.StreetName @item.Housenumber, @item.ZipCode @item.City</span>
                        </div>
                        <div class="kilometers-container center-option-container">
                           <span class="center-bold">Amount<br />kilometers</span>
                           <span class="center-colon">:</span>
                           <span class="center-data kilometers">50 km</span>
                        </div>
                        <div class="products-container center-option-container">
                           <span class="center-bold">Products</span>
                           <span class="center-colon">:</span>
                           <span class="center-data products">
                              <ul>
                                 @foreach (var product in item.ProductTitles)
                                 {
                                 <li>@product.Key x @product.Value</li>
                                 }
                              </ul>
                           </span>
                        </div>
                     </div>
                     <div class="marker-container">
                        <span class="marker-outer">
                        <span class="marker-number">@counter</span>
                        </span>
                     </div>
                  </div>
                  <div class="item-bottom">
                     <div class="dots-container">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                     </div>
                     <div class="bottom-flex">
                        <p>
                           Estimated traveltime: <span class="calculated-time">39min</span> <span class="dash">-</span><br /> Afstand: <span class="calculated-kilometers">51,8km</span>
                        </p>
                        <p><span class="estimated-time"></span></p>
                     </div>
                     <!------------------------------------------>
                  </div>
               </div>
               }
            </div>
            <div class="total-container">
               <p><span class="bold">Total Traveltime: </span><span class="total-time">5:30</span><span class="bold">Kilometers: </span><span class="total-km">262,8km</span></p>
            </div>
         </div>
         <div id="mapContainer0" class="map-container"></div>
      </div>
   </div>
</div>

Answer 1

$("div .map-inner").each(function(index, element) {
var AllOrderItems = new Array();

$($(this).find('.route-item')).each(function(index, element) {
    AllOrderItems.push($(this).find('.orderItemID').val());
})

var MapContainer = {
    DriverName: $(this).find('.driver-name').text(),
    TotalDistance: $(this).find('.total-km').text(),
    TotalTime: $(this).find('.total-time').text(),
    LicensePlate: $(this).find('.vehicle-number').text(),
    OrderItems: AllOrderItems
}
AllMaps.push(MapContainer);
})

Answer 2

Вид

<div id="divPartial2">
</div>

JS

        var ActionParams = new Object();
        ActionParams.ItemIds= ...;

        $.ajax({
            type: "POST",
            url: url,
            cache: false,
            data: JSON.stringify(ActionParams),
            contentType: "application/json",
            datatype: "html",
            success: function (data, textStatus, jqXHR) {
                $("#divPartial2").html(data);
            },
        });

Контроллер

    public ActionResult FilteredItems(List<int> itemIds)
    {
        //get only items for second container
        return PartialView("Container");
    }