嘗試將表格行作爲List <>對象返回到MVC控制器

Question

對於我們的網站，我們有一個管理部分和一個用戶部分。我們希望允許管理員指定向用戶部分中的用戶列出哪些訂單商品。

我有一個MVC列表表，我已經啓用排序行以實際更改排序值。但我試圖將這種排序保存到數據庫中。正如你在下面看到的，我對某些屬性隱藏了元素，並且我的JavaScript正確設置了HiddenFor（item.SortOrder）。然後它調用控制器。但是我希望將整個行集合作爲列表傳遞迴列表對象。有什麼好的例子嗎？

@model System.Collections.Generic.IList<PublicationSystem.Model.CustomField> 
<table class="table sortable-table" 
data-source-href='@Url.RouteUrl("Default", 
    new { action = "_CustomFieldSort" }, 
    Request.Url.Scheme)'> 
    <thead> 
     <tr> 
      <th> 
       @Html.DisplayNameFor(model => model[0].ColumnName) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model[0].ColumnCaption) 
      </th> 
      <th></th> 
     </tr> 
    </thead> 

    @for (var i=0; i < Model.Count; i++) //each (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.HiddenFor(modelItem => Model[i].CustomFieldId,new {name="fieldsToEdit["+i+"].CustomFieldId"}) 
       @Html.HiddenFor(modelItem => Model[i].CustomFormId, new { name = "fieldsToEdit[" + i + "].CustomFormId" }) 
       @Html.HiddenFor(modelItem => Model[i].SortOrder, new { name = "fieldsToEdit[" + i + "].SortOrder", @class = "SortOrder" }) 
       @Html.DisplayFor(modelItem => Model[i].ColumnName) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => Model[i].ColumnCaption) 
      </td> 
      <td> 
       ... buttons 
      </td> 
     </tr> 
    } 
</table> 

我的javascript：

$(".sortable-table tbody").sortable({ 
    stop: function (event, ui) { 

     $(".sortable-table tr").each(function (index, element) { 
      var hiddenInput = $(element).find(".SortOrder").first(); 
      hiddenInput.val(index); 
     }); 
     $.ajax({ 
      url: $(".sortable-table").attr("data-source-href"), 
      method: "POST", 
      data: $(".sortable-table").serialize(), 
      success: function (result) { 
       ClearAndRefresh(); // Assumes parent has this function 
      } 
     }); 
    } 
}); 

我控制器的方法：

public ActionResult _CustomFieldSort(List<CustomField> fieldsToEdit) 
{ 
    if (fieldsToEdit != null) // fieldsToEdit is always null after the sort 
    { 
     var fieldCount = fieldsToEdit.Count(); 
    } 

    return null;// PartialView(); 
} 

我有我的JavaScript正確嘗試一個AJAX調用我的控制器的方法，但 'fieldsToEdit' 爲空。我究竟做錯了什麼？

Answer 1

批量更新排序？使用for循環將使你整個列表映射回回後/獲取控制器

@model System.Collections.Generic.IList<PublicationSystem.Model.CustomField> 
<table class="table sortable-table"> 
<thead> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.ColumnName) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.ColumnCaption) 
     </th> 
     <th></th> 
    </tr> 
</thead> 

@for (int i=0; i < Model.Length;i++) 
{ 
    <tr> 
     <td> 
      @Html.HiddenFor(modelItem => Model[i].CustomFieldId,new {name="fieldsToEdit["+i+"].CustomFieldId") 
      @Html.HiddenFor(modelItem =>Model[i].CustomFormId,new {name="fieldsToEdit["+i+"].CustomFormId") 
      @Html.HiddenFor(modelItem => Model[i].SortOrder, new { @class = "SortOrder",name="fieldsToEdit["+i+"].SortOrder" }) 
      @Html.DisplayFor(modelItem => Model[i].ColumnName,new {name="fieldsToEdit["+i+"].ColumnName") 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => Model[i].ColumnCaption,new {name="fieldsToEdit["+i+"].ColumnCaption") 
     </td> 
     <td> 
      ... buttons 
     </td> 
    </tr> 
} 

然後擊中按鈕回到方法發佈按鈕將批量更新整個列表，即時通訊不知道我是否正確回答你問題。