.NET MVC Datatables response works, table doesn't render

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

Paste the JSON returned by your controller - first couple of rows. — Icarus
– Icarus, Commented Apr 24, 2014 at 18:38
@wootscootinboogie Sorry. I was asking about the DrugColorId. — MiniRagnarok
– MiniRagnarok, Commented Apr 24, 2014 at 18:43

Richthofen · Accepted Answer · 2014-04-24 18:32:08Z

0

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).

answered Apr 24, 2014 at 18:32

Richthofen

2,07619 silver badges40 bronze badges

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

1 Comment

wootscootinboogie Over a year ago

It's relatively small (140 records), but taking 10 didn't get my a different result.

MiniRagnarok · Accepted Answer · 2014-04-24 19:04:38Z

0

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.

edited Apr 24, 2014 at 19:04

answered Apr 24, 2014 at 18:47

MiniRagnarok

95911 silver badges25 bronze badges

2 Comments

wootscootinboogie Over a year ago

If I'm consuming a service that I wrote, how would one add a property like 'aaData' to the returned JSON?

MiniRagnarok Over a year ago

@wootscootinboogie You could look at how Darin did it. stackoverflow.com/questions/7835960/…

Collectives™ on Stack Overflow

.NET MVC Datatables response works, table doesn't render

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related