Submitting form with JSON data in jQuery

Question

In short, we have special requirements. That is, to put certain data into form elements, and then submit the form. The reason we do this is to open a new window to return the Excel spreadsheet, but we need to specify the parameters for the form request.

Basically, my data (clickPoints variable in javascript) is not passed to the server side action method, but is in the form request.

Properly:

$("#excel").click(function() { $("#Points").val(getExcelDataPoints(clickPoints)); $("#GeomType").val("LINESTRING"); $("#StartDate").val($("#start-date").val()); $("#EndDate").val($("#end-date").val()); $("#ExcelExport").submit(); // this is the form which I want to submit }); 

All other parameters work fine, except for points. Here is the definition of getExcelDataPoints

 function getExcelDataPoints(points) { var data = "{'Points': ["; for(var i = 0; i < points.length; i++) { data += "{'Da': '" + points[i].lat() + "', 'Ea': '" + points[i].lng() + "'},"; } data = data.substr(0, data.length - 1); data += "]}"; return data; } 

You might be wondering why I build it manually. There are reasons. The thing is, this definitely works when executing a $.ajax request using jquery, so I know that the format is absolutely right. But when executing the first code, as indicated above, it does not work.

Here is the definition of the action on the server;

 [HttpPost] public IList<AISExcelPosition> ExcelExport(LatLng[] Points, GeomType GeomType, DateTime StartDate, DateTime EndDate) { var poo = Request.Form["Points"]; // Magical.... UNICORNS! /* `\ \\, \\\,^,.,,. ,;7~((\))`;;,, ,(@') ;)`))\;;', ) . ),(( ))\;, /;`,,/7),)) )) )\,, ,,,... , (& )` (,((,((;( ))\,_,,;'` `\\, `" ` ), ))),/( ( `)\, '1/';/; ` ))), (, ( / ) ((/, / \ / (((' ( 6--\% ,> ,,,( /'))\' \,\,/ ,/`----~`\ \ >,))))' \/ / `--7>' /(((((' (,9 // /'('((\\\, \ \,, (/,/ '\`\\'\ `\_)1 (_)Kk `\`\\`\ `\| \Z `\ ` " ` */ 

Yes. In my code, I have a unicorn.

You will see a bit var poo = Request.Form["Points"]; that we launched there, which proved to us (and after observing the form data in the basic POST request) that the data is really there, everything is beautifully formatted.

Here's the actual JSON data:

 "{'Points': [{'Da': '49.45995313552066', 'Ea': '-2.5134216308593977'},{'Da': '49.45894893804116', 'Ea': '-2.5134216308593977'}]}" 

Any clues on what I should do?

Answer 1

My best guess is that your points are delivered to the server as a string value and are not interpreted as JSON.

$.ajax works because the string returned from getExcelDataPoints(points) is a JSON object with the Points property, this directly matches your action parameter. This is in this format: { ... } . When you put this object in the input element, it becomes more like this format: "{ ... }" , which is a string.

Another less important issue with this setting is that getExcelDataPoints(points) generates the name of the Points property, and then you take it and put it in your field, which is also called Points , giving you an additional wrapper so that the values ​​look more like Points.Points[] instead of Points[] .

To check if you can send JSON data to the regular submit form, I set up a quick MVC3 project and changed the Home / Index view to have the following code:

 @using (Html.BeginForm("About", "Home")) { <input type="hidden" name="Points" value="[{'Da': '49.45995313552066', 'Ea': '-2.5134216308593977'},{'Da': '49.45894893804116', 'Ea': '-2.5134216308593977'}]" /> <input type="submit" /> } <a id="jason">Run The Query!</a> <script type="text/javascript"> $('#jason').click(function (event) { $.post('@Url.Action("About")', {'Points': [{'Da': '49.45995313552066', 'Ea': '-2.5134216308593977'},{'Da': '49.45894893804116', 'Ea': '-2.5134216308593977'}]}, function (data) { alert(data); }); event.preventDefault(); }); </script> 

The action "Home / About" has been changed as follows:

 [HttpPost] public ActionResult About(LatLng[] Points) { var poo = Request.Form["Points"]; return Json("hello"); } 

And this confirmed that it occurs as a string. You can send the list into action using the various methods shown here , so I decided that I would crack some quick js to format JSON into form elements that will work for what you do. This is ugly, but if you are forced to use the submit form, it will work (or, as Kevin says, I will show you how to shoot yourself in but you must decide to do this):

 @using (Html.BeginForm("About", "Home", FormMethod.Post, new { @class = "point-maker" })) { <input type="submit" /> } <script type="text/javascript"> $(function () { var points = [{ 'Da': '49.45995313552066', 'Ea': '-2.5134216308593977' }, { 'Da': '49.45894893804116', 'Ea': '-2.5134216308593977'}]; var form = $('.point-maker'); for (var index in points) { var point = points[index]; form.append(CraftHiddenPoint(index, point.Da, point.Ea)); } }); function CraftHiddenPoint(index, da, ea) { return $('<input type="hidden" name="Points[' + index + '].Da" value="' + da + '" /><input type="hidden" name="Points[' + index + '].Ea" value="' + ea + '" />'); } </script>