0

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 Answer 1

2

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)
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.