Web API returns XML on JSON call

Question

I have a problem with interworking MS WebAPI and ExtJS

ExtJS does an API call from

proxy : {
 type : 'ajax',
 noCache: false,
 pageParam: false,
 startParam: false,
 limitParam: false,
 extraParams: {
 param1 : var1,
 param2 : var2,
 },
 api: {
 read : 'api/DataSource',
 },

and my Web API application returns XML (I can see this in FireBug).

[System.Web.Http.AcceptVerbs("GET", "POST")]
[System.Web.Http.HttpGet]
public DataModel DataSource(int debug=0)
{
 DataSource dataSource = new dataSource();
 ...
 return dataSource
}

There is only one reason I can think of, why xml is returned: Firefox does not ask for application/json specifically on this ExtJS json call. If I change the default AcceptHeaders of Firefox to a more json-friendly one, JSON is returned.

As the user shall not have to change his browser settings, I see two solutions:
-> Tell the Javascript to ask for application/json.
-> Or tell MS to always return json.

I would prefer option 1, but I don't know whether or how I can change this?

• Maess: Can you post the code for the controller action?
• Alexander: Which controller? WebAPI controller or ExtJS controller?
• Maess: If you want Json, you'll need the webApi action to return a Json result.
• Alexander: Why exactly do these accept-headers exist if no one sets and evaluates them correctly?
• Maess: If you have access to the web api project you can do what Darrel Miller suggests below.

Answer 1

When you're able to control what gets passed to the Ajax request, you can override the headers on each request:

Ext.Ajax.request({
 url: '...',
 headers: { 'Accept': 'application/json' },
 params: { ... },
 ...
});

When you don't have control over the request (i.e. it's indirectly called behind a layer of stores/proxies/etc), you have to dig around in the API to see if it allows you to customize the parameters of the request. In this case, the Ext.data.proxy.AjaxProxy class allows you to pass custom headers:

proxy : {
 type : 'ajax',
 headers: { 'Accept': 'application/json' }, // or whatever you need
 ...
}

I didn't want to have to do this all over the place, so I decided to monkeypatch my own defaultHeaders by overriding the Ext.Ajax singleton class:

Ext.define('MyApp.overrides.core.Ajax', {
 override: 'Ext.Ajax',
 defaultHeaders: {
 'Accept': '*/*' // or whatever you need if this is too liberal
 }
});

Then you just have to make sure this class gets loaded when your application is bootstrapped. Doing it this way impacts every Ajax request, even those made by framework code through the Ext.Ajax module. Your mileage may vary with this solution.

• Alexander: I set the proxy headers, and it works. Is there any reason why one would use a reader of type json without proxy headers properly set to json?
• Joe Holloway: Beats me. That's why I ended up monkeypatching all my requests with */* so I don't have to think about it. My ExtJS application isn't an abstract "agent", so the media types are just implicit in my application's service layer. I don't need no stinkin' negotiation.
• user887983: it's a very googd solution

Answer 2

Clear the formatters collection on the config object and just add back the JsonMediaTypeFormatter.

• Maess: I'm not sure the OP has access to the WebApi Source
• Darrel Miller: @Maess You don't need it