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.

It will be better if you put code for your model ContentItem :) — Nikunj Patel
– Nikunj Patel, Commented Jun 6, 2017 at 10:03
seems like something goes wrong with your ajax request path see network tab in console and see is it hitting the correct url or not? — Curiousdev
– Curiousdev, Commented Jun 6, 2017 at 10:04
@NikunjPatel the contentitem is loaded from a database which I made in SSMS — HJarry
– HJarry, Commented Jun 6, 2017 at 10:08
@Curiousdev the path it goes to is /home/loaddata?_=1496743124550.. I don't think this is correct — HJarry
– HJarry, Commented Jun 6, 2017 at 10:08

Jay · Accepted Answer · 2017-06-06 12:17:26Z

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);
        }
    }

answered Jun 6, 2017 at 12:17

Jay

7239 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC 5 Datatable error

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related