Jquery Datatable data to mvc controller

问题

Hi im having some troubles trying to send my Datatable Data to my controller using ajax. I have a datatable like this :

<table class=" w-100 mr-3 ml-3" id="mytable">
        <thead>
            <tr>
                <th class="text-left">Code</th>
                <th class="text-left">Date</th>
                <th class="text-left">Colocacion</th>
                <th class="text-left">Amount</th>
                <th class="text-left">Bank</th>
                <th class="text-left">Company</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var obj in Model.List)
            {
                <tr>
                    <td class="text-left">@obj.Code</td>
                    <td class="text-left">@obj.Date</td>
                    <td class="text-left">@obj.Colocacion</td>
                    <td class="text-left">@obj.Amount/td>
                    <td class="text-left">@obj.Bank</td>
                    <td class="text-left">@obj.Company</td>
                </tr>
            }
        </tbody>
    </table>
}

Can u guys tell me how to do this? I tried :

var data = $('#mytable').DataTable().data();

$.ajax({
    type: 'POST',
    url: '../CompraChequeDiferido/Acept',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: json.stringify(data),


});

Sry for my english.

回答1:

You could refer to my demo below to post dataTable data to controller.

1.Assume I have a Customer class

public class Customer
{       
    public string EmailAddress { get; set; }       
    public string Description { get; set; }
}

2.In View.Get dataTable data and format to List

@model IEnumerable<Customer>

<table class=" w-100 mr-3 ml-3" id="mytable">
<thead>
    <tr>
        <th class="text-left">EmailAddress</th>
        <th class="text-left">Description</th>
    </tr>
</thead>
<tbody>
    @foreach (var obj in Model)
    {
        <tr>
            <td class="text-left">@obj.EmailAddress</td>
            <td class="text-left">@obj.Description</td>

        </tr>
    }
</tbody>
</table>
<input type="button" value="submit" id="button" />

@section Scripts{
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

<script type="text/javascript">
    $(document).ready(function () { 
        function gettoken() {
            var token = '@Html.AntiForgeryToken()';
            token = $(token).val();
            return token;
        }

        var table = $('#mytable').DataTable();
        var dd = table.rows().data().toArray();
        var data = new Array();

        $.each(dd, function (index,value) {

            var customer = {};
            customer.EmailAddress = value[0];
            customer.Description = value[1];
            data.push(customer);
        });        

    $.ajax({
              type:"POST",
              url: "/Home/PassData",
              contentType: "application/json;",
              headers: { 'RequestVerificationToken': gettoken() },
              data: JSON.stringify(data),
              success: function(){
                 alert('success');
              },
              error: function(){
                 alert('failure');
              }
           });

    })      
</script>
}

3.In controller

[HttpPost]
public async Task<IActionResult> PassData([FromBody] List<Customer> customers)

来源：https://stackoverflow.com/questions/53500969/jquery-datatable-data-to-mvc-controller

标签

ajax

model-view-controller

asp.net-core

datatables