tag:blogger.com,1999:blog-1179473529409580853.post2721907258799636523..comments2024-02-02T10:16:36.942+01:00Comments on Erratic software development: Sending complex JSON objects to Asp.net MVC using jQuery AjaxRoberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.comBlogger92125tag:blogger.com,1999:blog-1179473529409580853.post-14557565400820690222020-01-15T21:33:01.049+01:002020-01-15T21:33:01.049+01:00lint is suggesting that you are missing a break st...lint is suggesting that you are missing a break statement before the default in your case statement.lord orwellhttps://www.blogger.com/profile/06890785933004277619noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-79458283838150833192018-12-04T09:51:19.364+01:002018-12-04T09:51:19.364+01:00Really late, but I suppose this plugin can be used...Really late, but I suppose this plugin can be used outside of Asp.net MVC too. The JSON to Dict conversion may still be useful elsewhere. So thanks.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-1397201420996557782018-11-29T22:33:04.620+01:002018-11-29T22:33:04.620+01:00Late to the party, but thank you for this brillian...Late to the party, but thank you for this brilliant piece of helpful code!Chris Kennedyhttps://www.blogger.com/profile/05866179145088832142noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-69745767526342463052014-12-17T09:54:33.784+01:002014-12-17T09:54:33.784+01:00Thanks. I'm glad it did. :)Thanks. I'm glad it did. :)Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-80581558054296240572014-11-19T23:30:21.168+01:002014-11-19T23:30:21.168+01:00Excellent article, your jquery plugin saved my day...Excellent article, your jquery plugin saved my day. :DKAUSHIK GHOSHhttps://www.blogger.com/profile/07839090927576041604noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-31848295592325596752014-08-11T19:24:41.219+02:002014-08-11T19:24:41.219+02:00Thanks for your comment letting me know it solves ...Thanks for your comment letting me know it solves your problem as it did mine. Without I can't know whether my plugin helped anybody or not. So thanks again Joseph.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-67864952956238463892014-08-11T02:06:13.826+02:002014-08-11T02:06:13.826+02:00very nice and good idea - thanks for posting. You...very nice and good idea - thanks for posting. Your plugin worked perfectly for a complex object involving arrays.Joseph Gabrielhttps://www.blogger.com/profile/08182411212158168563noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-80244978938325108672014-06-24T11:24:12.437+02:002014-06-24T11:24:12.437+02:00I'm not sure about case sensitivity in current...I'm not sure about case sensitivity in current versions of Asp.net MVC (I understand that's what you're using), but this link on Stackoverflow (http://stackoverflow.com/a/19565393/75642) may help you with that if casing should be a problem.<br /><br />The important thing (for now) is that it works as expected. But don't collect too much technical dept for the future hence I suggest cleaning up your code.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-79906873892161270112014-06-24T10:47:54.548+02:002014-06-24T10:47:54.548+02:00My previous response was written immediately after...My previous response was written immediately after receiving yours, before I had checked my code and was therefore inaccurate, which is why I deleted it. <br /><br />I am receiving camel casing from the php app where the JSON originates and any deviation from this was from typos by me. I am also yet to check details like correct field types as my main concern was getting the deserialization to work. But yes all of this needs to be corrected. <br /><br />As for the rest, thanks for the advice and for creating this wonderful plugin which has saved me a lot of time. Adsohttps://www.blogger.com/profile/01655086929503979592noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-49855615204964676762014-06-24T09:34:57.951+02:002014-06-24T09:34:57.951+02:00Can you rather show an example of your current dat...Can you rather show an example of your current data and what you would like it to be?Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-78809295913729173602014-06-24T09:34:09.593+02:002014-06-24T09:34:09.593+02:00I'm glad you've already fixed it yourself,...I'm glad you've already fixed it yourself, but I would suggest you remove your additional superfluous class <i>objects</i> as it only holds the list of orders. I would change the <i>OrderStatus</i> class to have the last property defined as:<br /><br /><i>public IList<order> objects { get; set; }</i><br /><br />And likely also change properties' types of <i>order</i> to be integers. And you should seriously rethink your naming conventions because sometimes your using camel casing, sometimes Pascal casing and is generally a mess which will prove to be very hard to maintain on the long(er) run. I suggest you look into C# naming conventions to clean it up (http://msdn.microsoft.com/en-us/library/ms229042.aspx). This will align your code to .net Framework naming conventions so it will feel natural and self explanatory.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-57436992708321016572014-06-23T19:45:25.751+02:002014-06-23T19:45:25.751+02:00I needed object to be serialized ordered by proper...I needed object to be serialized ordered by property name. see this, just before returning result:<br /><br /><br /><br /> result.sort(function (a, b) {<br /> //debugger;<br /> return $.sortAlphaNumeric(a.name, b.name);<br /> });<br /><br /><br /><br /><br />// Taken from http://stackoverflow.com/a/4340339/833846<br />$.extend({<br /> sortAlphaNumeric: function (a, b) {<br /> var reA = /[^a-zA-Z]/g;<br /> var reN = /[^0-9]/g;<br /><br /> var aA = a.replace(reA, "");<br /> var bA = b.replace(reA, "");<br /><br /> if (aA === bA) {<br /> var aN = parseInt(a.replace(reN, ""), 10);<br /> var bN = parseInt(b.replace(reN, ""), 10);<br /> return aN === bN ? 0 : aN > bN ? 1 : -1;<br /> } else {<br /> return aA > bA ? 1 : -1;<br /> }<br /> }<br />});Marco Alveshttps://www.blogger.com/profile/11725306367432431999noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-74313974941840272692014-06-23T17:17:27.545+02:002014-06-23T17:17:27.545+02:00Fixed it by slightly amending my server side class...Fixed it by slightly amending my server side classes:<br /><br /> public class order<br />{ <br /> public string Id { get; set; }<br /> public string statusId { get; set; }<br />}<br /><br />public class objects<br />{<br /> public List < order > orders { get; set; }<br />}<br /><br />public class OrderStatus<br />{<br /> public string clientName { get; set; }<br /> public string source { get; set; }<br /> public string auth { get; set; }<br /> public string resourceType { get; set; }<br /> public string idSet { get; set; }<br /> public string lifecycleEvent { get; set; }<br /><br /> public objects objects { get; set; }<br /><br />}<br />So the "orders" class has been changed to "order". "objects.orders" property is amended to be a list.<br /><br />Now the jsondata is deserialized all the way down.Adsohttps://www.blogger.com/profile/01655086929503979592noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-14260998104690845222014-06-23T15:31:15.037+02:002014-06-23T15:31:15.037+02:00Hi Robert,
I have an array nested in an object in...Hi Robert,<br /><br />I have an array nested in an object in a JSON string which I need deserialized at the server: <br /><br />var orderStatus = {"auth": "xxxx", "resourceType": "order.status", "idSet": "2980", "lifecycleEvent": "modified", "objects": { "orders": [ { "id": "2980", "statusId": "6" } ] }<br /><br />I use your plugin like this:<br /><br /> $.ajax({url: "receiveJson", type: "POST", data: $.toDictionary(orderStatus) });<br /><br />My .net class file is:<br /><br />public class orders<br /> { <br /> public string Id { get; set; }<br /> public string statusId { get; set; }<br /> }<br /><br /> public class objects<br /> {<br /> public orders orders { get; set; }<br /> }<br /> <br /> public class OrderStatus<br /> {<br /> public string clientName { get; set; }<br /> public string source { get; set; }<br /> public string auth { get; set; }<br /> public string resourceType { get; set; }<br /> public string idSet { get; set; }<br /> public string lifecycleEvent { get; set; }<br /><br /> public objects objects { get; set; }<br /> <br /> }<br /><br />my controller code is: public JsonResult receiveJson(OrderStatus orderStatus)<br /><br />So the orders object is the array. It works up to creating orders as an object but id and status id in the orders object are null.<br /><br />I have no control over the JSON I will receive, it has to be in this format. <br /><br />I am new to JSON and .NET MVC. Don't know how to specify server side orders object as an array.Adsohttps://www.blogger.com/profile/01655086929503979592noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-20822063049891071442014-04-16T12:25:27.322+02:002014-04-16T12:25:27.322+02:00You're welcome.You're welcome.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-91006824074444241552014-04-16T11:55:29.325+02:002014-04-16T11:55:29.325+02:00I tried with object creation and seems to be worki...I tried with object creation and seems to be working now. Many thanks Robert. Regards PuranUnknownhttps://www.blogger.com/profile/11862610402616996174noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-52155796751691911152014-04-16T10:47:43.486+02:002014-04-16T10:47:43.486+02:00BTW also remove invalid (at least invalid with thi...BTW also remove invalid (at least invalid with this request) Ajax call parameters:<br />- <i>contentType</i><br />- <i>dataType</i> - you likely don't need to ask your server to provide appropriate result as you're processing it and passing such results back<br />- <i>processData</i> - it's <i>true</i> by default anywayRoberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-70989362600707382462014-04-16T10:42:36.571+02:002014-04-16T10:42:36.571+02:00Why didn't you try with my original code. I wa...Why didn't you try with my original code. I was creating actual object instance while you've been creating a string. This won't work anyway you look at it, as you're passing through a plain string.<br /><br />Just use my original code suggestion and create your <i>data</i> as I've written it.So instead making it an array, make it an object.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-54331474954601034982014-04-16T02:34:54.064+02:002014-04-16T02:34:54.064+02:00Thanks Robert, I tried like this var data = '{...Thanks Robert, I tried like this var data = '{"OrderItemDetail": ' +OrderItemDetail +', "OrderProcessingDetail":' +OrderProcessingDetail +'"}';, but while trying to send via $.toDictionary(data); getting error in trace and unable to reach to wcf webmethod....Any idea or may be wrong way to create json object?, please let me know the possible way out to resolve this.Unknownhttps://www.blogger.com/profile/11862610402616996174noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-11534141470721234522014-04-15T23:38:00.070+02:002014-04-15T23:38:00.070+02:00I'm not saying that is the problem here as you...I'm not saying that is the problem here as you've provided quite a bit of code, but it seems you're sending over an array while WCF expects two objects. I suggest you try changing your <i>data</i> array to object:<br /><br /><i><br />var data = {<br /> orderItemDetail: OrderItemDetail,<br /> orderProcessingDetails: OrderProcessingDetails<br />};<br /></i><br /><br />This object's properties' names match WCF method parameter names so data binder should be able to match them.<br /><br />Well at least this would be the first thing to change...Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-9249662236034736152014-04-15T22:23:27.292+02:002014-04-15T22:23:27.292+02:00Hi Robert, Thanks for this solution. I'm tryin...Hi Robert, Thanks for this solution. I'm trying to pass the parent and its children together via json to wcf method and using the same approach. I'm new to json so got stuck while creating the json object with multiple entities. Could you please guide me what's wrong in below code....<br /><br />var OrderProcessingDetail = new Array();<br /><br /> for (var i = 0; i < $("#processingDetailstable > tbody > tr").length; i++) {<br /><br /> OrderProcessingDetail.push({<br /> "ProcessTypeCode": $.trim($("#dropdownProcessTypeCode" + i).val()), "ProcessDateFrom": $.trim($("#inputProcessDateFrom" + i).val()),<br /> "ProcessDateTo": $.trim($("#inputProcessDateTo" + i).val()), "AppliedBy": $.trim($("#inputAppliedBy" + i).val())<br /> });<br /> }<br /><br /> var OrderItemDetail= new Array();<br /> OrderItemDetail.push({<br /> "orderHeaderID": + orderHeaderId,<br /> "originCode": + originCode,<br /> "intendedUse": + intendedUse,<br /> "storageCode": + storageCode,<br /> "isActive": + isActive<br /> });<br /><br /><br /> var data = new Array();<br /> data.push(OrderItemDetail);<br /> data.push(OrderProcessingDetail);<br /> <br /> <br /> $.ajax({<br /> type: "POST",<br /> url: serviceUrl,<br /> data: $.toDictionary(data),<br /> processdata: true,<br /> contentType: "application/json; charset=utf-8",<br /> dataType: "json",<br /> success: function (response) {<br /> var results = eval(JSON.parse(response.CreateResult));<br /> DisplayFaultsDialog(results.Faults);<br /> <br /> },<br /> error: function (msg) {<br /> alert(msg);<br /> }<br /> });<br /><br />here is my webmethod signature.....<br /><br />string CreateItems(OrderItemDetail orderItemDetail, List orderProcessingDetails);<br /><br />Many Thanks <br />PuranUnknownhttps://www.blogger.com/profile/11862610402616996174noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-77976199316634366912014-04-12T00:44:02.638+02:002014-04-12T00:44:02.638+02:00very useful. thx.very useful. thx.Marco Alveshttps://www.blogger.com/profile/11725306367432431999noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-75884579601527947742013-08-21T20:58:37.541+02:002013-08-21T20:58:37.541+02:00If this is your code, then it seems you're not...If this is your code, then it seems you're not using results from ".toDictionary" call. Pass "myData" directly to "data" property of your Ajax request or do the conversion at that point. That's all.<br /><br /><i>data: $.toDictionary(saveData, "model")</i><br /><br />Also omit Ajax request property "dataType" and likely "contentType" as well.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-40672313295570534802013-08-21T18:53:16.596+02:002013-08-21T18:53:16.596+02:00Rob,
Calling .toDictionary twice was a typo (cut...Rob, <br /><br />Calling .toDictionary twice was a typo (cut & paste). Actually I am calling only once. My URL is correct. When I change the ajax call as follows I am able to access my controller.<br /><br />var saveData = [];<br />saveData.push(postdata);<br />var myData = $.toDictionary(saveData);<br />$.ajax({<br />url: "savedata",<br />dataType: 'json',<br />contentType: 'application/json',<br />type: 'POST',<br />data: JSON.stringify({ model: saveData}), //contains data<br />success: function(data) {<br />console.log('Success');<br />},<br />error: function(ex) {<br />console.log('Error');<br />}<br />});IndyGuyhttps://www.blogger.com/profile/01038089664420666302noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-36707281917372400052013-08-21T11:39:46.544+02:002013-08-21T11:39:46.544+02:00One thing that's straightforward is that you&#...One thing that's straightforward is that you're calling <i>.toDictionary</i> twice. First when you create your <i>myData</i> and later transforming <i>myData</i> again in your Ajax call. You should just convert it once and pass <i>myData</i> directly to your Ajax call.<br />But I'm not sure why you should be getting HTTP error 500? Even though your URL may be "savedata", you should check your actual request URL in browser using Developer tools like Chrome Dev tools. You're not using absolute path so it may be an issue here as well.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.com