MVC 5 Datatable error

Question

I am currently working on a datatable in MVC 5 but when I try to load the content in the datatable I am getting an error.

HomeController

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using CMS.Models;
using System.Linq.Dynamic;
using CMS.Models.DatabaseModels;

namespace CMS.Controllers.Home
 {
public class HomeController : Controller
{
    private CMSEntities db = new CMSEntities();

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

    public ActionResult loaddata()
    {
        using (CMSEntities dc = new CMSEntities())
        {                
            var data = dc.ContentItems.OrderBy(a => a.Name).ToList();
            return Json(new { data = data }, JsonRequestBehavior.AllowGet);
        }
    }

}
} 

Index.cshtml

    ViewBag.Title = "Index";
      }

<div style="width:90%; margin:0 auto;">
    <table id="myTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Title</th>
                <th>Create Date</th>
                <th>Update Date</th>
                <th>Item Content</th>
                <th>Visual Order</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>
<style>
    tr.even {
        background-color: #F5F5F5 !important;
    }
</style>
@* Load datatable css *@
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
@* Load datatable js *@
@section Scripts{
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({
                "ajax": {
                    "url": "/home/loaddata",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns" : [
                        { "data": "Name", "autoWidth": true },
                        { "data": "Title", "autoWidth": true },
                        { "data": "CreateDate", "autoWidth": true },
                        { "data": "UpdateDate", "autoWidth": true },
                        { "data": "ItemContent", "autoWidth": true },
                        { "data": "VisualOrder", "autoWidth": true }
                    ]
            });
        });
    </script>
}

The error I am getting is: DataTables warning: table id=myTable - Ajax error. For more information about this error, please see http://datatables.net/tn/7.

I went to the website and they said it needed to check the error message. The code gave me the 404 error message which means that there is a typo in the file name in the ajax option parameter and in your file on the server.

I can't seem to find the error.

Maybe I'm missing something but I don't know what.

Answer 1

pass your data like this

public ActionResult loaddata()
    {
        using (CMSEntities dc = new CMSEntities())
        {                
            var data = dc.ContentItems.select(m=>new{
Name : m.Name,
Title : m.Title,
CreateDate : m.CreateDate,
UpdateDate : m.UpdateDate,
ItemContent : m.ItemContent,
VisualOrder : m.VisualOrder
}).toList()
            return Json(new { data = data }, JsonRequestBehavior.AllowGet);
        }
    }