MVC DataTable complex object

Question

I want to replace my MVC.GRID to use JQuery Datatable but it's not that easy as it seems. i searched online got some examples but not much with MVC. The only one i found it was focused on server side operation which i don't need since my data are not that huge.

Issue:

Based on 2 parameters, i want to get list of Users and display them on datatable

public class User
    {
        public Address Address { get; set; }
        public UID UID { get; set; }
        public String Name { get; set; }
        public Prof Prof { get; set; }
    }

Here how i get users from database:

 public ActionResult Prov(int id,int cityId)
        {
            var users =
                    Uow.Users.GetAllByIdAndCityId(id,cityId).ToList();
            return Json(new
            {
               data = users 
            }, JsonRequestBehavior.AllowGet);
        }

In my view

 <table id="ProvTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>City Name</th>
                            <th>UID Code</th>
                            <th>Title</th>
                        </tr>
                    </thead>
                </table>

here is how i access nasted objects in ajax call

$(document).ready(function() {
            $.ajax({
                url: '/Users/Prov',
                method: 'post',
                datatype: 'json',
                success: function(data) {
                    $('#ProvTable').DataTable({
                        data: data,
                        columns: [
                            { 'data': 'Name' },
                            { 'data': 'Address.City.Name' },
                            { 'data': 'UID.Code' },
                            { 'data': 'Prof.Title' },
                        ]
                    });
                }
            });

        });

My code doesn't work, i'm missing many things My questions:

1. How can i pass parameters? (there are stored in ViewBag
2. How can i access nasted objects
3. Is the way i convert my list to json correct?
4. What am i missing to make it work?

PS: i got the following error: when i call return Json

A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.Address_303E2DDFF080BE1C1CCF72F05B5DEE54E141232835E91070AA59A7AC0D8E5DD3'.

public class Prof
    {
        public string Title{ get; set; }
        public KOS KOS{ get; set; }
    }

public class KOS
    {
        public Category Cat{ get; set; }
        public string KosCode{ get; set; }
    }

public class Category
    {
        public string Name{ get; set; }
        public string CatCode{ get; set; }
    }

public class UID
    {
        public string Name{ get; set; }
        public string UIDCode{ get; set; }
    }

public class Address
    {
        public City City{ get; set; }
        public String Zip{ get; set; }
    }

Answer 1

MVC by default uses the JavascriptSerializer for converting to JSON which does not support models with circular references. The error occurs when the model contains a property which is a complex object, and that object contains a reference back to your model, for example User contains property for Prof and Prof contains a property for User.

The models you have shown do not suggest that, but I'm assuming you have not shown all the properties of all your models.

In any case, there is no point sending every property of every model across the wire when all you want are 4 properties, and the simple way to solve this (and improve performance) is to create an anonymous object containing only what you need

public ActionResult Prov(int id, int cityId)
{
    var users = Uow.Users.GetAllByIdAndCityId(id, cityId).Select(x => new
    {
        Name = x.Name,
        City = x.Address.City.Name,
        Code = x.UID.Code,
        Title = x.Prof.Title
    };
    return Json(users, JsonRequestBehavior.AllowGet);
}

and in the script

success: function(data) {
    $('#ProvTable').DataTable({
        data: data,
        columns: [
            { 'data': 'Name' },
            { 'data': 'City' },
            { 'data': 'Code' },
            { 'data': 'Title' },
        ]
    });
}