MVC3 using DataTable and Editor

christoefar

Hello,

I have DataTables working and I am trying to implement Editor.
Does anybody have an example of the server side code (i.e. an MVC controller) that I should be using.
I have tried quite a lot of different variations and I can't seem to get the data to map over.

What should I be accepting as a parameter for the create method on the server?

Thanks
Chris

allan

Hi Chris,

I'm afraid I don't yet have an example implementation of Editor with ASP yet, but it is something that we will be added in the relatively near future (either 1.3 or the 1.4 releases depending on how things go!).

Having said that, I can assist on what the client-side expects.

The Editor server / client communication protocol is documented here: http://editor.datatables.net/server/ .

If you want to use different URLs for the add, edit and delete options, as I believe is often the case in ASP, you can use the 'ajaxUrl' as an object option - http://editor.datatables.net/options/#ajaxUrl (click the 'show details' link for ajaxUrl).

If you have any further questions, do let me know.

Regards,
Allan

christoefar

I am struggling converting the Json that is passed from the client to the server.
Not sure why, I imagine the code is actually quite simple!

I get this...

[code]
0: "action"
1: "table"
2: "id"
3: "data[OrderId]"
4: "data[CustomerId]"
5: "data[DateBooked]"
6: "data[AccountManager]"
7: "data[Status]"
8: "data[ActUnits]"
9: "data[ActBBG]"
[/code]

Returned from my controller, I am using FormCollection as in parameter in the controller, I have also tried defining my own object with the correct fields in, but that doesn't work either.

christoefar

OK, think I may be getting somewhere.
I just need to figure out how to access array data within a FormCollection.

christoefar

Is it possible to just send a flat list of parameters, like...

[code]
{
"id": -1,
"table": "",
"action": "create",
"browser": "Chrome",
"engine": "Webkit",
"platform": "Win / Mac / Linux",
"version": "535.1",
"grade": "A"
}
[/code]

allan

Ah, I'm afraid I don't know how you would access array/object parameters in ASP.NET - there surely will be a way to do it, but you might need to ask on an ASP site.

To set a flat list of parameters, yes absolutely this can be done - the reason it isn't done by default is because you could get name clashed (for example if there was an input filed called "action"). The way to alter the object that is being set tot he sever is with the onPreSubmit event / callback: http://editor.datatables.net/options/#onPreSubmit . It will give you the data that is going to be sent to the server and you can manipulate it how you wish.

[code]
onPreSubmit: function ( json ) {
$.each( json.data, function (index, val) {
json[index] = val;
}
delete json.data;
}
[/code]

I haven't actually run that in a browser, so I might have an inadvertent syntax error(!), however that should do the business for you.

Allan

christoefar

Bingo :)

For anyone else that might find this useful, there was a small syntax error, a missing bracket, the code below is correct.....

[code]
onPreSubmit: function ( json ) {
$.each( json.data, function (index, val) {
json[index] = val;
}
)
delete json.data;
}
[/code]

Thanks again for your help, you're a star!

Chris

allan

Thanks for picking that up - I've edited my post above, just incase. Good to hear it did the job for you.

I've just had a look myself, and it appears that you can indeed use this nested type of JSON data in a request to an .NET MVC program. It looks like it is all to do with how the views are set up - this post might be interesting (either for yourself or anyone else reading) if you want to take this approach: http://stackoverflow.com/questions/4789481/post-an-array-of-objects-via-json-to-asp-net-mvc3

Regards,
Allan

mmeisinger

Thanks for the above question, Chris, and answer, Allan. It saved me a lot of work.

It seems that MVC3 prefers "data.Field1" syntax to "data[Field1]". Working off of the above code, this function converts all data parameters to an MVC3-friendly format:

[code]editor = new $.fn.dataTable.Editor({
"ajaxUrl": "/Customers/Save",
...
"events" : {
"onPreSubmit": function (json) {
// Format data so it works with MVC3
$.each(json.data, function (index, val) {
json["data." + index] = val;
});
delete json.data;
}
}
});[/code]

And your controller method can be defined like this:

[code]public ActionResult Save(string action, string table, string id, CustomerRecord data)
{
// Insert, Update or Delete customer here...
}[/code]