How to set serialization in Asp .Net Core

Question

Im getting the following error on my Ajax post back {"readyState":0,"status":0,"statusText":"error"} on my first ajax call but the second one returns data I want. My C# method (UserSelect) JsonResults shows the data when I put break point

My C# code :

   public IActionResult OnPostAreaSelect(string Id)
    {
        //Generating list for Areas
        Guid ModelId = new Guid(Id);
        List<ModelArea> modelAreas = _context.ModelArea.Distinct()
            .Where(w => w.ModelId == ModelId).OrderBy(o => o.AreaColumn.Name).Include(i => i.AreaColumn).ToList();

       return new JsonResult(modelAreas);
    }

    public IActionResult OnPostUserSelect(string Id)
    {
        //Generating list for Users   
        Guid ModelId = new Guid(Id);

        List<UserModel> userModels = _context.UserModel
            .Where(w => w.ModelId == ModelId).OrderBy(o => o.User.FullName)
            .Include(i => i.User)
            .ToList();


        return new JsonResult(userModels);
    }

My JavaScript :

<script type="text/javascript">
$(document).ready(function () {

    $("#RepfocusModelDropdown").change(function () {
        var Id = $(this).val();
        if (Id != null) {
            $.ajax({                   
                async: true,
                type: "POST",
                url: "./Create?handler=UserSelect",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: {
                    Id: Id
                },
                crossDomain: true,
                dataType: "json",
                success: function (response) {
                     alert(JSON.stringify(response));

                },
                error: function (response) {
                    alert(JSON.stringify(response));
                }

            });

            $.ajax({
                type: "POST",
                url: "./Create?handler=AreaSelect",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: {
                    Id: Id
                },
                dataType: "json",
                success: function (response) {
                    alert(JSON.stringify(response));

                },
                error: function (response) {
                    alert(JSON.stringify(response));
                }

            });

        }


    })
})

The second ajax call on my script works fine only the first one returns the error How can I solve the error

Answer 1

When you work with EntityFramework (or other ORM) there may be problems with serialization because an entity could have some circular references . To avoid this problem a solution is to set serialization settings:

services.AddMvc().AddJsonOptions(opt => {
    opt.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
});

or:

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