Styjun

I have a viewmodel which contains data and is loaded in my view. To show the data in the HTML, I used some @foreach loops.

Now the page contains values from the viewmodel. For example, if the viewmodel contains 10 items, all 10 items are loaded through @foreach loops in the html.

After evertyhing is loaded, my javascript code checks how many items there are and splits the items to 2 different containers if certain conditions are met.

To give more color to the sketch:

The items are deliverables. Each deliverable has an address where it need to be delivered to. These addresses will be marked as deliverypoints on the map. The map is 1 container. So for example if I have 10 items there will be 10 marks on the map. The javascript calculates the distance and travel time between these marks. If the total deliverytime exceed 8 hours (a workday) then it extracts some items from the total itempool untill the total deliverytime in that specific container is under the 8 hours. The remainder of the deliverables will be put in another map (container).

Question

How can I post these 2 newly made containers including the items to my controller?

So what I need is is something like this:

public ActionResult RetrieveContainerIncludingItems(List<ExampleModel> Containers)

This list should contain its items.

This is my View Code:

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

View

<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);
 ,
 );

Controller

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

$("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);
)