This is something I've been putting together this weekend. Due to the fact, that ASP.NET is quite reluctant to get an array of results from a request, I've devised an alternative way of sending data to the server via Web.API. There are already several large frameworks that handle data-binding like Knockout and AngularJS, but these are rather heavy and don't work well with jQuery (at least AngularJS).
Essentially, idea is to convert a form into a ViewModel object on the server side. This usually works with simple POST because there is a direct mapping of names and values between the form and the ViewModel. There is however a big limitation: no arrays and/or lists. One cannot simply post an array of values (or there is no clean and easy way of doing it) via MVC (what the heck was Microsoft thinking). The solution is to create a WebAPI which can accept arrays. In order to do this, however, we need to convert the form into a JSON. Once we have it, it is easy enough to post.
To make it simple and platform independent, for each element, in your form define a data-bind attribute. It contains a JSON path in your object e.g. data-bind="name" will refer to {name:""} etc. The data-bind can get more complex e.g. data-bind="events.times[0].Start[0]" will map to {events: {[{[],..}]}} and it will be fed data from the field.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
function getObj(from) { var data = {}; $(form).find("select").each(function (i, e) { set(data, $(e).data('bind'), $(e).val()); }); $(form).find("input").each(function (i, e) { set(data, $(e).data('bind'), $(e).val()); }); $(form).find("textarea").each(function (i, e) { set(data, $(e).data('bind'), $(e).val()); }); return data; } function set(schema, path, value) { var pList = path.split('.'); var len = pList.length; for (var i = 0; i < len - 1; i++) { var elem = pList[i]; if (!schema[elem]) schema[elem] = {} schema = schema[elem]; } schema[pList[len - 1]] = value; } function submit() { var objectVM = getObj($("#your-form")); $.post("/your/address/", objectVM); } |