How to use DevExtreme in partial view (ASP.NET MVC)?

Question

I try to use DevExtreme component in partial view. But my partial view page shown when I click on the element.

And in the main page after the click I have error

Newtonsoft.Json.JsonSerializationException: Self referencing loop detected for property 'ApplicationEntity' with type 'System.Data.Entity.DynamicProxies.ApplicationEntity_50A6A66F1464C1DE4E8A736E85D88C5AF4F4249EAE26FB21C4F82592E001885D'. Path 'data[0].ApplicationEntity.ApplicationEntityHistories[0]'.

browser console screen

Main page Code:

<div class="row">
<div class="col-md-7">
   <button id="btn">CLICK</button 

</div>
<div class="col-md-5" id="divPartialViewContainer">

</div>
</div>
<script>
$(document).ready(function () {

    $("#btn").on("click", function () {
        var text = $(this).text().trim();
        if (text.length > 0) {
            console.log(text);
            $.ajax({
                url: '/RiskMap/RiskDetailsPartial/',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ 'param': text }),
                success: function (content) {
                    $('#divPartialViewContainer').html(content);
                },
                error: function (e)
                {
                    console.log(e);
                }
            });
        }
       });

     });
 </script>

Controller Code

[HttpPost]
public async Task<ActionResult> RiskDetailsPartial(string param)
{          
  return PartialView("_RiskDetails", new List<Risk>());
}

Partial View code:

@model IEnumerable<Core.Models.Risk>
@using Core.Models
@using Core.ComplexTypes
@{
   ViewBag.Title = "Risks";
}

<h2>Risks</h2>

@(Html.DevExtreme().DataGrid<Risk>()
    .DataSource(Model)
    .Columns(columns =>
    {
        columns.AddFor(m => m.Id);
        columns.AddFor(m => m.Impact);
        columns.AddFor(m => m.Probability);

    })
  )

https://www.google.co.uk/search?q=JsonSerializationException%3A+Self+referencing+loop+detected&oq=JsonSerializationException%3A+Self+referencing+loop+detected&aqs=chrome..69i57j69i58.176j0j7&sourceid=chrome&ie=UTF-8 Are you using an entity framework class as your model, perhaps? — ADyson, Feb 26 '18 at 06:43
Yes, I add this **config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;**, in my WebApiConfig class, but it did not help — Samat Yeshernkulov, Feb 26 '18 at 09:43
@SamatYeshernkulov if `ReferenceLoopHandling.Ignore` doesn't help check other options suggested in my [answer to a similar question](https://stackoverflow.com/a/49006427). — amartynov, Feb 27 '18 at 10:35

score 0 · Answer 1 · answered Feb 27 '18 at 14:34

The message is clear you just need to read it more thoroughly.

Newtonsoft.Json.JsonSerializationException: Self referencing loop detected for property 'ApplicationEntity' with type 'System.Data.Entity.DynamicProxies.ApplicationEntity_50A6A66F1464C1DE4E8A736E85D88C5AF4F4249EAE26FB21C4F82592E001885D'. Path 'data[0].ApplicationEntity.ApplicationEntityHistories[0]'.

Json serializer is attempting to serialize some kind of entity(lets call it EntityA) you passed to it, but the problem is that this entity contains another entity(lets call it EntityB) that contains the first entity(EntityA). This is going in circles!

This has also happened to me with my own ORM and I found out the problem is lazy loading. I solved it by adding an interface to each of my entities:

interface IJSonify
{
   object Json();
}

Here I simply return an anonymous object. Entity that implements this interface decides how it will represent itself as JSON object.

score 0 · Answer 2 · answered Feb 20 '19 at 08:30

I had the same problem and I solved it by declaring JsonConvert defaultSettings on webApplication init.

JsonConvert.DefaultSettings = () => new JsonSerializerSettings
{
        Formatting = Newtonsoft.Json.Formatting.Indented,
        ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
};

Apparently DevExtreme don't use standard ASP.NET MVC json serializer inside DataSourceLoader.Load(..) method, so if you set ASP.NET MVC json serializer ReferenceLoopHandling setting it is not enough.

Another solution is use [JsonIgnore] dataAnnotation above the property that generate the loop reference

How to use DevExtreme in partial view (ASP.NET MVC)?

2 Answers2