Why i keep getting 400 error while calling ajax datatable api from .net core controller?

Question

cmjobprogress.js

    var JobdataTable;

$(document).ready(function () {
    loadJobDataTable();
});

function loadJobDataTable() {
    JobdataTable = $('#JobtblData').DataTable({
        "ajax": {
            "url": "/Admin/CMJobProgress/GetAll"
        },
        "columns": [
            { "data": "job_number" },
            { "data": "assign_from" },
            { "data": "assign)to" },
            { "data": "date_assign" },
            { "data": "job_action" },
            { "data": "remarks" },
            { "data": "type" },
            { "data": "division" }
        ]

    })
}

CMJobProgressController.cs

#region API Calls
        [ValidateAntiForgeryToken]
       [HttpGet]
       public IActionResult GetAll()
        {
            var allObj = _unitOfWork.cmJobProg.GetALL(j => j.JobNumber=="19950232"); 

            return Json(new { data = allObj });
        }

#endregion

Index.cshtml

@{

    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Job Action</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="cmd.html">Home</a></li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
        <div class="row mb-2">
            <div class="col-6 text-right">
            </div>
            <div class="col-6 text-right">
                <a class="btn btn-primary"><i class="fas fa-plus"></i> &nbsp; Create New Job</a>
            </div>
        </div>

    </div><!-- /.container-fluid -->
</div>

<section class="content">
    <div class="container-fluid">
        <div class="p-4 border rounded">
            <table id="JobtblData" class="table table-striped table-bordered" style="width:100%">
                <thead class="thead-dark">
                    <tr class="table-info">
                        <th>Job Number</th>
                        <th>Assign From</th>
                        <th>Assign To</th>
                        <th>Date Assign</th>
                        <th>Job Action</th>
                        <th>Remarks</th>
                        <th>Type</th>
                        <th>Division</th>


                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>


@section Scripts{

    <script src="~/js/cmjobprogress.js"></script>
}

CMJobProgress.cs

namespace LXG.Models
{
    [Table("CMJOBPROG", Schema = "LASIS")]
    public class CMJobProgress
    {
        [Required]
        [MaxLength(8)]
        [Display(Name = "Job Number")]
        [Column("JOB_NUMBER")]
        public string JobNumber { get; set; }

        [Display(Name = "Assign From")]
        [MaxLength(22)]
        [Column("ASSIGN_FROM")]
        public string AssignFrom { get; set; }

        [Display(Name = "Assign To")]
        [MaxLength(22)]
        [Column("ASSIGN_TO")]
        public string AssignTo { get; set; }

        [Column("DATE_ASSIGN")]
        public DateTime DateAssign { get; set; }

        [Display(Name = "Job Action")]
        [Range(0, 999)]
        [Column("JOB_ACTION")]
        public string JobAction { get; set; }

        [Display(Name = "Remarks")]
        [MaxLength(500)]
        [Column("REMARKS")]
        public string Remarks { get; set; }

        [Display(Name = "Job Type")]
        [Required]
        [MaxLength(2)]
        [Column("TYPE")]
        public string Type { get; set; }

        [MaxLength(2)]
        [Column("DIVISION")]
        public string Division { get; set; }

    }
}

ApplicationDbContext.cs

namespace LXG.DataAccess.Data
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
            : base(options)
        {
        }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            if (!optionsBuilder.IsConfigured)
            {
                optionsBuilder.UseOracle(@"User Id=xxxxx;Password=xxxxx;Data Source=xx.xx.xx.xx:xxxx/xxxxx;");

            }
        }

       
        public DbSet<CMJobProgress> CMJOBPROG { get; set; }
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {


            modelBuilder.Entity<CMJobProgress>(builder =>
            {
                builder.HasNoKey();
                builder.ToTable("CMJOBPROG");
            });
        }
    }
}

Error i get:

DataTables warning: table id=JobtblData - Ajax error. For more information about this error, please see http://datatables.net/tn/7.

Request URL: https://localhost:44382/Admin/CMJobProgress/GetAll?_=1602720362984 Request Method: GET Status Code: 400 Remote Address: [::1]:44382 Referrer Policy: strict-origin-when-cross-origin

Could anyone help me plese?

400 error indicates one if *malformed request syntax, invalid request message framing, or deceptive request routing* - can you try without `[ValidateAntiForgeryToken]` and if that fixes the issue, perhaps read https://stackoverflow.com/questions/13621934/validateantiforgerytoken-purpose-explanation-and-example — Jaromanda X, Oct 15 '20 at 00:16
System.InvalidCastException: 'Specified cast is not valid.' [External Code] LXG.DataAccess.Repository.Repository.GetALL(System.Linq.Expressions.Expression>, System.Func, System.Linq.IOrderedQueryable>, string) in Repository.cs LXG.Areas.Admin.Controllers.CMJobProgressController.GetAll() in CMJobProgressController.cs [External Code] I tried, i get another error. — Dennisyto, Oct 15 '20 at 00:32

score 0 · Accepted Answer · answered Oct 15 '20 at 06:07

According to your controller codes, I found you have enabled the ValidateAntiForgeryToken for your api call.

But your datatable's ajax calls doesn't send the AntiForgery token as the header to the api , so that it shows 400 error.

To solve this issue, you should add the @Html.AntiForgeryToken() in the view and modify the cmjobprogress.js to get the token and send it to the api.

More details, you could refer to below codes:

View:

@{

    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Job Action</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="cmd.html">Home</a></li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
        <div class="row mb-2">
            <div class="col-6 text-right">
            </div>
            <div class="col-6 text-right">
                <a class="btn btn-primary"><i class="fas fa-plus"></i> &nbsp; Create New Job</a>
            </div>
        </div>

    </div><!-- /.container-fluid -->
</div>

<section class="content">
    <div class="container-fluid">
        <div class="p-4 border rounded">
            <table id="JobtblData" class="table table-striped table-bordered" style="width:100%">
                <thead class="thead-dark">
                    <tr class="table-info">
                        <th>Job Number</th>
                        <th>Assign From</th>
                        <th>Assign To</th>
                        <th>Date Assign</th>
                        <th>Job Action</th>
                        <th>Remarks</th>
                        <th>Type</th>
                        <th>Division</th>


                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>
@Html.AntiForgeryToken()

@section Scripts{

    <script src="~/js/cmjobprogress.js"></script>
}

cmjobprogress.js:

<script>

    var JobdataTable;

    $(document).ready(function () {
        loadJobDataTable();
    });

    function loadJobDataTable() {
        JobdataTable = $('#JobtblData').DataTable({
            "ajax": {
                "url": "/Admin/CMJobProgress/GetAll"
                'beforeSend': function (request) {
                    request.setRequestHeader("RequestVerificationToken", document.getElementsByName('__RequestVerificationToken')[0].value);
                }
             },
            "columns": [
                { "data": "job_number" },
                { "data": "assign_from" },
                { "data": "assign)to" },
                { "data": "date_assign" },
                { "data": "job_action" },
                { "data": "remarks" },
                { "data": "type" },
                { "data": "division" }
            ]

        })
    }
</script>

score 0 · Answer 2 · answered Oct 15 '20 at 06:46

0

DataTables warning: table id=tblData - Requested unknown parameter 'jobnumber' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Thanks for your response Jaromanda and Brando. Now i get the some of the column data, but some i did not get it due to above error. Actually how to define the column data name of ajax.datatable? It is actually not the same as the model properties name.

answered Oct 15 '20 at 06:46

Dennisyto

5
4

In my opinion, this issue is not related with the thread title. I suggest you could try to mark the right reply and create a new question and talk about the new issue. So that other folks who faces the same issue could find the issue and answer more easily. Thank you. – Brando Zhang Oct 15 '20 at 07:17
Noted Brando. Thanks – Dennisyto Oct 15 '20 at 07:37
I'm glad that you will create a new thread. More details about how to mark as reply, you could refer to [this](https://stackoverflow.com/help/someone-answers) . – Brando Zhang Oct 15 '20 at 07:40

Why i keep getting 400 error while calling ajax datatable api from .net core controller?

2 Answers2