Passing multiple row data from JQuery Datatables into ASP.NET 5 / MVC 6 view using a submit all button

Question

I have an ASP.NET 5 MVC application. I am using JQuery Datatables downloaded from Datatables.net for rendering my grid.

I want to be able to select multiple records on the grid and through the click of one button to be able to update the status feild on all my records. I can't figure out how to pass the information from javascript to my MVC controller through the view. Here is what I have so far.
View Code

    <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']],

    } );
    } );

I want to do something like this in the Controller

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

What I need help with is how I can take the button I have and when it is pushed take a collection of all the expense items that the user has selected on the grid, and then pass that collection into my controller so the edited changes can be pushed back to the database.

Bettimms · Accepted Answer · 2016-03-31 16:22:52Z

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

edited Mar 31, 2016 at 16:22

answered Mar 24, 2016 at 2:49

Bettimms

6715 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

scott Noel Over a year ago

Can you explain how to call my MVC controller called ExpenseController method- ApproveMany from the JavaScript code above.

Samyukta R. · Accepted Answer · 2016-03-24 11:01:22Z

0

This link would be helpful for you to get the desired solution

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

answered Mar 24, 2016 at 11:01

Samyukta R.

1541 gold badge1 silver badge15 bronze badges

Collectives™ on Stack Overflow

Passing multiple row data from JQuery Datatables into ASP.NET 5 / MVC 6 view using a submit all button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related