0

I'm using jqGrid to show the data of my service, I was previously retrieving the data using jsonp but I'm not allow to use it anymore, so I changed all the others ajax calls of the application (they use jQuery ajax), and they work fine but jqGrid is giving me problems, previously I was using:

Previous way to call the service:

myObj.jqGrid({
    url: externalUrlOfMyService,
    datatype: 'json',
    mtype: 'GET',
    postData: {
        obj1: JSON.stringify(valueObj1),
        obj2: JSON.stringify(valueObj2)
    })
    ...
});

Newest and not working way of calling the service:

myObj.jqGrid({
    url: externalUrlOfMyService,
    datatype: 'json',
    mtype: 'POST',
    postData: JSON.stringify({
        obj1: valueObj1,
        obj2: valueObj2
    }),
    ajaxGridOptions: { contentType: "application/json", cache: true },
    ...
})

I know it reaches the server cause I have a breakpoint on the Application_BeginRequest of my global.asax, but that's all, it never enters the method.

If I try with GET method it enters the method but all parameters are null.

Note: I'm using jqGrid 4.5.2

Any ideas?

Thanks in advance.

UPDATE

<OperationContract()>
<WebInvoke(Method:="*",
           RequestFormat:=WebMessageFormat.Json,
           ResponseFormat:=WebMessageFormat.Json,
           BodyStyle:=WebMessageBodyStyle.WrappedRequest)>
<FaultContract(GetType(ServiceFault))>
Function RetrievePhones(userCompany As LookUpValue,
                    recordOwnerType As Enumerations.EnumRecordOwnerType,
                    recordOwnerId As String,
                    consumer As ConsumerObject)

UPDATE 2

I did this, but I'm getting bad request, is there something wrong?

postData: {
    userCompany: userCompany,
    recordOwnerType: recordOwnerType,
    recordOwnerId: recordOwnerId,
    consumer: consumer
},
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (data) {
    return JSON.stringify({
        userCompany: data.userCompany,
        recordOwnerType: data.recordOwnerType,
        recordOwnerId: data.recordOwnerId,
        consumer: data.consumer
    });
},

UPDATE 3

Fiddler

enter image description here

UPDATE 4

Maybe it's irrelevant, but heres the info of my global.asax:

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", WebConfigurationManager.AppSettings("AllowOrigin"))
'HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true")
'AuthenticateAJAXRequest()
If HttpContext.Current.Request.HttpMethod = "OPTIONS" Then
    'These headers are handling the "pre-flight" OPTIONS call sent by the browser
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST")
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Authorization, Origin, Content-Type, Accept, X-Requested-With")
    HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000")
    HttpContext.Current.Response.[End]()
End If

UPDATE 5

I just check that at the end of the options of my jqGrid I had ajaxGridOptions: { timeout: 30000 } which was overwriting ajaxGridOptions: { contentType: "application/json" } that I was previously setting, therefore I was having Content-Type: text/html on fiddler and giving me the 400 bad request.

user123456
  • 133
  • 7

1 Answers1

1

You use BodyStyle:=WebMessageBodyStyle.WrappedRequest proeprty. It means that all parameters together needed be JSON encoded as one object. See the answer.

Thus you have to use serializeGridData to serialize all parameters (your custom parameters which you added in postData and the standard jqGrid parameters):

serializeGridData: function (data) {
    return JSON.stringify(data);
}

I recommend you to remove cache: true option additionally, which have no sense in case of usage mtype: 'POST'.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Please, check my updated question, I did this, but maybe I'm doing something else wrong... Thanks for your time! – user123456 Jul 03 '15 at 14:19
  • @user123456: The names of parameters send to `url` (`GenericFuncition`) should be the same as the parameters which you use in `serializeGridData`. – Oleg Jul 03 '15 at 14:29
  • Just checked that and I'm still getting the error. I tried using `GET` method, it reaches the breakpoint I put inside the method of the service, but all parameters are null as well, any other ideas? :/ – user123456 Jul 03 '15 at 15:03
  • @user123456: I wrote you about **the names** of parameters which you use in URL. You posted `GenericFuncition` with `MyObj` as parameters. It doesn't corresponds the parameters `userCompany`, `recordOwnerType` and so on. You should include more details in your question. The `externalUrlOfMyService`, `GenericFuncition` and `MyObj` gives no information. I recommend you additionally to use [Fiddler](http://www.telerik.com/fiddler) or Developer Tools of IE (press F12 to start) to create the trace of HTTP traffic. You will see what will be send to the server and can verify whether everything is OK. – Oleg Jul 03 '15 at 15:15
  • Sorry, I was using dummy objects, give me a sec and I'll post the fiddler info and the real name of the parameters. – user123456 Jul 03 '15 at 15:21
  • @user123456: Look at [the old answer](http://stackoverflow.com/a/3914796/315935) which provides [the demo project](http://www.ok-soft-gmbh.com/jqGrid/WfcToJqGrid.zip) which you can download compile and debug. It uses `UriTemplate` attribute for HTTP GET requests. – Oleg Jul 03 '15 at 15:22
  • I'm checking that answer, the only difference I see is that I'm using CORS on the service, gonna download it. I've updated my question with all the relevant data. Thanks a lot for your time! – user123456 Jul 03 '15 at 15:35
  • Check my update, I just found what my error was. I'm checking your answer because without `serializeGridData` I would have never found the solution. Thanks for your time and for all those other great anwsers related to jqGrid, you have helped me a lot. – user123456 Jul 03 '15 at 17:21
  • @user123456: I use `"use strict";` in **all my demos** ( `"use strict";` should be the first line inside of on top function `$(function () {"use strict";/* your code should be here*/});`). it prevents your from such errors. If you would include `ajaxGridOptions` property twice then your code will not work at all and you will see the syntax error in the line of your code where in included the second `ajaxGridOptions` property. – Oleg Jul 03 '15 at 17:42