I'm building an Asp.net Core project with N-tier architecture. I'm using DataTable and I want to load data with Ajax but I'm overlooking some things. This is my code;

My View;

<script type ="text/javascript">

    $(document).ready(function (){
        $('#myTable').DataTable({
            ajax: {
                url: "/api/Values",
                dataSrc: ""
            },
            columns: [
                { data: "Id" },
                { data: "Name" },
                { data: "Description" },
                { data: "Date" },
                { data: "Deleted" },
                {
                    data: "id",
                    render: function (data, type, row,meta) {
                        return "<button class='btn btn-primary' style='margin-right:5px;' onclick=Edit("  JSON.stringify(row)  ")>Edit</button>"  
                            "<button class='btn btn-danger' onclick=Delete("  JSON.stringify(row)  ")>Delete</button>";
                    }
                },
            ]
        });
    });
</script>

My API Controller code;

namespace MottoUI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        RoleManager rm = new RoleManager(new EfRoleRepository());
        IRoleService _roleService = null;

        public ValuesController(IRoleService roleService)
        {
            _roleService = roleService;
        }

        // GET: api/<ValuesController>
        [HttpGet]
        public IEnumerable<Role> GetRole()
        {
            return _roleService.GetList();
        }
}

My Entity structure;

public class Role
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public DateTime Date { get; set; }
        public bool Deleted { get; set; }
    }

I got this error;