Kendo MultiSelect is generating a Circular Reference Exception (only when data exists)

Question

I have two database tables: 'Asset'; and 'Status'.

Status has 2 columns: Id (long Primary Key); and Description (string)

Asset has 3 columns: Id(long Primary Key), StatusId (long Primary Key); OrderInfo (string).

StatusId (in Asset) is a Foreign Key relationship to Id (in Status).

If there is no data in the Asset table I can use the following code to generate a MultiSelect drop down in the View from the Status table's data. However, if there is any data in the Asset table I get a Circular Reference exception from the Kendo().MultiSelect() function. How do I resolve this?

Here is the C# in HomeController:

public ActionResult Index()
{                     
    return View(new HomeVm( _db.Status,  _db.Assets));
}

Here is the C# view model, HomeVm.cs

public HomeVm(IEnumerable<Status> statuses, long[] statusIds, IEnumerable<Asset> assets )
{
    Statuses = statuses;
    StatusIds = statusIds;
    Assets = assets;
}

public IEnumerable<Status> Statuses { get; set; }
long[] StatusIds { get; set; }
public IEnumerable<Asset> Assets { get; set; }

Here is the CSHTML (razor syntax) in the View:

@model BoiseHardware.Models.HomeVm

@using (Html.BeginForm())
{
    <div>
        @(Html.Kendo().MultiSelectFor(model => model.StatusIds)
          .DataTextField("Description")
          .DataValueField("Id")
          .BindTo(Model.Status)
          .Placeholder("Statuses")
          )
    </div>

    <input type="submit" value="Show Me The Data!"/>
 }

<div>
    @(Html.Kendo().Grid(Model.Assets)
        .Name("Assets")
        .Pageable()
        .Sortable()
    )
</div>

Here is the error response (from Google Chrome v.54)

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

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.InvalidOperationException: A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.Asset_E86957A5452298EBC7CD18E0C7D70EC50A3EF7827AB78015AACF96D8D8F33B2B'.

Source Error: 

Line 7:  {
Line 8:      <div>
Line 9:          @(Html.Kendo().MultiSelectFor(model => model.StatusIds)
Line 10:           .DataTextField("Description")
Line 11:           .DataValueField("Id")

Thanks!

score 0 · Answer 1 · answered Jun 19 '17 at 15:37

0

Your issue comes from JSON serialization rather than having anything to do with Kendo UI itself. Take a look at the following post for a solution to your problem:

Circular reference detected exception while serializing object to JSON

answered Jun 19 '17 at 15:37

Vesselin Obreshkov

1,087
11
26

Thanks Vesselin. I had seen that post and it did not provide the needed clues. Through trial and error and educated guesses I solved the issue and posted a solution. – lincstar182 Jun 19 '17 at 16:43

score 0 · Answer 2 · answered Jun 19 '17 at 16:42

I have found a solution. Hope this helps someone else.

1 - I added a simple view model:

public class MultiSelectVm
{
    public MultiSelectVm() { }

    public long Id { get; set; }
    public string Description { get; set; }
}

2 - Modified my call to the DB to use the view model:

public ActionResult Index()
{                     
    var statuses = _db.Status.Select(m => new MultiSelectVm { Id = m.Id, Description = m.Description }).ToList();
    return View(new HomeVm( statuses,  _db.Assets));
}

Cheers ...

Kendo MultiSelect is generating a Circular Reference Exception (only when data exists)

2 Answers2