JSON Return ASP.net Core 3.1

titechno

Debugger code (debug.datatables.net): iyuxug

Error messages shown:

TypeError: Cannot read properties of undefined (reading 'length')
at https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js:62:341
at Object.f [as success] (https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js:48:499)
at fire (https://code.jquery.com/jquery-3.5.1.js:3496:31)
at Object.fireWith [as resolveWith] (https://code.jquery.com/jquery-3.5.1.js:3626:7)
at done (https://code.jquery.com/jquery-3.5.1.js:9786:14)
at XMLHttpRequest.<anonymous> (https://code.jquery.com/jquery-3.5.1.js:10047:9)

Description of problem:

Table does not load in ASP.net Core 3.1.

Since I read multiple topics regarding this in the forum and still can't find a solution I would like to report this as a bug.

Controller:

#region API Calls
        [Route("/lieferanten/lieferantenUmsaetze")]
        [HttpGet]
        [HttpPost]
        public IActionResult LieferantenUmsaetze()
        {
            var dbType = Environment.GetEnvironmentVariable("DBTYPE");
            var dbConnection = Environment.GetEnvironmentVariable("DBCONNECTION");
                using (var db = new Database(dbType, dbConnection))
                {
                    var response = new Editor(db, "LieferantenUmsaetze")
                        .Model<LieferantenUmsaetze>()
                        .Field(new Field("liefNr")
                            .Validator(Validation.NotEmpty())
                            .Validator(Validation.MaxLen(4))
                            .Validator(Validation.MinLen(4))
                            .Validator(Validation.Numeric())
                        )
                        .Field(new Field("gesNr")
                            .Validator(Validation.NotEmpty())
                            .Validator(Validation.MaxLen(3))
                            .Validator(Validation.Numeric())
                        )
                        .Field(new Field("ahNr")
                            .Validator(Validation.MaxLen(3))
                            .Validator(Validation.Numeric())
                        )
                        .Field(new Field("jahr")
                            .Validator(Validation.NotEmpty())
                            .Validator(Validation.MaxLen(4))
                            .Validator(Validation.Numeric())
                        )
                        .Field(new Field("umsatz")
                            .SetFormatter(Format.FromDecimalChar(','))
                            .GetFormatter(Format.ToDecimalChar(','))
                        )
                        .TryCatch(false)
                        .Process(Request)
                        .Data();

                //return  Json( new { data = response.data.ToList() });
                String test = JsonConvert.SerializeObject(Json(response));
                String test2 = JsonConvert.SerializeObject(Json(new { data = response.data.ToList() }));
                return Json(response);
            }
                //return Json(new { data = _db.LieferantenUmsaetze.ToList() });
        }
        #endregion

Javascript:

var editor;

$(document).ready(function () {
    loadDataTable();
});

function loadDataTable() {
    editor = new $.fn.dataTable.Editor({
        ajax: "/lieferanten/lieferantenUmsaetze",
        table: "#DT_load",
        fields: [{
            label: "Lief. Nummer:",
            name: "liefNr"
        }, {
            label: "Ges. Nummer:",
            name: "gesNr"
        }, {
            label: "Ah. Nummer:",
            name: "ahNr"
        }, {
            label: "Umsatz:",
            name: "umsatz"
        }, {
            label: "Jahr:",
            name: "jahr"
        }
        ]
    });

    var table = $('#DT_load').DataTable({
        dom: "Bfrtip",
        ajax: "/lieferanten/lieferantenUmsaetze",
        order: [[1, 'asc']],
        columns: [
            {
                data: "liefNr",
                orderable: false },
            { data: "gesNr" },
            {
                data: "ahNr",
                orderable: false
            },
            {
                data: "jahr",
                orderable: false
            },
            {
                data: "umsatz",
                render: $.fn.dataTable.render.number('.', ',', 2,'', ' €'),
                orderable: false
            }
        ],
        keys: {
            columns: ':last-child',
            editor: editor
        },
    });
}

Imports:

    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.6.4/css/keyTable.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.3.9/css/autoFill.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="~/css/editor.dataTables.min.css">

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/keytable/2.6.4/js/dataTables.keyTable.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/autofill/2.3.9/js/dataTables.autoFill.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
    <script type="text/javascript" language="javascript" src="~/js/dataTables.editor.min.js"></script>

HTML:

<br />
<div class="container row p-0 m-0">
    <div class="col-6">
        <h2 class="text-info text-black-50">Lieferanten Reporting</h2>
    </div>
        <div class="col-12 border p-3">
            <table id="DT_load" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Lieferanten Nummer</th>
                        <th>Gesellschafter Nummer</th>
                        <th>Autohaus Nummer</th>
                        <th>Jahr</th>
                        <th>Umsatz</th>
                    </tr>
                </thead>
            </table>
        </div>
</div>

@section Scripts{
    <script src="~/js/Lieferanten/ReportRevenue.js"></script>
}

JSON String:

"{\"ContentType\":null,\"SerializerSettings\":null,\"StatusCode\":null,\"Value\":{\"draw\":null,\"data\":[{\"DT_RowId\":\"row_1\",\"liefNr\":\"1232\",\"gesNr\":\"510\",\"ahNr\":\"000\",\"jahr\":\"2020\",\"umsatz\":23234.59,\"id\":1},{\"DT_RowId\":\"row_2\",\"liefNr\":\"1232\",\"gesNr\":\"123\",\"ahNr\":\"210\",\"jahr\":\"2020\",\"umsatz\":4565.67,\"id\":2},{\"DT_RowId\":\"row_4\",\"liefNr\":\"1232\",\"gesNr\":\"236\",\"ahNr\":\"651\",\"jahr\":\"2020\",\"umsatz\":123456.00,\"id\":4},{\"DT_RowId\":\"row_6\",\"liefNr\":\"1232\",\"gesNr\":\"124\",\"ahNr\":\"123\",\"jahr\":\"2020\",\"umsatz\":12365.50,\"id\":6},{\"DT_RowId\":\"row_7\",\"liefNr\":\"1232\",\"gesNr\":\"777\",\"ahNr\":\"123\",\"jahr\":\"2020\",\"umsatz\":156442.00,\"id\":7},{\"DT_RowId\":\"row_9\",\"liefNr\":\"2154\",\"gesNr\":\"610\",\"ahNr\":\"\",\"jahr\":\"2020\",\"umsatz\":123456.00,\"id\":9},{\"DT_RowId\":\"row_11\",\"liefNr\":\"1232\",\"gesNr\":\"999\",\"ahNr\":\"999\",\"jahr\":\"2020\",\"umsatz\":200.13,\"id\":11}],\"recordsTotal\":null,\"recordsFiltered\":null,\"error\":null,\"fieldErrors\":[],\"id\":null,\"meta\":{},\"options\":{},\"searchPanes\":null,\"files\":{},\"upload\":{\"id\":null},\"debug\":null,\"cancelled\":[]}}"

kthorngren

Isn't this the same question as your other thread? Please don't duplicate questions.

Your JSON response is a string within a string. Note the outer quotes and the escaped quotes. I'm not familiar with ASP.net Core but it suggests that response in line 44 above (return Json(response);) is already a JSON string. Try using return response;.

Kevin

titechno

Nope, not working since it is of Type DtResponse and not of JsonResult.

allan

Hi,

In your Startup.cs do you have something like this?:

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers().AddNewtonsoftJson(); // Required in .NET Core 3 and later. Optional before
            services.AddMvc(option => option.EnableEndpointRouting = false);
        }

Note how in .NET Core 3+ you need to explicitly add a JSON controller.

Allan

titechno

Thanks a lot for the support allan.
That fixed it, consider adding this to the documentation!

Best regards

allan

Agreed - I'll get it added in . Good to hear that did the job.

Allan