Trouble getting inline editor values

Surge

Hi. I'm having trouble using the client libraries for DataTables and Editor with ASP.NET MVC. I am unable to get more than the id field from the table. I want to get the edited values when you edit a cell, then hit enter. I'm trying to get a hard-coded table working before incorporating my data.

Here's my table:

<table id="example" class="display" cellspacing="0">
    <thead>
        <tr>
            <th></th>
            <th>Id</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extension</th>
            <th width="18%">Start date</th>
            <th>Salary</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <td>1</td>
            <td>Tim</td>
            <td>Weathersby</td>
            <td>Software Dev</td>
            <td>Home</td>
            <td>x1234</td>
            <td>2016-08-01</td>
            <td>300000</td>
        </tr>
        <tr>
            <th></th>
            <td>2</td>
            <td>Jane</td>
            <td>Meyer</td>
            <td>President</td>
            <td>Home</td>
            <td>x1213</td>
            <td>2016-08-01</td>
            <td>3000000</td>
        </tr>
    </tbody>
</table>

Here's my js:

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {
    editor = new $.fn.dataTable.Editor({
        ajax: {
            edit: {
                type: 'POST',
                url: '/Home/SaveEmployee?id=_id_'
            }
        },
        table: '#example',
        idSrc: 'Id',
        fields: [{
            label: "Id:",
            name: "Id"
        }, {
            label: "First name:",
            name: "first_name"
        }, {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "Position:",
            name: "position"
        }, {
            label: "Office:",
            name: "office"
        }, {
            label: "Extension:",
            name: "extn"
        }, {
            label: "Start date:",
            name: "start_date",
            type: "datetime"
        }, {
            label: "Salary:",
            name: "salary"
        }
        ]
    });

    // Activate an inline edit on click of a table cell
    $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
        editor.inline(this, {
            submit: 'all'
        });
    });

    $('#example').DataTable({
        dom: "Bfrtip",    
        order: [[1, 'asc']],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "Id" },
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [
                    { extend: "remove", editor: editor }
        ]
    });
});

Here's my controller POST method:

[HttpPost]
        public ActionResult SaveEmployee(int id, string action, object data)
        {
            var testy = data;

            return RedirectToAction("InlineEditing");
        }

What an I missing? Thanks for the help.

allan

That looks like it should be working I must confess. Are you able to give me a link to the page so I can try to trace it through please?

Allan

Surge

Hello, Allan! I do not have this in a live site yet, but you can build it in your local dev environment if you copy the code. Are you able to do that?

allan

Looking into it:

return RedirectToAction("InlineEditing");

will return a 302 as I understand it. But Editor expects valid JSON (probably with a 200 code, but that doesn't matter as much as the JSON data).

Is the server responding with an empty 302 at the moment? If so, that's the issue.

Allan

Surge

It does return a 302, but my problem seems to lie in the POST method:

[HttpPost]
public ActionResult SaveEmployee(int id, string action, object data)

I can see the value for id and action, but data is empty. In the headers, I see the following:

action:edit
data[1][Id]:1
data[1][first_name]:Timo
data[1][last_name]:Weathersby
data[1][position]:Software Dev
data[1][office]:Home
data[1][extn]:x1234
data[1][start_date]:2016-08-01
data[1][salary]:300000

I edited the first_name from "Tim" to "Timo". How can I get the form data?

allan

You'd need to parse it from the incoming data (Request.Form). The DataTables.dll in the Editor .NET package has a DtRequest class which can be used to do that if you want.

Allan

Surge

Thanks again, Allan. Your last response triggered my memory. I am able to get the form values using these arguments in my method:

[HttpPost]
public ActionResult SaveEmployee(int id, string action, FormCollection form)

Thanks for the help!