Issues trying to apply example from Editor .NET Core demo

equezadajej

Good afternoon, I've been using the free version of Datatables for a while now and now I'm starting to get into the Editor world via the 15 day trial.
I started porting code from the .Net Core demo to start tinkering with it but I got into a roadblock:

I was able to initialize Editor correctly, but it won't load the current rows from my SQL Server instance. I used the New option to see if it did anything and indeed added a row to my SQL table.

For the table, I have the following structure, using idCatTipAct as primary key instead of an id column.

This is the method present in the controller,

[Route("api/staff")]
[HttpGet]
[HttpPost]
public ActionResult Staff()
{
    var dbType = Environment.GetEnvironmentVariable("DBTYPE");
    var dbConnection = Environment.GetEnvironmentVariable("DBCONNECTION");
 
    using (var db = new Database(dbType, dbConnection))
    {
        var response = new Editor(db, "TBCategoriaTipoActivo", "idCatTipAct")
            .Model<CategoriaTipoActivoModel>()
            .Field(new Field("nombreCategoria")
                .Validator(Validation.NotEmpty())
            )
            .TryCatch(false)
            .Process(Request)
            .Data();
 
        return Json(response);
    }
}

While this is the code present in the view I'm using:

<script type="text/javascript" language="javascript" class="init">
    var editor; // use a global for the submit and return data rendering in the examples
 
    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            ajax: "/api/staff",
            table: "#example",
            idSrc: "idCatTipAct",
            fields: [{
                label: "Nombre Categoría:",
                name: "nombreCategoria"
            }
            ]
        });
 
        $('#example').DataTable({
            dom: "Bfrtip",
            ajax:
            {
                url: "/api/staff",
                dataSrc: ""
            },
            columns: [
                { data: "nombreCategoria" }
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ]
        });
    });</script>
 
<div class="card">
    <div class="card-header with-border">
        <h4>MantenedorVistaTipoActivo</h4>
    </div>
    <div class="card-body" id="cardVistaFeriados">
 
        <div class="demo-html">
            <table id="example" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Nombre Categoría</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Nombre Categoría</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

I did a few tests and I was able to create new rows in the database table, so I'm pretty sure it's not an issue with the connection itself (I hope).

According to the debugger, it ran 15 tests and there were no issues.
Debugger code: unijox

allan

Thanks for the details.

Remove idSrc: 'idCatTipAct' from the Editor initialisation (it isn't needed since you specify the ID in the Editor constructor at the server-side) and also dataSrc: "" from your DataTables initialisation (it isn't needed since the server-side libraries will reply with the default JSON structure).

I'm not sure that is going to resolve the issue though - the debug trace appears to show that the server is responding with just {}. Could you check that in your browser's network inspector please?

Thanks,
Allan

equezadajej

Hi, thank you for answering!. I removed idSrc from the Editor initialisation and dataSrc from the DataTables initialisation, but now I see that it gets stuck with the loading message.

Common tests from the DataTables debugger still pass (code: unulan), but looking at the network inspector both before and after does show the element staff?_=1xxxxxx to be responding with just {}. However, I did notice an exception on the browser console: Uncaught TypeError: Cannot read properties of undefined (reading 'length'),
which I got in a previous attempt and was the reason I tried adding dataSrc to the DataTables initialisation, as that was one of the first responses I found to solve that issue.

I uploaded the HAR file if you need it. https://file.io/9fIpistPsFnR

allan

Many thanks - the table getting stuck at Loading and the error in the console are basically the same thing, and being caused by the server responding with just {}. DataTables is looking, at a minimum for {"data":[]} being returned with that configuration.

I think your client-side looks correct now, given you are using our server-side libraries. The missing part is to find out why the server-side isn't working!

Could you try adding:

.Debug(true)

just after the .TryCatch(false) call and then upload another trace for me please? Hopefully there will be some SQL information in the response with that change.

Allan

equezadajej

Done.

Debugger code: usapoc

HAR file: https://file.io/mCIKasG1JABi

equezadajej

I was browsing through and found that the response in the action method is responding with the rows at the very least

equezadajej

Turns out I hadn't added AddNewtonsoftJson() to ConfigureServices in Startup.cs

            services.AddControllersWithViews(options =>
            {
                var policy = new AuthorizationPolicyBuilder()
                    .RequireAuthenticatedUser()
                    .Build();
                options.Filters.Add(new AuthorizeFilter(policy));
            })
                .AddRazorRuntimeCompilation()
                .AddNewtonsoftJson();

Thanks for the help anyway!

allan

Ah - that would do it. Thanks for letting me know

Great to hear you've got it working now.

Allan