我有一个视图模型，其中包含数据并加载到我的视图中。为了在 HTML 中显示数据，我使用了一些@foreach循环。
现在，页面包含视图模型中的值。例如，如果视图模型包含 10 个项，则所有 10 个项都通过 html 中的@foreach循环加载。
加载完每个项目后，我的 javascript 代码会检查有多少个项目，如果满足某些条件，则将项目拆分为 2 个不同的容器。
要为草图赋予更多颜色：
这些项目是可交付成果。每个可交付成果都有一个需要交付到的地址。这些地址将在地图上标记为交货点。地图是 1 个容器。例如，如果我有 10 个项目，地图上就会有 10 个标记。javascript 计算这些标记之间的距离和行驶时间。如果总交货时间超过 8 小时(一个工作日)，则它会从总项目池中提取一些项目，直到该特定容器中的总交货时间低于 8 小时。其余的可交付成果将放在另一个映射(容器)中。
问题
如何将这两个新制作的容器(包括物品)发布到我的控制器？
所以我需要的是这样的东西：
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>
视图
<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");
}
$("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);
})