.NET MVC Datatables响应有效，表未呈现

Question

I have a Services controller with an action:

   [WebMethod]
    [ScriptMethod]
    public JsonResult GetDrugClasses()
    {
        var dataAccess = new DataAccessLayer();
        var drugClasses = new List<DrugClassTable>();
        drugClasses = dataAccess.GetDrugClasses();
        return Json(drugClasses, JsonRequestBehavior.AllowGet);
    }

And in my view I have:

<table id="myTable">
    <thead>
        <tr>
            <th>DrugColorID</th>
            <th>DrugColorDescription</th>
            <th>DrugClass</th>
        </tr>
    </thead>
</table>
<script type="text/javascript">
    $('#myTable').dataTable({
        'bServerSide': true,
        'sAjaxSource': '/Services/GetDrugClasses',
        'aoColumns': [
            { 'sName': 'DrugColorId' },
            { 'sName': 'DrugColorDescription' },
            { 'sName': 'DrugClass' }
            ]
    });
</script>

When I open up dev tools I can see the the request was successful and the correct response was received. When I use the above code I get a JavaScript error: Cannot read property length of undefined on line 2038 of the data tables version hosted here: http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js

I have a Model with three lists which I will need to use client-side paging on. Datatables renders the search box, columns and paging controls correctly, just not the data. What am I missing here?

sample JSON:

 [
   {
      "DrugClass":"A1A",
      "DrugDescription":"DIGITALIS GLYCOSIDES                                        "
   },
   {
      "DrugClass":"A1B",
      "DrugDescription":"XANTHINES                                                   "
   },
   {
      "DrugClass":"A1C",
      "DrugDescription":"INOTROPIC DRUGS                                             "
   },
   {
      "DrugClass":"A1D",
      "DrugDescription":"GENERAL BRONCHODILATOR AGENTS                               "
   },
   {
      "DrugClass":"A1E",
      "DrugDescription":"XANTHINES/DIETARY SUPPLEMENT COMBINATIONS                   "
   },
   {
      "DrugClass":"A2A",
      "DrugDescription":"ANTIARRHYTHMICS                                             "
   },
   {
      "DrugClass":"A2B",
      "DrugDescription":"ANTIANGINAL, HEART RATE REDUCING, I(F) INHIBITOR            "
   },
   {
      "DrugClass":"A2C",
      "DrugDescription":"ANTIANGINAL & ANTI-ISCHEMIC AGENTS,NON-HEMODYNAMIC          "
   }
]

model:

 public IEnumerable<DrugClassTable> DrugClasses { get; set; }
    public IEnumerable<SideEffects> SideEffects { get; set; }
    public IEnumerable<DrugColor> DrugColors { get; set; }

DrugColor:

public class DrugColor
    {
        public int DrugColorId { get; set; }
        public string DrugColorDescription { get; set; }
        public string DrugClass { get; set; }
    }

DrugClassTable

public class DrugClassTable
    {
        public string DrugClass { get; set; }
        public string DrugDescription { get; set; }
    }

Answer 1

How large is the dataset you are pulling down in GetDrugClasses? It's possible your method returns an incomplete/malformatted value (null, perhaps?) where datatables isn't expecting it.

Step one is modify your controller and say, do Take(10) or Take(1) on GetDrugClasses (in case a value is malformatted, let's see if even the first few items work or not). If that still fails, try mocking out a fake DrugClass object with manually set string values. If that doesn't work, try maybe an older/newer version of the dataTables library (in case its a datatables bug).

Answer 2

You set up your table to expect DrugColor but you sent DrugClassTable .

I assume that you meant to set your table up for DrugClassTable . Change that and see if it works.

For example,

<table id="myTable">
    <thead>
        <tr>
            <th>DrugClass </th>
            <th>DrugDescription </th>
        </tr>
    </thead>
</table>
<script type="text/javascript">
    $('#myTable').dataTable({
        'bServerSide': true,
        'sAjaxSource': '/Services/GetDrugClasses',
        'aoColumns': [
            { 'sName': 'DrugClass' },
            { 'sName': 'DrugDescription ' }
            ]
    });
</script>

As other people have mentioned, the json return is wrong. It should look like this:

{
  "aaData": [
    [
       {
          "DrugClass":"A1A",
          "DrugDescription":"DIGITALIS GLYCOSIDES                               "
       },
       {
          "DrugClass":"A1B",
          "DrugDescription":"XANTHINES                                                   "
       }
    ]
  ]
}

Here's an example of how to set this up.