Can Insert but Not Edit or Delete (via Asp.net Web API)

JeffD

I am connecting the Editor to ms sql for insert, update, and delete using Asp.net Web API as in the example that comes with the Editor.

The data is displayed correctly and I can insert new rows but I cannot edit or delete.

When I edit, the form fields are all blank initially. Clicking the update button on the edit form causes a POST of the same data from the row (no matter what I actually type in the form fields).

When I delete, I get a 500 error with the exception message "The given key was not present in the dictionary." and a stack trace.

I don't see any significant differences between my code and the sample code, except that my ID field is an identity.

DataTable Debugger: uveliv

Test case:
1) visit http://74.208.111.10/Festhallen.aspx or http://74.208.111.10/Events.aspx
2) click "Edit" on any row
3) notice text box is blank

Client Side:

$(document).ready(function () {

    var editor = new $.fn.dataTable.Editor({
        ajax: '/api/dataTables/venue',
        fields: [
            //{ label: "ID", name: "Id", type: "hidden" },
            { label: "Festhallen", name: "Description" },
            {
                label: "Season", name: "SeasonId",
                type: "hidden",
                default: "1"
            }
        ]
    });

    // Edit record
    $('#VenueTable').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();

        editor.edit($(this).closest('tr'), {
            title: 'Edit Festhallen',
            buttons: 'Update'
        });
    });

    // Delete a record
    $('#VenueTable').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();

        editor.remove($(this).closest('tr'), {
            title: 'Delete Festhallen',
            message: 'Are you sure you wish to remove this festhallen?',
            buttons: 'Delete'
        });
    });

    $("#VenueTable").DataTable({
        dom: '<"html5buttons"B>T',
        select: false,
        buttons: [
            {
                extend: 'create', editor: editor,
                formTitle: 'New Event'
            }
        ],

        ajax: '/api/dataTables/venue',
        responsive: true,
        columns: [
            { data: "Id" },
            { data: "Description" },
            {
                data: null,
                defaultContent: '<a href="#" class="view_report">View</a>'
            },
            {
                data: null,
                defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
            }
        ],
        columnDefs: [
            { targets: [0], visible: false }
        ],
        order: [1, 'asc']
    });

});

Server Side:

    public class VenueController : ApiController
    {
        [Route("api/datatables/venue")]
        [HttpGet]
        [HttpPost]
        public IHttpActionResult Venue()
        {
            var request = HttpContext.Current.Request;
            using (var db = new Database("sqlserver", "Data Source=.;Initial Catalog=KWOktoberFestTicketSystem;Integrated Security=True"))
            {
                var response = new Editor(db, "Venue", "Id")
                    .Model<WebServices.Venues.Venue>()
                    .Process(request)
                    .Data();
                return Json(response);
            }
        }

allan

Thanks for the link! It took me a little while to realise myself!

The table option is missing, so Editor doesn't link to that DataTable. Adding table: '#VenueTable' to your Editor initialisation should fix that.

Allan