Empty Edit modals with DataTables Editor 1.6.2 on any nested model class?

JordanCapitalIT@gmail.com

None of the .NET examples in the current release of Editor (1.6.2) which implement joins with nested models and use a .NET backend (the online examples all seem to use PHP APIs / backends even if the examples themselves are composed in .NET) are complete or working, so I cannot really use them to sort out what is causing my troubles.

To narrow down why it is that any edit modals always come up empty for me on nested entities, I created an extremely simplified test Db, API, and Presentation page. Note in the example screenshot [attached] that a row is selected, but hitting the ‘Edit’ button results in an empty modal as shown. If I remove all joined fields from either the presentation or editor layer it makes no difference... it seems as long as a nested class is used on the backend editor instance (a requirement) that edit modals come up blank.

I’ve tried to make the names in the example more descriptive and purpose specific than the ambiguous ones used in the examples. This wish to move away from default names is also necessary since I’m ultimately trying to get to HTML pages that include multiple interrelated DataTable and Editor objects, and they will need to have unique names to avoid DOM selector collisions. Any information or ideas on what I might be doing wrong would be appreciated:

HTML / JS:

@{
    ViewBag.Title = "Testing Joins and Nested Models";
    Layout = "~/Views/Shared/_LayoutDTE.cshtml";
}

<h2>@ViewBag.Title</h2><h3> Test Version 1</h3>

<table id="TblTestPeople" class="table table-striped table-bordered" cellspacing="0" style="width:100%;">
    <thead>
        <tr>
            <th>Id</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>test1Id</th>
        </tr>
    </thead>
    @*<tfoot>
        </tfoot>*@
</table>


<script>

    $(document).ready(function () {

        var EDTTestPeople = new $.fn.dataTable.Editor({
            ajax: "/api/test",
            table: "#TblTestPeople",
            fields: [
               {
                   label: "Id:",
                   name: "Id",
                   validator: "Required"
               }, {
                   label: "First Name:",
                   name: "FirstName1",
               }, {
                   label: "Last Name:",
                   name: "LastName1"
               }, {
                   label: "Test1 Id:",
                   name: "test1Id"
               }
            ]
        });

        var DTTestPeople = $('#TblTestPeople').DataTable({
            fixedHeader: {headerOffset: 50},
            responsive: true,
            select: true,
            colReorder: true,
            //pageLength: 20,
            //order: [[2, 'asc']],
            ajax: "/api/test",
            columns: [
            {
                data: "test1.Id",
                visible: false,
                searchable: false
            },
            { data: "test1.FirstName1" },
            { data: "test1.LastName1" },
            { data: "test2.test1Id" }
            ]

        });

        new $.fn.dataTable.Buttons(DTTestPeople, [
        { extend: "create", editor: EDTTestPeople },
        { extend: "edit", editor: EDTTestPeople },
        { extend: "remove", editor: EDTTestPeople }
        ]);

        DTTestPeople.buttons().container()
        .appendTo($('.col-sm-6:eq(0)', DTTestPeople.table().container())
        );
    });
</script>

Controller:

   public class DTEController : ApiController
        [HttpGet, HttpPost, Route("api/test")]
        public IHttpActionResult DTETest()
        {
            var request = HttpContext.Current.Request;
            var settings = KB.MVC.Properties.Settings.Default;

            using (var db = new Database(settings.DbDataType, settings.DbDataConnection))
            {
                var response = new Editor(db, "test1", "Id")
                    .Model<TestDTO>()
                    .Field(new Field("test1.Id"))
                    .Field(new Field("test1.FirstName1")
                        .Validator(Validation.NotEmpty())
                        .Validator(Validation.MaxLen(50))
                    )
                    .Field(new Field("test1.LastName1"))
                    .Field(new Field("test2.test1Id"))

                    .LeftJoin("test2", "test1.Id", "=", "test2.test1Id")

                    .Process(request)
                    .Data();

                return Json(response);
            }
 }

**Model:**

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
using DataTables;

namespace KB.MVC.ViewModels
{
    public class TestDTO : EditorModel
    {
        public class test1 : EditorModel
        {
            public int Id { get; }
            public string FirstName1 { get; set; }

            public string LastName1 { get; set; }

        }

        public class test2 : EditorModel
        {
            public int Id { get; }

            public string FirstVector2 { get; set; }

            public string SecondVector2 { get; set; }

            public int test1Id { get; }

        }

    }
}

Database (MySQL):

CREATE TABLE `test1` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `FirstName1` varchar(30) DEFAULT NULL,
  `LastName1` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

CREATE TABLE `test2` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `FirstVector2` varchar(45) DEFAULT NULL,
  `SecondVector2` varchar(45) DEFAULT NULL,
  `test1Id` int(11) DEFAULT NULL,
  PRIMARY KEY (`Id`),
  KEY `fk_test1_idx` (`test1Id`),
  CONSTRAINT `fk_test1` FOREIGN KEY (`test1Id`) REFERENCES `test1` (`Id`) ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

allan

Hi,

The Editor fields.name parameter needs to match the data structure - so you would use:

name: "test1.FirstName1",

Basically the Editor fields.name and DataTables columns.data parameter should usually be the same. The only common exception to that is when using a select list and you want to have the table show the label and Editor edit the id.

Allan

JordanCapitalIT@gmail.com

It's often the most obvious thing which a person misses - at least this person / my bad.

Thanks much Allan.