Requested unknown parameter 'CategoryName' for row 0, column 0. How can I see the actual column name are being passed to <th>

Question

User-1355965324 posted

I am trying to list the record from JS  datatable   . My html is given below

@model LibraryBooks.Models.ViewModels.CategoryVM
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 <table id="tblData" class="table table-striped table-bordered" style="width:100%">
        <thead class="thead-dark">
            <tr class="table-info">
                <th>CategoryName</th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>

    </table>

@section Scripts{
    <script src="~/js/Category.js">
       
    </script>
}

Category.js

Category.js

var dataTable;

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


function loadDataTable() {
   
    dataTable = $('#tblData').DataTable({
        "ajax": {
            "url": "/Admin/Category/GetAll"
        },
        "columns": [
            { "data": "CategoryName", "width": "60%" },
            {
                "data": "id",
                "render": function (data) {
                    return `
                            <div class="text-center">
                                <a href="/Admin/Category/Upsert/${data}" class="btn btn-success text-white" style="cursor:pointer">
                                    <i class="fas fa-edit"></i> 
                                </a>
                                <a onclick=Delete("/Admin/Category/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
                                    <i class="fas fa-trash-alt"></i> 
                                </a>
                            </div>
                           `;
                }, "width": "40%"
            }
        ]
    });
    
   
    
}

Model class

using LibraryBooks.Models;
using System;
using System.Collections.Generic;
using System.Text;

namespace LibraryBooks.Models.ViewModels
{
    public class CategoryVM
    {
        public IEnumerable<Category> Categories { get; set; }
        public PagingInfo PagingInfo { get; set; }
    }
}


Category mdeols

namespace LibraryBooks.Models
{
    public class Category
    {
        [Key]
        public int Id { get; set; }

        [Display(Name="Category Name")]
        [Required]
        [MaxLength(50)]
        public string CategoryName { get; set; }
    }
}

Controller

  public IActionResult Index()
        {
            return View();
        }

        

        [HttpGet]
        public IActionResult GetAll()
        {
            var allObj = _unitOfWork.Category.GetAll();  // The record is coming here but in data table it shows   Requested unknown parameter  'CategoryName'
            return Json(new { data = allObj });
        }

Please help , The column of the model is not being taken in html

Answer 1

User-474980206 posted

Try

return Json(allObj);

Answer 2

User711641945 posted

Hi polachan,

Change like below:

"columns": [
            { "data": "categoryName", "width": "60%" },
            {
                "data": "id",
                "render": function (data) {
                    return `
                            <div class="text-center">
                                <a href="/Admin/Category/Upsert/${data}" class="btn btn-success text-white" style="cursor:pointer">
                                    <i class="fas fa-edit"></i> 
                                </a>
                                <a onclick=Delete("/Admin/Category/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
                                    <i class="fas fa-trash-alt"></i> 
                                </a>
                            </div>
                           `;
                }, "width": "40%"
            }
        ]

Best Regards,

Rena

Answer 3

User-1355965324 posted

Please can you let me know how do you find the column name  must be  categoryName rather than CategoryName. How can I  print the column name using console.log 

Answer 4

User711641945 posted

Hi polachan,

You could check the data passed from server side like below:

"ajax": {
            "url": "/Home/GetAll",
            "success": function (data) {
                console.log(data);
        }
 },

Best Regards,

Rena