JsonException: A possible object cycle was detected. With ASP.NET Core MVC And Blazor Component

Question

I added Blazor components in my ASP.NET Core MVC application, when I am passing a model to the component, I got this error:

JsonException: A possible object cycle was detected. This can either be due to a cycle or if the object depth is larger than the maximum allowed depth of 64. Consider using ReferenceHandler.Preserve on JsonSerializerOptions to support cycles.

So, I tried add all these options in my startup.cs:

services.Configure<Microsoft.AspNetCore.Mvc.JsonOptions>(options => {
                options.JsonSerializerOptions.MaxDepth = 256;
            });

services.Configure<Microsoft.AspNetCore.Http.Json.JsonOptions>(opt =>
            {
                opt.SerializerOptions.ReferenceHandler = ReferenceHandler.Preserve;
                opt.SerializerOptions.MaxDepth = 256;
            });

services.AddControllers().AddJsonOptions(options =>
            {
                options.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.Preserve;
            });

services.AddMvc(opt => { ... })
        .AddJsonOptions(opt =>
                {
                    opt.JsonSerializerOptions.ReferenceHandler = System.Text.Json.Serialization.ReferenceHandler.Preserve;
                });

But none of them work, nothing happens, and I always get the same error.

I use the component like this:

<component type="typeof(CompBlazor)" render-mode="ServerPrerendered" param-Client="Model"/>

This is the code in my Blazor component:

@code {
     [Parameter]
     public Client cli {get;set;}
}

No matter what I do, I always get that same error.

Answer 1

I guess you should use nested models and end up with an infinite loop, like this:

Model:

public class Client
{
    public string Name { get; set; }
    public List<Reservation> Reservation { get; set; } = new List<Reservation>();
}

public class Reservation
{
    public Client Client { get; set; }
}

Controller:

public IActionResult Index()
{            
    var client = new Client() { Name="test"};
    client.Reservation.Add(new Reservation { Client = client });
    client.Reservation.Add(new Reservation { Client = client });
    return View(client);
}

Doing so will make the final result an infinite loop causing this error to occur.

I tested a solution to this problem, using Newtonsoft.Json's JsonConvert for serialization and deserialization. Not sure if this is the best solution, but it works. you can refer to my test code below:

Insatll Newtonsoft.Json NuGet Package.

And then in Controller:

public IActionResult Index()
{         
    var client = new Client() { Name="test"};
    client.Reservation.Add(new Reservation { Client = client });
    client.Reservation.Add(new Reservation { Client = client });

    var ClientSerialize = JsonConvert.SerializeObject(client,
         Formatting.Indented,
         new JsonSerializerSettings()
         {
             ReferenceLoopHandling = ReferenceLoopHandling.Ignore
         }
    );
    Client ClientDeserialize = JsonConvert.DeserializeObject<Client>(ClientSerialize);

    return View(ClientDeserialize);
}

View:

<component type="typeof(CompBlazor)" render-mode="ServerPrerendered" param-cli="Model" />

Blazor component:

@code {
    [Parameter]
    public Client cli { get; set; }
}

Test Result:

For more details about ReferenceLoopHandling, you can refer to this answer.

Also, you can try to use this solution. I tested it but it didn't work for me, not sure if it will work for your code.