更改视图中的值后，如何将列表中的值传递给 C# 中的控制器？答案

【问题标题】：How to pass down values in a list to a Controller in C# after the values in the view are changed?更改视图中的值后，如何将列表中的值传递给 C# 中的控制器？
【发布时间】：2019-03-26 09:13:45
【问题描述】：

我有一个包含数据并加载到我的视图中的视图模型。为了在 HTML 中显示数据，我使用了一些 @foreach 循环。

现在页面包含来自视图模型的值。例如，如果 viewmodel 包含 10 个项目，则所有 10 个项目都通过 html 中的 @foreach 循环加载。

加载 evertyhing 后，我的 javascript 代码会检查有多少项目，如果满足某些条件，则将项目拆分到 2 个不同的容器中。

为草图赋予更多色彩：

这些项目是可交付的。每个交付物都有一个需要交付的地址。这些地址将在地图上标记为交货点。地图是 1 个容器。因此，例如，如果我有 10 个项目，那么地图上就会有 10 个标记。 javascript 计算这些标记之间的距离和旅行时间。如果总交付时间超过 8 小时（一个工作日），则它会从总项目池中提取一些项目，直到该特定容器中的总交付时间低于 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>

【问题讨论】：

您描述的javascript看起来像应该是服务器端的业务逻辑。根据您的用户群（如果他们不完全受信任），您应该考虑在服务器上执行该逻辑。
不要关注代码中的静态值。它只是一个例子。谢谢你的回答:)
使您的第二个容器成为局部视图。使用将接受的操作，例如要移动到第二个容器并使用 Ajax 加载它的项目 ID 列表。（如果我正确地得到了你的问题）

标签： c# asp.net-mvc foreach view controller

【解决方案1】：

查看

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

        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");
    }

【讨论】：

【解决方案2】：

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

【讨论】：