JQuery Datatablesから複数の行データをASP.NET 5/MVC 6ビューに全部送信ボタンを使って渡す

Question

私はASP.NET 5 MVCアプリケーションを持っています。私はグリッドをレンダリングするためにDatatables.netからダウンロードしたJQuery Datatablesを使用しています。

グリッド上で複数のレコードを選択し、すべてのレコードでステータスを更新できるように1つのボタンをクリックしたいと考えています。私は、javascriptからの情報をビューを通してMVCコントローラに渡す方法を理解できません。ここまで私がこれまで持っていたことがあります。私は助けが必要

public IActionResult ApproveMany(IEnumerable<Expense> model) 
     { 
      foreach (var item in model) 
      { 
       item.Status = "Approved"; 
       _context.Update(item); 
       _context.SaveChanges(); 
      } 
      return RedirectToAction("StaffExpense"); ; 
     } 

何コントローラーにこのような何かをしたい
コードの表示

<table class="display " id="ExpenseTable"> 
    <thead> 
     <tr> 
      <th></th> 
      <th> 
       @Html.DisplayNameFor(model => model.ApplicationUserid) 
      </th> 

      <th> 
       @Html.DisplayNameFor(model => model.ExpenseDate) 
      </th> 
      ...  </tr> 
     </thead> 
    <tbody> 
     @foreach (var item in (IEnumerable<Expense>)ViewData["Expenses"]) 
     { 
      <tr> 
       <td></td> 
       <td>     
        @Html.DisplayFor(modelItem => item.User.FullName) 
       </td> 

       <td> 
        @Html.DisplayFor(modelItem => item.ExpenseDate) 
       </td> 

       ....    
</tr> 
    } 
    </tbody> 
</table> 
@section Scripts { 

<script> 
    //script is not complete 
    $(document).ready(function() { 

     var table = $('#ExpenseTable').DataTable({ 
      dom: 'Bfrtip', 
      buttons: [ 
         { 
          text: 'Approve All Selected Expenses', 
          action: function() { 

          } 
         } 
      ], 
      columnDefs: [{ 
      orderable: false, 
      className: 'select-checkbox', 
      targets: 0 
     } ], 

    select: { 
     style: 'multiple', 
     selector: 'td:first-child' 
    }, 

    order: [[1, 'asc']], 

    }); 
    }); 

は私が持っているボタンを取ることができ、コレクションを取る押されたときにどのようにユーザーがグリッド上で選択したすべての支出項目のうち、そのコレクションをマイコンに渡して、編集した変更をデータベースにプッシュバックすることができます。

Answer 1

$('#updateButton').click(function() 
{ 
    console.log("Selected rows: "+ table.rows('.selected').data().length); 

    var data = $.map(table.rows('.selected').data(), function (item) 
    { 
     console.log(item) 
     return item; 
    }); 
    //Call your MVC Controller/API to do the update (pass data) 

    addData(data); 

}); 

function addData(data) 
{ 
    //Add your controller name to url 
    /*POST*/ 
    $.ajax({ 
    url: '/Controller/ApproveMany', 
    dataType: "json", 
    type: "POST", 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify(data), 
    cache: false, 
    success: function (result) 
    { 
     alert(result); 
    }, 
    error: function (xhr) 
    { 
     alert('error'); 
    } 
    }) 
} 

Answer 2

あなたが希望ソリューション

http://www.gyrocode.com/articles/jquery-datatables-checkboxes/